501 lines
11 KiB
Vue
501 lines
11 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view>
|
|
<uni-nav-bar
|
|
title="编辑文字"
|
|
leftText="取消"
|
|
left-icon="left"
|
|
right-text="完成"
|
|
backgroundColor="#ffffff"
|
|
color="#000000"
|
|
@clickRight="toSuccess()"
|
|
@clickLeft="back()">
|
|
</uni-nav-bar>
|
|
</view>
|
|
<view class="page-body">
|
|
<view class='wrapper'>
|
|
|
|
<view class="editor-wrapper">
|
|
<editor
|
|
id="editor"
|
|
class="ql-container"
|
|
placeholder="开始输入..."
|
|
show-img-size show-img-toolbar
|
|
show-img-resize
|
|
@statuschange="onStatusChange"
|
|
:read-only="readOnly"
|
|
@ready="onEditorReady">
|
|
</editor>
|
|
</view>
|
|
<view class='toolbar' @tap="format">
|
|
<view class="item-wrap">
|
|
|
|
<view class="iconfont icon-undo" @tap="undo"></view>
|
|
<view class="iconfont icon-redo" @tap="redo"></view>
|
|
|
|
<zb-popover
|
|
placement="top"
|
|
@handleClick="handleFontAttributeClick"
|
|
ref="fontAttribute"
|
|
actionsDirection="horizontal">
|
|
<view class="iconfont icon-zitijiacu">
|
|
</view>
|
|
<template #content>
|
|
<view
|
|
:class="formats.bold ? 'ql-active' : ''"
|
|
class="iconfont icon-zitijiacu"
|
|
data-name="bold">
|
|
</view>
|
|
<view
|
|
:class="formats.italic ? 'ql-active' : ''"
|
|
class="iconfont icon-zitixieti"
|
|
data-name="italic">
|
|
</view>
|
|
<view
|
|
:class="formats.underline ? 'ql-active' : ''"
|
|
class="iconfont icon-zitixiahuaxian"
|
|
data-name="underline">
|
|
</view>
|
|
</template>
|
|
</zb-popover>
|
|
|
|
<zb-popover
|
|
actionsDirection="horizontal"
|
|
@handleClick="handleFontSizeClick"
|
|
placement="top"
|
|
:options="actions"
|
|
@select="selectFontSizeItme"
|
|
ref="fontSize">
|
|
<view class="iconfont icon-fontsize"
|
|
></view>
|
|
</zb-popover>
|
|
|
|
<zb-popover
|
|
@handleClick="handleFontAlignClick"
|
|
placement="top"
|
|
ref="fontAlign"
|
|
actionsDirection="horizontal">
|
|
<view class="iconfont icon-juzhongduiqi"></view>
|
|
<template #content>
|
|
<view
|
|
:class="formats.align === 'left' ? 'ql-active' : ''"
|
|
class="iconfont icon-zuoduiqi"
|
|
data-name="align"
|
|
data-value="left">
|
|
</view>
|
|
|
|
<view
|
|
:class="formats.align === 'center' ? 'ql-active' : ''"
|
|
class="iconfont icon-juzhongduiqi"
|
|
data-name="align"
|
|
data-value="center">
|
|
</view>
|
|
|
|
<view
|
|
:class="formats.align === 'right' ? 'ql-active' : ''"
|
|
class="iconfont icon-youduiqi"
|
|
data-name="align"
|
|
data-value="right">
|
|
</view>
|
|
|
|
<view
|
|
:class="formats.align === 'justify' ? 'ql-active' : ''"
|
|
class="iconfont icon-zuoyouduiqi"
|
|
data-name="align"
|
|
data-value="justify">
|
|
</view>
|
|
|
|
<view
|
|
class="iconfont icon-indent"
|
|
data-name="indent"
|
|
data-value="+1">
|
|
</view>
|
|
|
|
</template>
|
|
</zb-popover>
|
|
|
|
<zb-popover
|
|
placement="top"
|
|
@handleClick="handleFontListClick"
|
|
ref="fontList"
|
|
actionsDirection="horizontal">
|
|
|
|
<view
|
|
class="iconfont icon-wuxupailie">
|
|
</view>
|
|
|
|
<template #content>
|
|
<view
|
|
:class="formats.list === 'ordered' ? 'ql-active' : ''"
|
|
class="iconfont icon-youxupailie"
|
|
data-name="list"
|
|
data-value="ordered">
|
|
</view>
|
|
|
|
<view
|
|
:class="formats.list === 'bullet' ? 'ql-active' : ''"
|
|
class="iconfont icon-wuxupailie"
|
|
data-name="list"
|
|
data-value="bullet">
|
|
</view>
|
|
|
|
</template>
|
|
</zb-popover>
|
|
|
|
<zb-popover
|
|
placement="top"
|
|
@handleClick="handleFontColorClick"
|
|
ref="fontColor"
|
|
actionsDirection="horizontal">
|
|
|
|
<image class="iconfont" src="https://qnycdn.mymoyu.top/static/icon/colors.png" mode="scaleToFill" style="width: 24px;height: 24px;"></image>
|
|
|
|
<template #content>
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#000000'),
|
|
'not-color': !isColor('#000000')
|
|
}"
|
|
data-name="color"
|
|
class="color-000000-item color-item"
|
|
data-value="#000000">
|
|
</view>
|
|
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#7a7e83'),
|
|
'not-color': !isColor('#7a7e83')
|
|
}"
|
|
data-name="color"
|
|
class="color-7a7e83-item color-item"
|
|
data-value="#7a7e83">
|
|
</view>
|
|
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#ff0000'),
|
|
'not-color': !isColor('#ff0000')
|
|
}"
|
|
data-name="color"
|
|
class="color-ff0000-item color-item"
|
|
data-value="#ff0000">
|
|
</view>
|
|
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#ff9900'),
|
|
'not-color': !isColor('#ff9900')
|
|
}"
|
|
data-name="color"
|
|
class="color-ff9900-item color-item"
|
|
data-value="#ff9900">
|
|
</view>
|
|
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#1aad19'),
|
|
'not-color': !isColor('#1aad19')
|
|
}"
|
|
data-name="color"
|
|
class="color-1aad19-item color-item"
|
|
data-value="#1aad19">
|
|
</view>
|
|
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#1a73e8'),
|
|
'not-color': !isColor('#1a73e8')
|
|
}"
|
|
data-name="color"
|
|
class="color-1a73e8-item color-item"
|
|
data-value="#1a73e8">
|
|
</view>
|
|
|
|
<view
|
|
:class="{
|
|
'is-color': isColor('#cc00cc'),
|
|
'not-color': !isColor('#cc00cc')
|
|
}"
|
|
data-name="color"
|
|
class="color-cc00cc-item color-item"
|
|
data-value="#cc00cc">
|
|
</view>
|
|
|
|
</template>
|
|
</zb-popover>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import cloudImage from "@/components/cloud-image.vue";
|
|
export default {
|
|
components: {
|
|
cloudImage
|
|
},
|
|
data() {
|
|
return {
|
|
readOnly: false,
|
|
formats: {
|
|
|
|
color: "#000000",
|
|
fontSize: "16px",
|
|
|
|
},
|
|
actions: [
|
|
{
|
|
text: '小',
|
|
value: "16px"
|
|
},
|
|
{
|
|
text: '标准',
|
|
value: "20px"
|
|
},
|
|
{
|
|
text: '大',
|
|
value: "24px"
|
|
},
|
|
{
|
|
text: '超大',
|
|
value: "28px"
|
|
},
|
|
],
|
|
}
|
|
},
|
|
onshow() {
|
|
|
|
},
|
|
onLoad(e) {
|
|
|
|
},
|
|
onload(e) {
|
|
console.log(e)
|
|
},
|
|
|
|
methods: {
|
|
closeAllPopover(type) {
|
|
if (type === "attribute") {
|
|
this.$refs.fontSize.close();
|
|
this.$refs.fontColor.close();
|
|
this.$refs.fontAlign.close();
|
|
this.$refs.fontList.close();
|
|
} else if (type === "size") {
|
|
this.$refs.fontAttribute.close();
|
|
this.$refs.fontColor.close();
|
|
this.$refs.fontAlign.close();
|
|
this.$refs.fontList.close();
|
|
} else if (type === "color") {
|
|
this.$refs.fontAttribute.close();
|
|
this.$refs.fontSize.close();
|
|
this.$refs.fontAlign.close();
|
|
this.$refs.fontList.close();
|
|
} else if (type === "align") {
|
|
this.$refs.fontAttribute.close();
|
|
this.$refs.fontSize.close();
|
|
this.$refs.fontColor.close();
|
|
this.$refs.fontList.close();
|
|
} else if(type === "list") {
|
|
this.$refs.fontAttribute.close();
|
|
this.$refs.fontSize.close();
|
|
this.$refs.fontColor.close();
|
|
this.$refs.fontAlign.close();
|
|
}
|
|
},
|
|
handleFontColorClick(flag) {
|
|
this.closeAllPopover("color");
|
|
},
|
|
handleFontListClick(flag) {
|
|
this.closeAllPopover("list")
|
|
},
|
|
handleFontAlignClick(flag) {
|
|
this.closeAllPopover("align")
|
|
},
|
|
handleFontSizeClick(flag) {
|
|
this.closeAllPopover("size")
|
|
},
|
|
handleFontAttributeClick(flag) {
|
|
this.closeAllPopover("attribute")
|
|
},
|
|
selectFontSizeItme(item) {
|
|
console.log(item);
|
|
this.formats.fontSize = item.value;
|
|
this.editorCtx.format("fontSize", item.value)
|
|
},
|
|
isColor(color) {
|
|
console.log(color, this.formats.color)
|
|
if (color === this.formats.color) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
async toSuccess() {
|
|
let that = this;
|
|
let index = uni.getStorageSync("selectIndex");
|
|
let cms = uni.getStorageSync("cms");
|
|
console.log(cms)
|
|
if (cms && cms.cmsLst && cms.cmsLst[index]) {
|
|
this.editorCtx.getContents({
|
|
success: async (res) => {
|
|
console.log(res);
|
|
let {
|
|
html,
|
|
text,
|
|
delta
|
|
} = res;
|
|
console.log(cms)
|
|
cms.cmsLst[index] = {
|
|
image: cms.cmsLst[index].image,
|
|
type: cms.cmsLst[index].type,
|
|
text: text,
|
|
html: html,
|
|
delta:delta,
|
|
}
|
|
await uni.setStorageSync("cms", cms);
|
|
await that.back();
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
},
|
|
complete: () => {
|
|
|
|
}
|
|
});
|
|
}
|
|
},
|
|
async back() {
|
|
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
fail: (err) => {
|
|
console.log('返回失败原因:', err),
|
|
uni.navigateTo({
|
|
url: "/pages2/editCms/editCms"
|
|
})
|
|
}
|
|
});
|
|
},
|
|
readOnlyChange() {
|
|
this.readOnly = !this.readOnly
|
|
},
|
|
onEditorReady() {
|
|
// #ifdef MP-BAIDU
|
|
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
|
this.editorCtx = res.context;
|
|
|
|
let cms = uni.getStorageSync("cms");
|
|
let index = uni.getStorageSync("selectIndex");
|
|
|
|
this.editorCtx.format("fontSize", this.formats.fontSize);
|
|
this.editorCtx.format("color", this.formats.color);
|
|
|
|
if (index && cms && cms.cmsLst[index]) {
|
|
let {
|
|
html,
|
|
text,
|
|
delta
|
|
} = cms.cmsLst[index];
|
|
|
|
this.editorCtx.setContents({
|
|
html: html,
|
|
delta: delta,
|
|
success: () => {
|
|
console.log("设置编辑器成功")
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
},
|
|
complete: () => {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
}).exec()
|
|
// #endif
|
|
|
|
let cms = uni.getStorageSync("cms");
|
|
let index = uni.getStorageSync("selectIndex");
|
|
|
|
|
|
},
|
|
undo() {
|
|
this.editorCtx.undo()
|
|
},
|
|
redo() {
|
|
this.editorCtx.redo()
|
|
},
|
|
format(e) {
|
|
let {
|
|
name,
|
|
value
|
|
} = e.target.dataset
|
|
if (!name) return
|
|
// console.log('format', name, value)
|
|
this.editorCtx.format(name, value)
|
|
},
|
|
onStatusChange(e) {
|
|
const formats = e.detail
|
|
this.formats = formats
|
|
},
|
|
insertDivider() {
|
|
this.editorCtx.insertDivider({
|
|
success: function() {
|
|
console.log('insert divider success')
|
|
}
|
|
})
|
|
},
|
|
clear() {
|
|
uni.showModal({
|
|
title: '清空编辑器',
|
|
content: '确定清空编辑器全部内容？',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
this.editorCtx.clear({
|
|
success: function(res) {
|
|
console.log("clear success")
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
removeFormat() {
|
|
this.editorCtx.removeFormat()
|
|
},
|
|
insertDate() {
|
|
const date = new Date()
|
|
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
|
this.editorCtx.insertText({
|
|
text: formatDate
|
|
})
|
|
},
|
|
insertImage() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
this.editorCtx.insertImage({
|
|
src: res.tempFilePaths[0],
|
|
alt: '图像',
|
|
success: function() {
|
|
console.log('insert image success')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./css/edit.css");
|
|
</style>
|