精华内容
下载资源
问答
  • vue富文本编辑器:集成了网上集中富文本编辑器
  • 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>
    展开全文
  • 之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。 近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧! 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册: import ...
  • Vue+富文本编辑器

    2020-10-16 15:42:21
    富文本编辑器,由于现在官网不在做更新,开发者也不容易找到,为了开发者能够找得到该富文本编辑器~
  • 前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… ...
  • npm i vue-froala-wysiwyg -S; 如果出现 Cannot find module '@babel/runtime/core-js/object/keys' 执行下面这个 npm install --save-dev @babel/runtime-corejs2 main.js import 'froala-editor/css/froala_...
  • vue是前端开发者所追捧的框架,简单易上手,但是基于vue富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor...
  • 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ...
  • 主要介绍了富文本编辑器vue2-editor实现全屏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • Vue-html5-editor是一个Vue富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.
  • 主要介绍了vue富文本框(插入文本、图片、视频)的使用及问题小结,需要的朋友可以参考下
  • 主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue-quill-editor 基于 Quill、适用于 Vue富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。 基础用法 1、npm 导入 vue-quill-editor npm install vue-quill-editor --save 2、引入 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>
    
    展开全文
  • 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 ...

    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

    $npm install --save vue-trix

    YARN

    $yarn add vue-trix

    安装 (Mount)

    全局安装 (Mount with global)

    in the main.js, import the package as a global component.

    main.js ,将包作为全局组件导入。

    import 'vue-trix'

    安装组件 (Mount with component)

    import VueTrix from 'vue-trix'
    
      export default {
        // ...
        components: {
          VueTrix
        }
      }

    组件用法 (Component Usages)

    创建一个简单的编辑器 (Create a simple editor)

    Add VueTrix component into *.vue template

    VueTrix组件添加到*.vue模板中

    <template>
        <!-- ... -->
        <VueTrix v-model="editorContent"/>
        <!-- ... -->
      </template>

    与表格整合 (Integrating with Forms)

    <form ...>
        <VueTrix inputId="editor1" v-model="editorContent"/>
      </form>

    道具说明 (Props descriptions)

    • inputId: This is referenced id of the hidden input field defined

      inputId :这是定义的隐藏输入字段的参考id

    翻译自: https://vuejsexamples.com/simple-and-lightweight-trix-rich-text-editor-component-for-vue-js/

    ant.vue富文本编辑器

    展开全文
  • vue富文本编辑器tinymce

    2021-04-08 15:28:10
    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,...

    一、概述

    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

    TinyMCE的优势:

    • 开源可商用,基于LGPL2.1
    • 插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2)
    • 接口丰富,可扩展性强,有能力可以无限拓展功能
    • 界面好看,符合现代审美
    • 提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)
    • 对标准支持优秀(自v5开始)
    • 多语言支持,官网可下载几十种语言。

    二、vue-element-admin

    vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。

    官方链接:https://panjiachen.github.io/vue-element-admin-site/zh/

    我尝试直接使用tinymce模块使用会有各种问题,打开页面无法加载出富文本编辑器或者出现其他问题。

    注意:vue-element-admin已经集成好了tinymce,接来下我会如何介绍将tinymce移植到一个新的vue项目中。

    三、移植tinymce

    下载vue-element-admin

    首先下载vue-element-admin,默认master分支是英文的,我需要中文版的。

    国内:
    git clone -b i18n https://gitee.com/panjiachen/vue-element-admin.git
    
    国外:
    git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git
    

    注意:i18n 分支表示国际版本,里面包含中文。后面我会介绍如何切换到中文。

    创建新项目

    创建项目tinymce_demo,并安装element-ui模块,参考链接:https://www.cnblogs.com/xiao987334176/p/14187889.html

    安装模块

    安装tinymce

    npm install @tinymce/tinymce-vue -S
    npm install tinymce -S
    

    安装sass

    npm install node-sass@4.14.1 sass-loader@7.3.1 style-loader --save-dev
    

    复制文件

    vue-element-admin下载完成后,进入目录src\components,将Tinymce目录复制到tinymce_demo项目中的src\components目录下。

    在src\components目录下创建测试文件test.vue,此时:tinymce_demo项目src目录结构如下:

    ./
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── HelloWorld.vue
    │   ├── test.vue
    │   └── Tinymce
    │       ├── components
    │       │   └── EditorImage.vue
    │       ├── dynamicLoadScript.js
    │       ├── index.vue
    │       ├── plugins.js
    │       └── toolbar.js
    ├── main.js
    └── router
        └── index.js
    

    指定中文

    修改文件src/components/Tinymce/index.vue

    修改计算方法language,指定语言为中文。

    language() {
      // return this.languageTypeList[this.$store.getters.language]
      return this.languageTypeList['zh']
    },
    

    注意:由于我这里没有使用store,所以直接固定语言为中文。

    修改src/components/test.vue,引用组件Tinymce

    <template>
      <div class="components-container">
        <aside>
          富文本是管理后端的一个核心特性,但同时它也是一个有很多坑的地方。在选富文本的过程中,我也走了很多弯路。市面上常见的富文本基本都用上了,我最终选择了Tinymce。请参阅更详细的富文本比较和介绍。
          <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">文档</a>
        </aside>
        <div>
          <tinymce v-model="content" :height="300" />
        </div>
        <div class="editor-content" v-html="content" />
      </div>
    </template>
    
    <script>
      import Tinymce from '@/components/Tinymce'
        export default {
          name: "test",
          components: { Tinymce },
          data() {
            return {
              content:'请输入内容'
            }
          }
        }
    </script>
    
    <style scoped>
      .editor-content{
        margin-top: 20px;
      }
    </style>
    
    View Code

    修改src/App.vue,注释掉默认内容

    <template>
      <div id="app">
    <!--    <img src="./assets/logo.png">-->
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    /*#app {*/
    /*  font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
    /*  -webkit-font-smoothing: antialiased;*/
    /*  -moz-osx-font-smoothing: grayscale;*/
    /*  text-align: center;*/
    /*  color: #2c3e50;*/
    /*  margin-top: 60px;*/
    /*}*/
    </style>
    
    View Code

    修改src/router/index.js,指定路由

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import test from '@/components/test'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'test',
          component: test
        },
      ]
    })
    

    启动vue项目,访问首页,效果如下:

    展开全文
  • 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 ...
  • 1、安装插件:npm install vue-quill-editor 2、安装插件依赖:npm install quill 3、main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core....
  • vue 富文本编辑器插件官网文档

    千次阅读 2020-10-30 17:16:13
    https://www.kancloud.cn/wangfupeng/wangeditor3/460259
  • vue富文本编辑器--vue-quill-editor

    千次阅读 2020-07-15 09:33:35
    vue富文本编辑器 vue-quill-editor quill 富文本编辑器
  • vue富文本编辑器中上传图片

    千次阅读 2019-08-07 19:33:23
    曾经写过一个文档管理的项目,用到最多的就是富文本编辑器。 说说遇到的坑吧:最终的提交结果,后端不要文档流,后端要上传成功返回的路径,不知道正在阅读此文的小伙伴是如何处理的,瞅着挺简单,但写起来还真有点...
  • 这两天在做一个项目需要用到文本编辑的功能,项目结构是springmvc+vue-cil+element-ui,于是乎在网上找到了这个vue富文本编辑器。 1:通过npm命令安装 npm install mavon-editor --save 2:在main.js中全局引入 ...
  • 2、封装富文本组件 <template lang="html"> <div class="editor"> <!-- <div ref="toolbar" class="toolbar"></div> --> <div ref="editor" class="text"></div
  • 本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下 先看效果图:    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill(Vue-Quill-Editor...
  • vue富文本编辑器组件

    2019-02-16 15:15:47
    1.引用quill &lt;script src="/lib/quill/quill.min.js"&gt;&lt;/script&gt; &lt;link href="...2.RichEditorDemo.vue &lt;template&gt; &lt;div cl
  • //富文本编辑器 const titleConfig=[ {Choice:'.ql-bold',title:'加粗'}, {Choice:'.ql-italic',title:'斜体'}, {Choice:'.ql-underline',title:'下划线'}, {Choice:'.ql-header',title:'段落格式'}, {Choice:'.ql-...

空空如也

空空如也

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

vue富文本编辑器

vue 订阅