Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
12 浏览量
2020-10-16
13:18:59
上传
评论 1
收藏 53KB PDF 举报
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自富文本编辑器及插入图片自
定义定义
主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，具有一定的参考价
值，感兴趣的小伙伴们可以参考一下
本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，供大家参考，具体内容如下
1.安装
npm install vue-quill-editor --save
2.在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);
3. template
<div>
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
:action="serverUrl"
name="img"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload">
</el-upload>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
>
</quill-editor>
</div>
4.js
<script>
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image'],
['clean']
]
export default {
data() {
return {
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
content: null,
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
'image': function (value) {
资源评论
