// html代码
<view v-model="content" class="kindeditor-component" style="width: 625px; height: 302px;">
<view id="editor">
</view>
</view>
// 引入
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
data(){
return {
content: '',
// 富文本配置
quillEditor: null,
quillEditorToolbarOptions: [
{ 'size': ['small', false, 'large', 'huge'] },
'bold', 'italic', 'underline',
{
'align': ''
},
{
'align': 'center'
},
{
'align': 'right'
},
{
'list': 'ordered'
},
{
'list': 'bullet'
},
'clean'
// 'image'
],
}
}
mounted() {
// 确保获取到id="editor"
this.$nextTick(()=> {
setTimeout(()=> {
if(document.getElementById('editor')) {
this.quillEditorHandle();
}
})
})
},
methods: {
quillEditorHandle() {
this.quillEditor = new Quill('#editor', {
modules: {
toolbar: this.quillEditorToolbarOptions
},
theme: 'snow'
})
// 需要上传图片时,可以写一个图片上传,通过富文本框中的图片按钮引用
// this.quillEditor.getModule('toolbar').addHandler('image', () => {
// this.$refs.uploadBtn.$el.click()
// })
// 监听内容变化,动态赋值
this.quillEditor.on('text-change', () => {
this.form.content = this.quillEditor.root.innerHTML
})
this.quillEditor.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
delta.ops = delta.ops.map(op => {
return {
insert: op.insert
}
})
return delta
})
},
// 详情接口-富文本回显
detail(){
this.quillEditor.root.innerHTML = 接口返回的富文本内容
this.quillEditor.on('text-change', () => {
this.form.content = this.quillEditor.root.innerHTML //等号前面是页面需要渲染的变量
})
}
}
// css代码
// 富文本
// 字体设置 - 字体设置只有添加如下几行css代码,才能正常使用
/deep/{
.ql-snow .ql-picker.ql-size {
position: absolute;
left: 根据需要设置;
}
}
/deep/.ql-stroke{
color: #000;
}
/deep/ svg {
width: 16px;
color: #000000;
}
/deep/ .ql-bold,
/deep/ .ql-italic,
/deep/ .ql-underline,
/deep/ .ql-align,
/deep/ .ql-list{
border: 1px solid #fff;
background-color: transparent;
font-size: 0;
line-height: 0;
overflow: hidden;
cursor: pointer;
border-right: 1px solid #a0a0a0;
}
/deep/ .ql-list:last-child{
border-right: none;
}
/deep/ .ql-toolbar{
padding: 0;
height: 30px;
}
/deep/ .ql-formats{
height: 20px;
line-height: 20px;
margin-top: -18px;
}
/deep/.ql-snow {
border: none;
}
/deep/.ql-toolbar{
border-bottom: 1px solid #ccc;
height: 27px;
padding: 2px 5px !important;
overflow: hidden;
}
/deep/.ql-snow{
padding: 10px 10px 37px 10px;
}
/deep/ #editor p{
line-height: normal;
white-space: normal;
font-size: 14px;
}
/deep/ #editor .ql-editor ul{
line-height: normal;
}
/deep/ #editor .ql-editor ol{
line-height: normal;
}
/deep/ .ql-clean{
border: none;
background: #fff;
border-right: 1px solid #a0a0a0;
}
.kindeditor-component{
width: 625px;
height: 302px;
border: 1px solid #ccc;
box-sizing: border-box;
}
文本形式回显富文本框中的内容:
<view v-html="content"></view>
data() {
return {
content: ''
};
},
detail(){
// 接口中获取富文本内容
preachReview.detailReview().then(res=>{
if(res.code == 0){
this.form.content = res.data.mdText
}
})
},
<style scoped lang="scss">
// 设置富文本字体大小,确保 'size': ['small', false, 'large', 'huge']在回显时起作用
// 在富文本内回显时,不用设置以下样式,因为富文本组件已经做了该操作
/deep/.ql-size-small{
font-size: 0.75em;
}
/deep/.ql-size-large{
font-size: 1.5em;
}
/deep/.ql-size-huge{
font-size: 2.5em;
}
</style>