iView + vue-quill-editor 实现一个富文本编辑器(包含图片,视频上传)

时间:2021-10-02 15:31:30

1. 引入插件(注意IE10以下不支持)

npm install vue-quill-editor --save
npm install quill --save (Vue-Quill-Editor需要依赖)

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.页面使用

import { quillEditor } from 'vue-quill-editor'
<div v-show="tuWen" class="tu-wen">
<Upload
id="iviewUp"
:show-upload-list="false" // 自动上传列表可见
:on-success="handleSuccessQuill"
:format="['jpg','jpeg','png','gif']"
:headers= "header" // 设置请求头
name="richTextAccessory"
:max-size="2048"
multiple
:action="uploadRichTextImg" // 上传接口
style="display:none;"
>
<Button icon="ios-cloud-upload-outline" ></Button>
</Upload>
<quill-editor
v-model="content" // 内容
ref="myQuillEditor" // 获取文本节点
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</div>

4,工具栏配置

// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline'],
[{'size': ['small', false, 'large', 'huge']}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['image'], // remove formatting button
] data(){
  uploadRichTextImg: ‘’   //上传图片地址接口

  uploadList:[], //富文本编辑器的图文列表
  content: '',//富文本里的内容
editorOption: {//富文本编辑器的工具栏
modules: {
toolbar:{
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) { // 对图片进行改造,默认是通过base64 ,现通过iview 去传。
if (value) {
document.querySelector('#iviewUp input').click()
} else {
this.quill.format('image', false);
}
}
}
},
},
imageResize: {}, //自定义拉伸
placeholder: '请输入文章内容',
},
contentTxt: '',//富文本编辑器里的前面100个文字
}

methods:{
   onEditorChange(e){

      let _this = this;
      _this.content = e.html ;  //标签以<p></p> 形式渲染 (重点)
_this.contentTxt = e.text.substr(0,100);
   }
}

5.  在上传成功回调中把src 的url 插入

 // 富文本编辑器的上传图片成功的操作
handleSuccessQuill (res) {
console.log(res)
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', res.data.path)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
Message.error('图片插入失败')
}
},