vue-quill-editor 的使用

作用

基于vue开发的富文本

安装：

1、cnpm install vue-quill-editor -S

//安装样式
2、cnpm install quill -S

引入

//在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
       <quill-editor v-model="content"
                        ref="myQuillEditor"
                        :options="editorOption">
         </quill-editor>
          
      
   //data 
    content: ``,//富文本内容
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ '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': [] }],
            ['image',]//去除video即可
          ],
        },
        placeholder: '内容编辑...'
      },//富文本编辑器的规则
      

预览查看

  <div class="ql-snow">
        <div class="ql-editor"
             v-html="content"></div>
      </div>
      //查看的时候需要添加样式如上