安装
CDN
<link rel="stylesheet" href="path/to/quill.core.css"/>
<link rel="stylesheet" href="path/to/quill.snow.css"/>
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
<script type="text/javascript" src="path/to/quill.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
Vue.use(window.VueQuillEditor)
</script>
NPM
npm install vue-quill-editor --save
使用
全局配置
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)
单个组件配置
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
使用方法
SSR
<template>
<!-- 双向数据绑定 -->
<div class="quill-editor"
v-model="content"
v-quill:myQuillEditor="editorOption">
</div>
<!-- 手动控制数据流 -->
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
v-quill:myQuillEditor="editorOption">
</div>
</template>
<script>
export default {
data() {
return {
content: '<p>example content</p>',
editorOption: { /* quill options */ }
}
},
mounted() {
console.log('this is current quill instance object', this.myQuillEditor)
},
methods: {
// 编辑器变化时触发
onEditorChange({quill,html,text}) {
console.log('onEditorChange',quill,html,text);
}
},
}
</script>
SPA
<template>
<!-- 双向数据绑定 -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 手动控制数据流 -->
<quill-editor :content="content"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
// you can also register quill modules in the component
import Quill from 'quill'
import { someModule } from '../yourModulePath/someQuillModule.js'
Quill.register('modules/someModule', someModule)
export default {
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
// some quill options
}
}
},
// 如果需要手动控制数据同步,父组件需要显式地处理changed事件
methods: {
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
onEditorReady(quill) {
console.log('editor ready!', quill)
},
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = html;
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted() {
console.log('this is current quill instance object', this.editor)
}
}
</script>
实际项目
效果图:
核心代码
html
<div class="Description">
<div class="part2" style="width: 100%;">
<div class="Text">异常描述</div>
<quill-editor
ref="myTextEditor"
v-model="descriptionPic"
:options="editorOption"
style="height:70%;margin-top: 5px;"
@change="onEditorChange($event)"
></quill-editor>
</div>
</div>
JavaScript
// 富文本编辑器内容改变
onEditorChange({ html }) {
console.log(html);
this.descriptionPic = html;
},
给此处的html放一张截图:
可以看到,文字会被保存为p标签,图片会以base64上传
前端显示获得的html
v-html
很简单,v-html可以完美的解决这一问题
模版:
<div class="ql-snow">
<div class="ql-editor" v-html="上文的html传在这里"></div>
</div>
上实例代码
<div class="part3 Content">
<div class="Text">保养内容</div>
<div
class="Info contentInfo"
v-for="(item, index) in content"
:key="index"
>
<div style="font-size:18px;font-weight:bold;">
<span style="font-size:15px;font-weight:bolder;color:#409eff;"
>|</span
>
{{ item.contentinfotitle }}
</div>
<div class="ql-snow">
<div class="ql-editor" v-html="item.contentinfotext"></div>
</div>
</div>
</div>
这里的item.contentinfotext就是上面的html
效果图: