XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build(custom): 修正提交规范

Browse Source
This commit is contained in:
YuanHuakk
2023-11-09 19:49:24 +08:00
parent 76d57cea37
commit 29c1d4280f
105 changed files with 29374 additions and 18618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/components/RichEditor.vue
View File

@@ -3,81 +3,81 @@
<view class="page-body">
<view class="wrapper">
<view
class="toolbar"
@click="format"
style="max-height: 240px; overflow-y: auto"
class="toolbar"
@click="format"
style="max-height: 240px; overflow-y: auto"
>
<!-- 加粗 -->
<view
:class="data.formats.bold ? 'ql-active' : ''"
class="iconfont icon-zitijiacu"
data-name="bold"
:class="data.formats.bold ? 'ql-active' : ''"
class="iconfont icon-zitijiacu"
data-name="bold"
></view>
<!-- 斜体 -->
<view
:class="data.formats.italic ? 'ql-active' : ''"
class="iconfont icon-zitixieti"
data-name="italic"
:class="data.formats.italic ? 'ql-active' : ''"
class="iconfont icon-zitixieti"
data-name="italic"
></view>
<!-- 下划线 -->
<view
:class="data.formats.underline ? 'ql-active' : ''"
class="iconfont icon-zitixiahuaxian"
data-name="underline"
:class="data.formats.underline ? 'ql-active' : ''"
class="iconfont icon-zitixiahuaxian"
data-name="underline"
></view>
<!-- 对齐方式：左 -->
<view
:class="data.formats.align === 'left' ? 'ql-active' : ''"
class="iconfont icon-zuoduiqi"
data-name="align"
data-value="left"
:class="data.formats.align === 'left' ? 'ql-active' : ''"
class="iconfont icon-zuoduiqi"
data-name="align"
data-value="left"
></view>
<!-- 对齐方式：居中 -->
<view
:class="data.formats.align === 'center' ? 'ql-active' : ''"
class="iconfont icon-juzhongduiqi"
data-name="align"
data-value="center"
:class="data.formats.align === 'center' ? 'ql-active' : ''"
class="iconfont icon-juzhongduiqi"
data-name="align"
data-value="center"
></view>
<!-- 对齐方式：右 -->
<view
:class="data.formats.align === 'right' ? 'ql-active' : ''"
class="iconfont icon-youduiqi"
data-name="align"
data-value="right"
:class="data.formats.align === 'right' ? 'ql-active' : ''"
class="iconfont icon-youduiqi"
data-name="align"
data-value="right"
></view>
<!-- 对齐方式：两侧 -->
<view
:class="data.formats.align === 'justify' ? 'ql-active' : ''"
class="iconfont icon-zuoyouduiqi"
data-name="align"
data-value="justify"
:class="data.formats.align === 'justify' ? 'ql-active' : ''"
class="iconfont icon-zuoyouduiqi"
data-name="align"
data-value="justify"
></view>
<!-- 有序排列 -->
<view
:class="data.formats.list === 'ordered' ? 'ql-active' : ''"
class="iconfont icon-youxupailie"
data-name="list"
data-value="ordered"
:class="data.formats.list === 'ordered' ? 'ql-active' : ''"
class="iconfont icon-youxupailie"
data-name="list"
data-value="ordered"
></view>
<!-- 无序排列 -->
<view
:class="data.formats.list === 'bullet' ? 'ql-active' : ''"
class="iconfont icon-wuxupailie"
data-name="list"
data-value="bullet"
:class="data.formats.list === 'bullet' ? 'ql-active' : ''"
class="iconfont icon-wuxupailie"
data-name="list"
data-value="bullet"
></view>
<!-- 取消缩进 -->
<view
class="iconfont icon-outdent"
data-name="indent"
data-value="-1"
class="iconfont icon-outdent"
data-name="indent"
data-value="-1"
></view>
<!-- 缩进 -->
<view
class="iconfont icon-indent"
data-name="indent"
data-value="+1"
class="iconfont icon-indent"
data-name="indent"
data-value="+1"
></view>
<!-- 添加分割线 -->
<view class="iconfont icon-fengexian" @click="insertDivider"></view>
@@ -85,37 +85,37 @@
<view class="iconfont icon-image" @click="insertImage"></view>
<!-- 设置标题 -->
<view
:class="data.formats.header === 3 ? 'ql-active' : ''"
class="iconfont icon-H"
data-name="header"
:data-value="3"
:class="data.formats.header === 3 ? 'ql-active' : ''"
class="iconfont icon-H"
data-name="header"
:data-value="3"
></view>
<!-- 下标 -->
<view
:class="data.formats.script === 'sub' ? 'ql-active' : ''"
class="iconfont icon-zitixiabiao"
data-name="script"
data-value="sub"
:class="data.formats.script === 'sub' ? 'ql-active' : ''"
class="iconfont icon-zitixiabiao"
data-name="script"
data-value="sub"
></view>
<!-- 上标 -->
<view
:class="data.formats.script === 'super' ? 'ql-active' : ''"
class="iconfont icon-zitishangbiao"
data-name="script"
data-value="super"
:class="data.formats.script === 'super' ? 'ql-active' : ''"
class="iconfont icon-zitishangbiao"
data-name="script"
data-value="super"
></view>
<view class="iconfont icon-undo" @click="undo"></view>
<view class="iconfont icon-redo" @click="redo"></view>
</view>
<view class="editor-wrapper">
<editor
id="editor"
class="ql-container"
:placeholder="data.placeholder"
@statuschange="onStatusChange"
:show-img-resize="true"
@ready="onEditorReady"
@input="getCtx"
id="editor"
class="ql-container"
:placeholder="data.placeholder"
@statuschange="onStatusChange"
:show-img-resize="true"
@ready="onEditorReady"
@input="getCtx"
/>
</view>
</view>
@@ -124,116 +124,115 @@
</template>
<script lang="ts" setup>
import {reactive} from 'vue'
import Taro from '@tarojs/taro'
import {BASE_URL} from '@/utils/request'
import { reactive } from "vue";
import Taro from "@tarojs/taro";
import { BASE_URL } from "@/utils/request";
const {content} = defineProps<{
const { content } = defineProps<{
content: string;
}>()
}>();
let emits = defineEmits(['input'])
let emits = defineEmits(["input"]);
const data = reactive<any>({
editorCtx: '',
editorCtx: "",
readOnly: false,
placeholder: '请输入商品详情...',
richText: '',
formats: {}
})
placeholder: "请输入商品详情...",
richText: "",
formats: {},
});
function onEditorReady() {
// 富文本节点渲染完成
Taro
.createSelectorQuery()
.select('#editor')
.context((res) => {
data.editorCtx = res.context
// 初始化数据
if (content) {
data.editorCtx.setContents({
html: content
})
}
})
.exec()
Taro.createSelectorQuery()
.select("#editor")
.context((res) => {
data.editorCtx = res.context;
// 初始化数据
if (content) {
data.editorCtx.setContents({
html: content,
});
}
})
.exec();
}
// 失去焦点时，获取富文本的内容
function getCtx(e: { detail: { html: any; }; }) {
data.richText = e.detail.html
emits('input', e.detail.html)
function getCtx(e: { detail: { html: any } }) {
data.richText = e.detail.html;
emits("input", e.detail.html);
}
// 撤销操作
function undo() {
data.editorCtx.undo()
data.editorCtx.undo();
}
// 复原操作
function redo() {
data.editorCtx.redo()
data.editorCtx.redo();
}
//修改样式
function format(e: { target: { dataset: { name: any; value: any; }; }; }) {
function format(e: { target: { dataset: { name: any; value: any } } }) {
// console.log("format", e.target.dataset);
let {name, value} = e.target.dataset
if (!name) return
data.editorCtx.format(name, value)
let { name, value } = e.target.dataset;
if (!name) return;
data.editorCtx.format(name, value);
}
//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
function onStatusChange(e: { detail: any; }) {
data.formats = e.detail
function onStatusChange(e: { detail: any }) {
data.formats = e.detail;
}
// 插入分割线
function insertDivider() {
data.editorCtx.insertDivider()
data.editorCtx.insertDivider();
}
// 插入图片
function insertImage() {
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: (res) => {
// 上传图片的逻辑各有不同，自行调整即可
Taro.uploadFile({
url: `${BASE_URL}/upload`,
name: 'file',
header: {token: Taro.getStorageSync('token')},
name: "file",
header: { token: Taro.getStorageSync("token") },
filePath: res.tempFilePaths[0],
success: (res) => {
console.log(res)
console.log(res);
const imgData = JSON.parse(res.data) as {
code: number;
msg: string;
data: any;
}
};
if (imgData.code === 200) {
// 将图片展示在编辑器中
data.editorCtx.insertImage({
width: '100%',
height: 'auto',
width: "100%",
height: "auto",
src: imgData.data.data,
alt: '图像',
alt: "图像",
success: function () {
console.log('insert image success')
}
})
console.log("insert image success");
},
});
} else {
console.log('上传失败')
console.log("上传失败");
}
},
fail: (err) => {
console.log(err)
}
})
}
})
console.log(err);
},
});
},
});
}
</script>
@@ -246,7 +245,7 @@ function insertImage() {
.editor-wrapper {
height: calc(
100vh - var(--window-top) - var(--status-bar-height) - 280px - 650px
100vh - var(--window-top) - var(--status-bar-height) - 280px - 650px
);
overflow: scroll;
background: rgba(153, 153, 153, 0.05);
@@ -283,4 +282,4 @@ function insertImage() {
.ql-active {
color: #f38e48;
}
</style>
</style>