Vue-Quill-Editor一个vue的富文本编辑器的使用

刺骨的言语ヽ痛彻心扉 2023-06-17 12:55 1阅读 0赞

最近需要做内容的编辑和上传，所以需要用到富文本编辑器。刚开始引用的百度的富文本，发现虽然功能比较多，但是还得跟后台配合，而且样式什么的也比较麻烦，所以还是用了vue-quill-editor这个编辑器，比较简单。

### 1 安装 ###

npm install vue-quill-editor --save

### 2 引入 ###

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
      }
    }

### 3 使用 ###

<quill-editor 
        v-model="content"
        ref="myQuillEditor"
        :options="quillOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)">
      </quill-editor>
    
    <script>
    const toolOptions = [
        ['bold', 'italic', 'underline', 'strike'], 
        ['blockquote', 'code-block'], 
        [{'header': 1}, {'header': 2}], 
        [{'list': 'ordered'}, {'list': 'bullet'}],  
        [{'script': 'sub'}, {'script': 'super'}],  
        [{'clean':'源码编辑'}], 
        ['link', 'image', 'video'], 
        ['sourceEditor']     //新添加的工具 
    ]; 
    export default {
        data () {
          return {
            content: '<h2>I am Example</h2>',
            editorOption: {
                placeholder: "请在这里输入",
                    modules:{
                        toolbar: {
                            container: toolOptions,  // 工具栏选项
                            handlers: {  // 事件重写
                               image:value=>{
                                   if (value) {
                                        _this.centerDialogVisible=true;
                                    } else {}
                               }
                            } 
                        }
                }
            }
          }
        },
        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
          }
        }
      }
    </script>

这里的toolOptions是把编辑器的样式按照需要的重新引入了一下。又用了一个事件重写的事件，还是比较全的。