Vue项目中使用富文本编辑器

北枳~

已于 2024-07-17 14:11:50 修改

阅读量3.7k

点赞数 1

文章标签： vue.js 前端 javascript

于 2021-10-28 15:44:24 首次发布

本文链接：https://blog.csdn.net/m0_59006402/article/details/121015669

版权

Vue.js Quill 富文本编辑器组件工具栏配置

关键词由CSDN通过智能技术生成

1.安装依赖

npm install vue-quill-editor --save

2.导入并使用

<template>
    <quillEditor></quillEditor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  }
}
</script>

3.关于 quill-edit的属性

 <quillEditor
          ref="myQuillEditor"
          v-model="content"    //文本框值
          :options="editorOption" //工具栏配置
          @blur="onEditorBlur($event)"//失去焦点事件
          @focus="onEditorFocus($event)"//获得焦点事件
          @ready="onEditorReady($event)"//加载富文本事件
          @change="onEditorChange($event)">//内容改变事件
</quillEditor>

使用时一般是这样的

 <quillEditor
          ref="myQuillEditor"
          v-model="content"    //文本框值
          :options="editorOption" //工具栏配置
</quillEditor>

4.最后我们会发现富文本编辑器功能很多

  data(){
   return{
    editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
}

}

const myQuillEditor. = ref()

myQuillEditor.value.setHTML('') 清空富文本

myQuillEditor.value.setHTML(后端返给的值) 回显