精华内容
下载资源
问答
  • 最近在开发项目中用到了富文本编辑器,在使用的过程中感觉还可以,就想写篇分享给以后可能需要的朋,如果有错欢迎大家指出! vue-quill-editor 基于 Quill、适用于 Vue富文本编辑器,支持服务端渲染和单页应用,...

    最近在开发项目中用到了富文本编辑器,在使用的过程中感觉还可以,就想写篇分享给以后可能需要的朋,如果有错欢迎大家指出!

    vue-quill-editor 基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。

    基础用法

    1、npm 导入 vue-quill-editor

    npm install vue-quill-editor --save
    

    2、引入 vue-quill-editor

    在全局中引入

    import Vue from 'vue'
    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, /* { 默认全局 } */)
    

    在指定的 vue 文件中引入

    // 引入样式
    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、在 vue 中使用

    <template>
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" 
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    content: `<p>这是 vue-quill-editor 的内容!</p>`, //双向数据绑定数据
                    editorOption: {}, //编辑器配置项
                }
            },
            methods: {
                onEditorBlur() {}, // 失去焦点触发事件
                onEditorFocus() {}, // 获得焦点触发事件
                onEditorChange() {}, // 内容改变触发事件
            }
        }
    </script>
    

    到这里一个默认的富文本编辑器已经导入使用了,如下图所视!

    升级用法

    一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配置项进行配置。

     editorOption: {
           modules:{
             toolbar: [
                 ['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
                 ['blockquote', 'code-block'], //引用,代码块
                 [{'header': 1}, {'header': 2}], // 标题,键值对的形式;1、2表示字体大小
                 [{'list': 'ordered'}, {'list': 'bullet'}], //列表
                 [{'script': 'sub'}, {'script': 'super'}], // 上下标
                 [{'indent': '-1'}, {'indent': '+1'}], // 缩进
                 [{'direction': 'rtl'}], // 文本方向
                 [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                 [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
                 [{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
                 [{'font': []}], //字体
                 [{'align': []}], //对齐方式
                 ['clean'], //清除字体样式
                 ['image', 'video'] //上传图片、上传视频
                ]
             },
             placeholder: "输入内容..."
         }, //编辑器配置项
    

    可以根据自己的实际需求,保留相应的工具栏。

    图片上传

    vue-quill-editor 默认的是以 base64 保存图片,会直接把图片 base64 和内容文本一起以字符串的形式提交到后端。这样小图片还行,如果要上传大图片会提示上传失败,优秀的前端打字员显然不会这样做。

    思路

    • 可以先将图片上传至服务器,再将图片链接插入到富文本中显示
    • 图片上传可以自定义一个组件或者使用 iview 的上传图片的组件(我在项目中使用的是自定义的组件,这里演示使用 iview 组件上传)
    • 上传图片的组件需要隐藏,点击图片上传时调用 iview 的图片上传,上传成功后返回图片链接。
    1. 在编辑器项中配置配置项
    editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            'image': function(value) {
                                if (value) {
                                    alert('点击了上传图片')
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                    placeholder: "输入内容..."
                }, //编辑器配置项
            },
    
    1. 调用 iview 的上传组件。
    html
    <Upload
        :show-upload-list="false"
        :on-success="handleSuccess"
        :format="['jpg','jpeg','png','gif']"
        :max-size="2048"
        multiple
        action="/file/upload"
        >
    </Upload>
    <quill-editor
        v-model="content"
        :options="editorOption"
        ref="quillEditor">
    </quill-editor>
    
    css
    .ivu-upload {
        display: none;
    }
    
    js
    data () {
        return {
            content: '',
            editorOption: {                
                modules: {
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    // 调用iview图片上传
                                    document.querySelector('.ivu-upload .ivu-btn').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    methods: {
        handleSuccess (res) {
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上传成功返回图片URL
            if (res) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片,res为服务器返回的图片链接地址
                quill.insertEmbed(length, 'image', res)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                // 提示信息,需引入Message
                Message.error('图片插入失败')
            }
        },
    } 
    

    这样就完成了图片上传的功能。

    调整图片大小

    正常情况下上传图片到编辑器中应该是可以调整图片大小的,所以我们导入 quill-image-resize-module 模块用来调整图片大小。

    1. npm 下载包
    npm install quill-image-resize-module --save
    
    1. 在文件中导入包
    import Quill from 'quill' 
    import ImageResize from 'quill-image-resize-module' 
    Quill.register('modules/imageResize', ImageResize)  
    
    1. 在原本的配置项上添加
    toolbar: {
                container: toolbarOptions, // 工具栏
                imageResize: { //添加
                    displayStyles: { //添加
                        backgroundColor: 'black',
                        border: 'none',
                        color: 'white'
                    },
                    modules: ['Resize', 'DisplaySize', 'Toolbar'] //添加
                },
                handlers: {
                    'image': function(value) {
                        if (value) {
                            // 调用iview图片上传 
                            document.querySelector('.ivu-upload .ivu-btn').click()
                        } else {
                            this.quill.format('image', false);
                        }
                    }
                }
            }
    
    1. 在项目文件 vue.config.js 加上配置。(这一步很重要,如果不配置会报错!)
    const webpack = require('webpack'); //导入 webpack 模块
    
    //在模块中加入
    configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    'window.Quill': 'quill/dist/quill.js',
                    'Quill': 'quill/dist/quill.js'
                })
           ],
       },
    

    这样就导入完成了,如下图所示

    遇到的坑

    在编辑器中敲入连续空格,无法在回显中显示。

    在富文本编辑器中,我们经常会遇到段落开都空两格的需求,如下图所一样


    编辑器默认的在绑定的html回显中没有识别空格键,我们需要在 vue 绑定的 v-html 中添加 class="ql-editor"

    <div class="ql-editor" v-html="content"></div>   //在绑定数据的标签加上 class="ql-editor"  
    

    显示空格正常

    附全部代码

    <template>
        <Upload :show-upload-list="false" 
        :on-success="handleSuccess" 
        :format="['jpg','jpeg','png','gif']" :max-size="2048"
        multiple 
        action="/file/upload">
        </Upload>
        <quill-editor 
        v-model="content" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
        </quill-editor>
    </template>
    
    <script>
        // 引入样式
        import 'quill/dist/quill.core.css'
        import 'quill/dist/quill.snow.css'
        import 'quill/dist/quill.bubble.css'
        import Quill from 'quill'
        import { quillEditor } from 'vue-quill-editor'
        import ImageResize from 'quill-image-resize-module'
        Quill.register('modules/imageResize', ImageResize)
    
        const toolbarOptions: [
            ['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
            ['blockquote', 'code-block'], //引用,代码块
            [{'header': 1}, {'header': 2}], // 标题,键值对的形式;1、2表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}], //列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': '-1'}, {'indent': '+1'}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
            [{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
            [{'font': []}], //字体
            [{'align': []}], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'] //上传图片、上传视频
        ]
        export default {
            data() {
                return {
                    content: `<p>这是 vue-quill-editor 的内容!</p>`, //双向数据绑定数据
                    editorOption: {
                        modules: {
                            toolbar: {
                                container: toolbarOptions, // 工具栏
                                imageResize: { //添加
                                    displayStyles: { //添加
                                        backgroundColor: 'black',
                                        border: 'none',
                                        color: 'white'
                                    },
                                    modules: ['Resize', 'DisplaySize', 'Toolbar'] //添加
                                },
                                handlers: {
                                    'image': function(value) {
                                        if (value) {
                                            // 调用iview图片上传 
                                            document.querySelector('.ivu-upload .ivu-btn').click()
                                        } else {
                                            this.quill.format('image', false);
                                        }
                                    }
                                }
                            }
                            placeholder: "输入内容..."
                        }, //编辑器配置项
                    },
                }
            },
            components: {
                quillEditor
            },
            methods: {
                onEditorBlur() {}, // 失去焦点触发事件
                onEditorFocus() {}, // 获得焦点触发事件
                onEditorChange() {}, // 内容改变触发事件
    
                handleSuccess(res) {
                    // 获取富文本组件实例
                    let quill = this.$refs.myQuillEditor.quill
                    // 如果上传成功返回图片URL
                    if (res) {
                        // 获取光标所在位置
                        let length = quill.getSelection().index;
                        // 插入图片,res为服务器返回的图片链接地址
                        quill.insertEmbed(length, 'image', res)
                        // 调整光标到最后
                        quill.setSelection(length + 1)
                    } else {
                        // 提示信息,需引入Message
                        Message.error('图片插入失败')
                    }
                },
            },
        }
    </script>
    <style>
        .ivu-upload {
            display: none;
        }
    </style>
    
    展开全文
  • 2、封装富文本组件 <template lang="html"> <div class="editor"> <!-- <div ref="toolbar" class="toolbar"></div> --> <div ref="editor" class="text"></div

    1、下载插件

    npm i wangeditor --save
    插件官网地址:https://www.wangeditor.com/

    2、封装富文本组件

    <template lang="html">
      <div class="editor">
        <!-- <div ref="toolbar" class="toolbar"></div> -->
        <div ref="editor" class="text"></div>
      </div>
    </template>
    
    <script>
      import E from 'wangeditor'
      export default {
        name: 'editoritem',
        data() {
          return {
            // uploadPath,
            editor: null,
            info_: null
          }
        },
        model: {
          prop: 'value',
          event: 'change'
        },
        props: {
          value: {
            type: String,
            default: ''
          },
          isClear: {
            type: Boolean,
            default: false
          }
        },
        watch: {
          isClear(val) {
            // 触发清除文本域内容
            if (val) {
              this.editor.txt.clear()
              this.info_ = null
            }
          },
          value: function(value) {
            if (value !== this.editor.txt.html()) {
              this.editor.txt.html(this.value)
            }
          }
          //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
        },
        mounted() {
          this.seteditor()
        },
        beforeDestroy() {
          // 调用销毁 API 对当前编辑器实例进行销毁
          this.editor.destroy()
          this.editor = null
        },
        methods: {
          seteditor() {
            this.editor = new E( this.$refs.editor)
            // this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config;
            // 配置 server 上传图片接口地址
            // this.editor.config.uploadImgServer = '/upload-img'
            this.editor.config.onchange = (html) => {
              this.info_ = html // 绑定当前值
              this.$emit('change', this.info_) // 将内容同步到父组件中
            }
    
    
            // 自定义 alert
            this.editor.config.customAlert = function (s, t) {
              switch (t) {
                case 'success':
                  this.$Message.success(s)
                  break
                case 'info':
                  this.$Message.info(s)
                  break
                case 'warning':
                  this.$Message.warning(s)
                  break
                case 'error':
                  this.$Message.error(s)
                  break
                default:
                  this.$Message.info(s)
                  break
              }
            }
            // 配置全屏功能按钮是否展示
           this.editor.config.showFullScreen = false
    
            // 创建富文本编辑器
            this.editor.create()
            this.editor.txt.html(this.value) // 重新设置编辑器内容
          }
        }
      }
    </script>
    <style lang="scss">
      .editor {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 0;
      }
      .toolbar {
        border: 1px solid #ccc;
      }
      .text {
        border: 1px solid #ccc;
         min-height: 200px;
        .w-e-text-container{
          height: 200px!important;
        }
        .w-e-text{
          min-height: 200px;
        }
      }
    </style>
    

    3、使用组件

    <template>
      <div>
        <wangEnduit
          v-model="Content"
          :isClear="isClear"
          @change="change"
          :value="Content"
        />
      </div>
    </template>
    
    <script>
    export default {
      components: {
        wangEnduit: () => import('@/components/wangEnduit/index'),
      },
      data(){
        return{
          Content:"",
          isClear: false,
        }
      },
      methods:{
          change(val) {
          console.log('val',val)
        },
      }
    }
    </script>
    
    <style>
    
    </style>
    
    展开全文
  • 主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue富文本编辑器:集成了网上集中富文本编辑器
  • 1.富文本编辑器插件安装 npm install vue-quill-editor 2.安装依赖quill npm install quill --save 3.配置文件 需要引入三个css文件 import ‘quill/dist/quill.core.css’ import 'quill/dist/quill.snow.css' ...
    1.富文本编辑器插件安装
    npm install vue-quill-editor
    2.安装依赖quill
    npm install quill --save
    3.配置文件
    需要引入三个css文件
    import ‘quill/dist/quill.core.css’
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    4.引入文本编辑器
    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
    Vue.use(VueQuillEditor)
    使用方式
    <div class="edit">
    <quill-editor
    v-model="content
    ref="quillEditor"
    :options="editorOption"
    @blur="onEditorBlur"
    @focus="onEditorFocus"
    @change="onEditorChange">
    </quill-editor>
    </div>
    <script>
    onEditorFocus(val,editor){
    //val 获得焦点时的内容
    editor.enable(false);//禁用
    }
    data(){
    return{
    content:'',
    editorOption:{
    theme:'snow',
    placeholder:'文本框显示的内容'
    module:{
     toolbar:[
                  ['bold', 'italic', 'underline', 'strike'],    //加粗,斜体,下划线,删除线
                  ['blockquote', 'code-block'],     //引用,代码块
      
      
                  [{ 'header': 1 }, { 'header': 2 }],        // 标题,键值对的形式;1、2表示字体大小
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                  [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                  [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                  [{ 'direction': 'rtl' }],             // 文本方向
      
      
                  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
      
      
                  [{ 'color': [] }, { 'background': [] }],     // 字体颜色,字体背景颜色
                  [{ 'font': [] }],     //字体
                  [{ 'align': [] }],    //对齐方式
      
      
                  ['clean'],    //清除字体样式
                  ['image','video']    //上传图片、上传视频
      
                ]
    }
    }
    }
    }
    </script>
    图片拖拽上传
    import { quillEditor } from 'vue-quill-editor'
    import * as Quill from 'quill' //引入编辑器
    import { ImageDrop } from 'quill-image-drop-module';
    Quill.register('modules/imageDrop', ImageDrop);
    export default {
      name: 'App',
      data(){ 
         return{
            editorOption:{
              modules:{
                imageDrop:true, 
              },
              theme:'snow'
            }
          }
      }
    
    展开全文
  • vue富文本编辑器

    2021-01-11 22:43:21
    vue富文本编辑器 Vue-Quill-Editor 主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。 wangEditor(国产,...

    vue富文本编辑器

    Vue-Quill-Editor

    主流富文本编辑器对比

    前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。

    1. wangEditor(国产,基于javascript和css开发的web富文本编辑器,开源免费)优势:轻量简介,最重要的是开源且中文文档齐全。缺点:更新不及时。没有强大的开发团队支撑。

    2. UEditor(百度)优势:插件多,基本曼度各种需求,由百度web前端研发部开发。缺点:插件提交较大,网页加载速度相对就慢了些。使用复杂。属于前后端不分离插件。在使用时需要配置后端的一些东西,使用不便。

    1. Kindeditor () 优势:文档齐全,为中文,阅读方便。缺点:图片上传存在问题,上传历史过多,会全部加载,导致浏览器卡顿。

    2. 补充:Tinymce也是一款不错的富文本编辑器,种植,各有优势和劣势,关键是选择一款最适合的就好。因为笔者在开发vue,所以直接使用vue-quill-editor较为方便些。具体看情况使用。

    vue-quill-editor基本配置

    npm install vue-quill-editor -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.use(VueQuillEditor);

    使用

     需要注意的是toolbar的配置

     

      1. 只需要填写功能名的    

     加粗 - bold;
    
         斜体 - italic
    
         下划线 - underline
    
         删除线 - strike
    
         引用- blockquote
    
         代码块 - code-block
    
         公式 - formula
    
         图片 - image
    
         视频 - video
    
         清除字体样式- clean
    
         这一类的引用 直接['name','name']这种格式就好了

      2. 需要有默认值的

     标题 - header 
    
      [{ 'header': 1 }, { 'header': 2 }] 值字体大小
     
      列表 - list
      [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered,bullet
     
      上标/下标 - script
      [{ 'script': 'sub'}, { 'script': 'super' }],  值sub,super
     
      缩进 - indent
      [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1,+1等
     
      文本方向 - direction
      [{'direction':'rtl'}]

    结构 

    <template>
          <quill-editor class="editor"
                        ref="myTextEditor"
                        v-model="content"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)"
                        @change="onEditorChange($event)">
          </quill-editor>
      </template>
      <script>
          export default {
            data () {
              return {
                content: null,
                editorOption: {
                  modules: {
                    toolbar: [
                      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                      ["blockquote", "code-block"], // 引用  代码块
                      [{ header: 1 }, { header: 2 }], // 1、2 级标题
                      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                      [{ script: "sub" }, { script: "super" }], // 上标/下标
                      [{ indent: "-1" }, { indent: "+1" }], // 缩进
                      // [{'direction': 'rtl'}],                         // 文本方向
                      [{ size: ["small", false, "large", "huge"] }], // 字体大小
                      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                      [{ font: [] }], // 字体种类
                      [{ align: [] }], // 对齐方式
                      ["clean"], // 清除文本格式
                      ["link", "image", "video"] // 链接、图片、视频
                    ], //工具菜单栏配置
                  },
                  placeholder: '请在这里添加产品描述', //提示
                  readyOnly: false, //是否只读
                  theme: 'snow', //主题 snow/bubble
                  syntax: true, //语法检测
                }
              }
            },
            methods: {
              // 失去焦点
              onEditorBlur(editor) {},
              // 获得焦点
              onEditorFocus(editor) {},
              // 开始
              onEditorReady(editor) {},
              // 值发生变化
              onEditorChange(editor) {
                this.content = editor.html;
                console.log(editor);
              },
            },
            computed: {
              editor() {
                return this.$refs.myTextEditor.quillEditor;
              }
            },
            mounted() {
              // console.log('this is my editor',this.editor);
            } 
          }
      </script>

    汉化

    汉化只需要更改toolbar工具栏中的样式即可实现

    <style>
      .editor {
        line-height: normal !important;
        height: 800px;
      }
      .ql-snow .ql-tooltip[data-mode=link]::before {
        content: "请输入链接地址:";
      }
      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
          border-right: 0px;
          content: '保存';
          padding-right: 0px;
      }
     
      .ql-snow .ql-tooltip[data-mode=video]::before {
          content: "请输入视频地址:";
      }
     
      .ql-snow .ql-picker.ql-size .ql-picker-label::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
      }
     
      .ql-snow .ql-picker.ql-header .ql-picker-label::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: '标题1';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: '标题2';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: '标题3';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: '标题4';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: '标题5';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: '标题6';
      }
     
      .ql-snow .ql-picker.ql-font .ql-picker-label::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
      }
      </style>

    实现以上配置后就可以看到效果如图:

    以上就是vue-quill-editor的基本配置了。

     

    图片上传的配置

    因为图片这块,大多情况下,我们都不需要base64格式的,所以我们需要将图片通过OSS换取网络路径然后发送给后端和回显

    更换quill-editor的点击事件为自定义事件

    这里借助element-ui的图片功能,因为其功能齐全,图片上传前,上传后,都有交互效果的处理,所以可以选择性使用

     editorOption: {
          modules: {
              toolbar: {
                  handlers: {
                      image: function(value) {
                          if (value) {
                              // 触发input框选择图片文件
                              document.querySelector(".avatar-uploader input").click();//自定义元素的点击事件
                          } else {
                              this.quill.format("image", false);
                          }
                      },
                          // link: function(value) {
                          //   if (value) {
                          //     var href = prompt('请输入url');
                          //     this.quill.format("link", href);
                          //   } else {
                          //     this.quill.format("link", false);
                          //   }
                          // },
                  }
              }
          }
      },

    而后在自定义的元素上写入点击事件,然后将该元素隐藏掉。点击quill-editor的图片上传时,实际点击了自定义的图片上传,而后在返回网络路径后将图片插入富文本编辑器即可。

    插入返回的网络图片路径(这里借助的是element-ui)

    uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill;
            // 如果上传成功
            if (res.code == 200) {
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片  res.url为服务器返回的图片地址
              quill.insertEmbed(length, "image", res.url);
              // 调整光标到最后
              quill.setSelection(length + 1);
            } else {
              this.$message.error("图片插入失败");
            }
            // loading动画消失
            this.quillUpdateImg = false;
          },

    以上就是主要思路及代码,如果还是不懂就看下面vue组件的源码(也可直接使用,前提是下载了element-ui)

    组件封装源码及引用

    <template>
          <div>
              <!-- 图片上传组件辅助-->
            <el-upload
              class="avatar-uploader"
              :action="serverUrl"
              name="file"
              :headers="header"
              :show-file-list="false"
              list-type="picture"
              :multiple="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload">
            </el-upload>
     
            <quill-editor
            class="editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
            </quill-editor>
          </div>
      </template>
      <script>
      // 工具栏配置
      const toolbarOptions = [
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
        ["blockquote", "code-block"], // 引用  代码块
        [{ header: 1 }, { header: 2 }], // 1、2 级标题
        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
        [{ script: "sub" }, { script: "super" }], // 上标/下标
        [{ indent: "-1" }, { indent: "+1" }], // 缩进
        // [{'direction': 'rtl'}],                         // 文本方向
        [{ size: ["small", false, "large", "huge"] }], // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ font: [] }], // 字体种类
        [{ align: [] }], // 对齐方式
        ["clean"], // 清除文本格式
        ["link", "image", "video"] // 链接、图片、视频
      ];
     
      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 {
        props: {
          /*编辑器的内容*/
          value: {
            type: String
          },
          /*图片大小*/
          maxSize: {
            type: Number,
            default: 4000 //kb
          }
        },
     
        components: {
          quillEditor
        },
     
        data() {
          return {
            content: this.value,
            quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
            editorOption: {
              theme: "snow", // or 'bubble'
              placeholder: "您想说点什么?",
              modules: {
                toolbar: {
                  container: toolbarOptions,
                  // container: "#toolbar",
                  handlers: {
                    image: function(value) {
                      if (value) {
                        // 触发input框选择图片文件
                        document.querySelector(".avatar-uploader input").click();
                      } else {
                        this.quill.format("image", false);
                      }
                    },
                    // link: function(value) {
                    //   if (value) {
                    //     var href = prompt('请输入url');
                    //     this.quill.format("link", href);
                    //   } else {
                    //     this.quill.format("link", false);
                    //   }
                    // },
                  }
                }
              }
            },
            serverUrl: "https://testihospitalapi.ebaiyihui.com/oss/api/file/store/v1/saveFile", // 这里写你要上传的图片服务器地址
            header: {
              // token: sessionStorage.token
            } // 有的图片服务器要求请求头需要有token
          };
        },
     
        methods: {
          onEditorBlur() {
            //失去焦点事件
          },
          onEditorFocus() {
            //获得焦点事件
          },
          onEditorChange() {
            //内容改变事件
            this.$emit("input", this.content);
          },
     
          // 富文本图片上传前
          beforeUpload() {
            // 显示loading动画
            this.quillUpdateImg = true;
          },
     
          uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill;
            // 如果上传成功
            if (res.code == 200) {
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片  res.url为服务器返回的图片地址
              quill.insertEmbed(length, "image", res.result.url);
              // 调整光标到最后
              quill.setSelection(length + 1);
            } else {
              this.$message.error("图片插入失败");
            }
            // loading动画消失
            this.quillUpdateImg = false;
          },
          // 富文本图片上传失败
          uploadError() {
            // loading动画消失
            this.quillUpdateImg = false;
            this.$message.error("图片插入失败");
          }
        }
      };
      </script>
     
      <style>
      .editor {
        line-height: normal !important;
        height: 800px;
      }
      .ql-snow .ql-tooltip[data-mode=link]::before {
        content: "请输入链接地址:";
      }
      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
          border-right: 0px;
          content: '保存';
          padding-right: 0px;
      }
     
      .ql-snow .ql-tooltip[data-mode=video]::before {
          content: "请输入视频地址:";
      }
     
      .ql-snow .ql-picker.ql-size .ql-picker-label::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
      }
     
      .ql-snow .ql-picker.ql-header .ql-picker-label::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: '标题1';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: '标题2';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: '标题3';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: '标题4';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: '标题5';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: '标题6';
      }
     
      .ql-snow .ql-picker.ql-font .ql-picker-label::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
      }
      </style>
    引入:
      <template>
        <Editor v-model="article.content"/>
      </template>
      <script>
      import Editor from './quillEditor'
      export default {
        components: {
          Editor
        },
        data() {
          return {
            article: {
              content: '',
            }
          }
        }
      }
      </script>
      <style>
     
      </style>

     

    VUE组件封装

    <template>
      <quill-editor
        class="editor"
        ref="myTextEditor"
        v-model="content"
        :options="editorOption"
        @change="onEditorChange($event)"
      ></quill-editor>
    </template>
    
    <script>
    const toolbar = [
      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
      ["blockquote", "code-block"], // 引用  代码块
      [{ header: 1 }, { header: 2 }], // 1、2 级标题
      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
      //   [{ script: "sub" }, { script: "super" }], // 上标/下标
      //   [{ indent: "-1" }, { indent: "+1" }], // 缩进
      // [{'direction': 'rtl'}],                         // 文本方向
      [{ size: ["small", false, "large", "huge"] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
      [{ font: [] }], // 字体种类
      [{ align: [] }], // 对齐方式
      ["clean"], // 清除文本格式
      ["link", "image", "video"] // 链接、图片、视频
    ]; //工具菜单栏配置
    export default {
      data() {
        return {
          content: null, //内容
          editorOption: {
            modules: {
              toolbar
            },
            placeholder: "", //提示
            readyOnly: false, //是否只读
            theme: "snow", //主题 snow/bubble
            syntax: true //语法检测
          }
        };
      },
      methods: {
        // 值发生变化
        onEditorChange(editor) {
          this.content = editor.html;
          this.$emit("content", editor.html);
        }
      }
    };
    </script>
    
    <style>
    .editor {
      line-height: normal !important;
      height: 800px;
      margin-bottom: 30px;
    }
    .ql-snow .ql-tooltip[data-mode="link"]::before {
      content: "请输入链接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: "保存";
      padding-right: 0px;
    }
    
    .ql-snow .ql-tooltip[data-mode="video"]::before {
      content: "请输入视频地址:";
    }
    
    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: "14px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
      content: "10px";
    }
    
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
      content: "18px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
      content: "32px";
    }
    
    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "标题1";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "标题2";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "标题3";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "标题4";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "标题5";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "标题6";
    }
    
    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: "标准字体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
      content: "衬线字体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
      content: "等宽字体";
    }
    </style>
    展开全文
  • 富文本编辑器引用 import VueKindEditor from 'vue-kindeditor' import 'kindeditor/kindeditor-all-min.js' import 'kindeditor/themes/default/default.css' Vue.use(VueKindEditor) template部分 <editor...
  • ant.vue富文本编辑器 编辑器 (SMEditor) Rich text editor based on Vue.js 2.0 and shimo Docs style, lightweight, fast and elegant. 基于Vue.js 2.0和shimo Docs样式的富文本编辑器,轻巧,快速,优雅。 View ...
  • Vue富文本编辑器代码高亮

    千次阅读 2019-01-17 23:00:40
    之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一...这个只是富文本编辑器,你使用代码块的话代码是不会高亮的,所以还要装一个highlight.js npm install highlight.js --save...
  • vue富文本编辑器tinymce

    千次阅读 2020-11-19 11:22:19
    最近整合了一个富文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vue的tinymce富文本 ,重点介绍一下tinymce的操作流程 ...
  • vue项目中经常会遇到需要编辑和展示一些比较复杂的新闻内容,这时候就会用到富文本编辑器,接下来咱们一起来看一下如何在vue使用富文本组件vue-quill-editor 1、安装editor组件 在终端运行命令cnpm install ...
  • vue富文本编辑器--vue-quill-editor

    千次阅读 2020-07-15 09:33:35
    vue富文本编辑器 vue-quill-editor quill 富文本编辑器
  • 这两天在做一个项目需要用到文本编辑的功能,项目结构是springmvc+vue-cil+element-ui,于是乎在网上找到了这个vue富文本编辑器。 1:通过npm命令安装 npm install mavon-editor --save 2:在main.js中全局引入 ...
  • vue富文本编辑器vue-quill-editor的使用方法 这是vue自家的一款编辑器,支持IE10+以上的浏览器。界面比较友好,如果你需要对你的文字,图像做一些编辑。它是一个不错的选择,先上一张效果图吧! 先上代码 主要介绍...
  • 富文本编辑器wangEditor百度UEditorbootstrap-wysiwygckeditor ckeditorKindeditorTinymcevue-quill-editor 很多项目中都需要用到富文本编辑器,目前也有很多种类的富文本编辑器。我就查了一下资料,了解了一些目前...
  • vue 富文本编辑器

    2021-04-28 21:54:37
    vue项目中使用富文本编辑器 npm i wangeditor --save 创建一个组件wangeditor <template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left;"></div> </...
  • 文章目录1、在main.js中对富文本编辑器进行安装与注册2、使用3、结束语 点击进入Vue❤学习专栏~ 1、在main.js中对富文本编辑器进行安装与注册 具体代码如下,直接复制粘贴即可: // 导入富文本编辑器 import ...
  • ant.vue富文本编辑器 Vue-Trix文字编辑器 (Vue-Trix Text Editor) Simple and lightweight Trix rich-text editor component for Vue.js. Vue.js的简单轻量级Trix RTF编辑器组件。 安装 (Installation) NPM NPM ...
  • 首先给你们看下效果图: 上述功能不能满足你们需求的可以不用往下看了…… 先大致介绍下:ckedior官方有6种默认编辑器类型, ...第一步:为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的编辑器...
  • vue 富文本编辑器--vue-quill-editor

    千次阅读 2019-04-26 17:27:43
    在很多vue项目中会用到...现在说下vue 富文本编辑器的安装和使用步骤: 1、下载 Vue-quill-editor 命令:npm install vue-quill-editor 2、安装依赖quill 命令:npm install quill --save 3、配置文件 impo...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,341
精华内容 3,336
关键字:

vue富文本编辑器的使用

vue 订阅