完善未完成功能:修复关注列表/评论发布/编辑器草稿等页面
This commit is contained in:
+162
-252
@@ -14,8 +14,6 @@
|
||||
</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">
|
||||
@@ -59,285 +57,197 @@
|
||||
<view class="iconfont icon-fontsize"
|
||||
></view>
|
||||
</zb-popover>
|
||||
|
||||
<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>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
readOnly: false,
|
||||
formats: {
|
||||
|
||||
color: "#000000",
|
||||
// fontSize 36 48 64
|
||||
fontSize: "28px",
|
||||
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
text: "标准",
|
||||
value: "28px"
|
||||
},
|
||||
{
|
||||
text: '大',
|
||||
value: "32px"
|
||||
},
|
||||
{
|
||||
text: '超大',
|
||||
value: "36px"
|
||||
},
|
||||
],
|
||||
setup() {
|
||||
const readOnly = ref(false)
|
||||
const Popover1 = ref(null)
|
||||
const fontSize = ref(null)
|
||||
|
||||
const formats = reactive({
|
||||
color: "#000000",
|
||||
fontSize: "28px",
|
||||
})
|
||||
|
||||
const actions = [
|
||||
{ text: "标准", value: "28px" },
|
||||
{ text: '大', value: "32px" },
|
||||
{ text: '超大', value: "36px" },
|
||||
]
|
||||
|
||||
const editorCtx = ref(null)
|
||||
|
||||
function selectFontSizeItme(item) {
|
||||
formats.fontSize = item.value
|
||||
editorCtx.value.format("fontSize", item.value)
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
function handleFontSizeClick(flag) {
|
||||
Popover1.value?.close()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
selectFontSizeItme(item) {
|
||||
console.log(item);
|
||||
this.formats.fontSize = item.value;
|
||||
this.editorCtx.format("fontSize", item.value)
|
||||
},
|
||||
handleFontSizeClick(flag) {
|
||||
this.closeAllPopover("size")
|
||||
},
|
||||
isColor(color) {
|
||||
console.log(color, this.formats.color)
|
||||
if (color === this.formats.color) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async toSuccess() {
|
||||
let that = this;
|
||||
let cms = uni.getStorageSync("cms");
|
||||
console.log(cms)
|
||||
function isColor(color) {
|
||||
return color === formats.color
|
||||
}
|
||||
|
||||
async function toSuccess() {
|
||||
let cms = uni.getStorageSync("cms")
|
||||
if (cms) {
|
||||
this.editorCtx.getContents({
|
||||
editorCtx.value.getContents({
|
||||
success: async (res) => {
|
||||
console.log(res);
|
||||
let {
|
||||
html,
|
||||
text,
|
||||
delta
|
||||
} = res;
|
||||
console.log(cms)
|
||||
|
||||
cms.title = text;
|
||||
cms.title_delta = delta;
|
||||
cms.title_html = html;
|
||||
console.log(cms)
|
||||
await uni.setStorageSync("cms", cms);
|
||||
await that.back();
|
||||
let { html, text, delta } = res
|
||||
cms.title = text
|
||||
cms.title_delta = delta
|
||||
cms.title_html = html
|
||||
await uni.setStorageSync("cms", cms)
|
||||
await back()
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
},
|
||||
complete: () => {
|
||||
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
async back() {
|
||||
}
|
||||
|
||||
async function back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
uni.navigateTo({
|
||||
url: "/pages2/editCms/editCms"
|
||||
})
|
||||
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 {
|
||||
html,
|
||||
text,
|
||||
delta
|
||||
} = {
|
||||
html: cms.title_html,
|
||||
title: cms.title,
|
||||
delta: cms.title_delta
|
||||
};
|
||||
|
||||
this.editorCtx.setContents({
|
||||
html:html,
|
||||
delta: delta,
|
||||
success: () => {
|
||||
|
||||
this.editorCtx.format("fontSize", this.formats.fontSize)
|
||||
this.editorCtx.format("color", this.formats.color)
|
||||
console.log("设置编辑器成功")
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
},
|
||||
complete: () => {
|
||||
|
||||
}
|
||||
})
|
||||
}).exec()
|
||||
// #endif
|
||||
},
|
||||
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')
|
||||
})
|
||||
}
|
||||
|
||||
function readOnlyChange() {
|
||||
readOnly.value = !readOnly.value
|
||||
}
|
||||
|
||||
function onEditorReady() {
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
||||
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||
editorCtx.value = res.context
|
||||
let cms = uni.getStorageSync("cms")
|
||||
let { html, title, delta } = {
|
||||
html: cms.title_html,
|
||||
title: cms.title,
|
||||
delta: cms.title_delta
|
||||
}
|
||||
editorCtx.value.setContents({
|
||||
html: html,
|
||||
delta: delta,
|
||||
success: () => {
|
||||
editorCtx.value.format("fontSize", formats.fontSize)
|
||||
editorCtx.value.format("color", formats.color)
|
||||
console.log("设置编辑器成功")
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
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: '图像',
|
||||
}).exec()
|
||||
// #endif
|
||||
}
|
||||
|
||||
function undo() {
|
||||
editorCtx.value.undo()
|
||||
}
|
||||
|
||||
function redo() {
|
||||
editorCtx.value.redo()
|
||||
}
|
||||
|
||||
function format(e) {
|
||||
let { name, value } = e.target.dataset
|
||||
if (!name) return
|
||||
editorCtx.value.format(name, value)
|
||||
}
|
||||
|
||||
function onStatusChange(e) {
|
||||
const formatData = e.detail
|
||||
Object.assign(formats, formatData)
|
||||
}
|
||||
|
||||
function clear() {
|
||||
uni.showModal({
|
||||
title: '清空编辑器',
|
||||
content: '确定清空编辑器全部内容？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
editorCtx.value.clear({
|
||||
success: function() {
|
||||
console.log('insert image success')
|
||||
console.log("clear success")
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function removeFormat() {
|
||||
editorCtx.value.removeFormat()
|
||||
}
|
||||
|
||||
function insertDate() {
|
||||
const date = new Date()
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||
editorCtx.value.insertText({ text: formatDate })
|
||||
}
|
||||
|
||||
function insertImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
editorCtx.value.insertImage({
|
||||
src: res.tempFilePaths[0],
|
||||
alt: '图像',
|
||||
success: function() {
|
||||
console.log('insert image success')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function insertDivider() {
|
||||
editorCtx.value.insertDivider({
|
||||
success: function() {
|
||||
console.log('insert divider success')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
readOnly,
|
||||
Popover1,
|
||||
fontSize,
|
||||
formats,
|
||||
actions,
|
||||
selectFontSizeItme,
|
||||
handleFontSizeClick,
|
||||
isColor,
|
||||
toSuccess,
|
||||
back,
|
||||
readOnlyChange,
|
||||
onEditorReady,
|
||||
undo,
|
||||
redo,
|
||||
format,
|
||||
onStatusChange,
|
||||
clear,
|
||||
removeFormat,
|
||||
insertDate,
|
||||
insertImage,
|
||||
insertDivider
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user