<template>
<view class="sky-editor">
<view class="sky-editor-tools">
<view class="icon_box" :class="{active: showBold}" @click="handleBold" v-if="tools.includes('bold')">
<text class="iconfont icon-zitijiacu"></text>
</view>
<view class="icon_box" :class="{active: showHeader}" @click="handleHeader" v-if="tools.includes('header')"><text
class="iconfont icon-zitibiaoti"></text></view>
<view class="icon_box" :class="{active: showItalic}" @click="handleItalic" v-if="tools.includes('italic')"><text
class="iconfont icon-italic"></text></view>
<view class="icon_box" @click="handleIns" v-if="tools.includes('ins')"><text
class="iconfont icon-fengexian"></text></view>
<view class="icon_box" :class="{active: showUnderline}" @click="handleUnderline"
v-if="tools.includes('underline')"><text class="iconfont icon-zitixiahuaxian"></text>
</view>
<view class="icon_box" :class="{active: showAlignLeft}" v-if="tools.includes('align')"><text
class="iconfont icon-zuoduiqi"></text></view>
<view class="icon_box" :class="{active: showAlignCenter}" v-if="tools.includes('align')"><text
class="iconfont icon-juzhong"></text></view>
<view class="icon_box" :class="{active: showAlignRight}" v-if="tools.includes('align')"><text
class="iconfont icon-youduiqi"></text></view>
<view class="icon_box" v-if="tools.includes('image')"><text class="iconfont icon-charutupian"></text></view>
<view class="icon_box" v-if="tools.includes('undo')"><text class="iconfont icon-chehuisekuai"></text></view>
<view class="icon_box" v-if="tools.includes('redo')"><text class="iconfont icon-huifu"></text></view>
<view class="icon_box"><text class="iconfont icon-queding_queren"></text></view>
</view>
<view class="sky-editor-content">
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar show-img-resize
@ready="onEditorReady" @input="getContent" @statuschange="onStatuschange"></editor>
</view>
</view>
</template>
<script>
export default {
name: 'sky-editor',
props: {
tools: {
type: String, // bold 加粗 italic 斜体 ins 分割线 underline 下划线 header 标题 undo 撤销 redo 恢复
default: 'bold,italic,ins,underline,strike,header,undo,redo,image,align'
}
},
data() {
return {
editorCtx: null,
showBold: false,
showHeader: false,
showItalic: false,
showUnderline: false,
showAlignLeft: false,
showAlignCenter: false,
showAlignRight: false,
backups: {}
};
},
methods: {
onEditorReady() {
uni
.createSelectorQuery()
.in(this)
.select('#editor')
.fields({
size: true,
context: true
},
res => {
this.editorCtx = res.context;
}
)
.exec();
},
onStatuschange(e) {
const detail = e.detail;
this.checkStatus(detail, 'bold', 'showBold')
this.checkStatus(detail, 'header', 'showHeader')
this.checkStatus(detail, 'italic', 'showItalic')
this.checkStatus(detail, 'underline', 'showUnderline')
console.log(detail)
},
getContent(e) {
let obj = {
html: e.detail.html, // 富文本内容
text: e.detail.text, // 纯文字内容
}
this.backups = obj
this.$emit('change', obj)
},
handleBold() {
this.showBold = !this.showBold
this.editorCtx.format('bold')
},
handleHeader() {
this.showHeader = !this.showHeader
this.editorCtx.format('header', this.showHeader ? 'H2' : false)
},
handleItalic() {
this.showItalic = !this.showItalic
this.editorCtx.format('italic')
},
handleIns() {
this.editorCtx.insertDivider()
},
handleUnderline() {
this.showUnderline = !this.showUnderline
this.editorCtx.format('underline')
},
checkStatus(detail, name, obj) {
if (detail.hasOwnProperty(name)) {
this[obj] = true;
} else {
this[obj] = false;
}
},
}
};
</script>
<style lang="scss">
@import './iconfont.css';
.sky-editor {
display: flex;
flex-direction: column;
height: 100%;
background-color: #ffffff;
.sky-editor-tools {
display: flex;
align-items: center;
flex-wrap: wrap;
.icon_box {
display: flex;
align-items: center;
justify-content: center;
width: 100rpx;
height: 100rpx;
&.active {
.iconfont {
color: #409EFF;
}
}
.iconfont {
font-size: 50rpx;
color: #333333;
}
}
}
.sky-editor-content {
flex: 1;
.ql-container {
height: 100%;
padding: 0 20rpx;
font-size: 32rpx;
color: #333333;
}
}
}
</style>
- 发布:2023-06-28 23:18
- 更新:2023-07-04 19:19
- 阅读:235
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10 21H2
HBuilderX类型: 正式
HBuilderX版本号: 3.8.4
浏览器平台: Chrome
浏览器版本: 114.0.5735.134
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接复制上面代码运行即可
直接复制上面代码运行即可
预期结果:
加粗,斜体等功能正常使用
加粗,斜体等功能正常使用
实际结果:
加粗,斜体可以实现,但是无法取消
加粗,斜体可以实现,但是无法取消
bug描述:
editor组件在H5环境下,editorContext.format在加粗的情况下,再次调用无法取消加粗,其他不需要传value的也是一样的情况。
在小程序环境就可以正常使用
blueSky235 (作者)
今天更新到 3.8.7.20230703 版本就没有问题了
2023-07-04 20:34