Vue 轻量级富文本编辑器-Vue-Quill-Editor

最新推荐文章于 2024-08-14 16:04:40 发布

猕猴桃-HR

最新推荐文章于 2024-08-14 16:04:40 发布

阅读量579

点赞数

分类专栏： Java vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_45677987/article/details/121209804

版权

vue 同时被 2 个专栏收录

105 篇文章 2 订阅

订阅专栏

Java

1 篇文章 0 订阅

订阅专栏

本文档介绍了如何在Vue项目中集成Vue-Quill-Editor富文本编辑器，包括下载安装步骤和组件使用方法。通过示例代码展示了如何在模板中引入编辑器，以及监听编辑器的焦点、失去焦点和内容变化等事件。同时，还导入了必要的CSS样式文件以确保编辑器的显示效果。

摘要由CSDN通过智能技术生成

1: 下载 Vue-Quill-Editor 富文本编辑器
   
2: 下载:  npm install vue-quill-editor --save

3: 下载quill（Vue-Quill-Editor需要依赖） (依赖)

   代码:
     <template>
       <div class="edit_container">
          <quill-ediyer
            v-model="content"
            ref="myQuillEdited"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editer>
       </div>
     </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 {
         component: {
            quillEditor,
         },

         methods: {
           onEditorReady(editor) {}  // 准备编辑器
          
           onEditorBlur(){},     // 失去焦点事件
           onEditorFocus(){},    // 获得焦点事件
           onEditorChange(){},   // 内容改变事件
            
         },

         computed: {
            editor: {
               return this.$refs.myQuillEditor.quill;
            }
         }
       }
     </script>