精华内容
下载资源
问答
  • vue富文本编辑器

    2021-02-05 15:19:27
    vue富文本编辑器 vue富文本编辑器 Vue-Quill-Editor 主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。 ...

    vue富文本编辑器

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

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

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

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

    补充: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']这种格式就好了
    
    1. 需要有默认值的

    标题 - 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>
    

    还有一种方式是不借助element-ui来实现图片上传,这一过程无非就是图片上传OSS换取网络路径,这一块,咱们其实可以自定义图片上传组件。这里就不做阐述了,笔者的另一篇图片上传的组件文章(https://blog.csdn.net/my_new_way/article/details/105812646),大家在这里就可以使用起来。

    展开全文
  • vue富文本编辑器:集成了网上集中富文本编辑器
  • Vue富文本编辑器

    2019-02-19 07:22:28
    vue-quill-editor 转载于:https://juejin.im/post/5c6bae9af265da2daf799879

    vue-quill-editor

    转载于:https://juejin.im/post/5c6bae9af265da2daf799879

    展开全文
  • 主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 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 ...

    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样式的富文本编辑器,轻巧,快速,优雅。

    (use)

    yarn install smeditor
    
    import SMEditor from 'smeditor'
    
    Vue.use(SMEditor)
    
    components: {
      'smeditor': SMEditor
    }
    
    <smeditor :config='config'></smeditor>

    配置 (config)

    const config = {
      uploadUrl: '',
      uploadName: '',
      uploadParams: {},
      uploadCallback: (data) => {
        console.log(data)
        return 'blob:https://fiddle.jshell.net/00a0b0b4-d19a-4860-9796-137692aef36f'
      },
      uploadFailed: (err) => {
        console.log(err)
      }
    }

    热键 (hot key)

    Ctrl + S 保存
    Ctrl + P 预览(新窗口)

    本地 (local)

    npm run dev
    
    npm run build
    
    npm run gp

    翻译自: https://vuejsexamples.com/rich-text-editor-based-on-vue-js-2-0-and-shimo-docs-style/

    ant.vue富文本编辑器

    展开全文
  • vue富文本编辑器--vue-quill-editor

    千次阅读 2020-07-15 09:33:35
    vue富文本编辑器 vue-quill-editor quill 富文本编辑器

    之前写过关于wangEditor这个富文本编辑器的使用方法,今天要说的是vue-quill-editor这个富文本:
    官方文档: http://doc.quilljs.cn/1434140
    NPM: https://www.npmjs.com/package/vue-quill-editor
    github: https://github.com/surmon-china/vue-quill-editor#readme


    下载依赖:

    npm install vue-quill-editor --save
    

    全局注册:

    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
     
    // require styles
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
     
    Vue.use(VueQuillEditor, /* { default global options } */)
    

    或者局部引入:

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

    使用方法(我是用elementUI的,代码中用了其中文件上传的组件el-upload,来代替富文本中的图片上传)注释很清楚,结合文档理解:

    <template>
      <div class="navone">
          <div v-loading="quillUpdateImg" element-loading-text="请稍等,图片上传中">
            <!-- 图片上传组件辅助-->
            <el-upload
                    class="avatar-uploader"
                    :action="serverUrl"
                    name="file"
                    :headers="header"
                    :show-file-list="false"
                    :data="uploadData"
                    :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>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    
    // 工具栏配置
      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"] // 链接、图片、视频
      ];
    
    export default {
      name: 'wxmaterial',
      data() {
        return {
          uploadData: {},      // 图片文件
          serverUrl: "/dev-api/wxmaterial/newsImgUpload", // 这里写你要上传的图片服务器地址
          header: {   // 有的图片服务器要求请求头需要有token,有的可以加上
              Authorization: 'Bearer '
          } ,
          quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
          content: '',        // 内容
          editorOption: {          // 配置项
            placeholder: "",
            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('注意!只支持公众号图文链接');
                      this.quill.format("link", href);
                    } else {
                      this.quill.format("link", false);
                    }
                  },
                }
              }
            }
          },
        }
      },
      components: {
          quillEditor
      },
      mounted () {
          
      },
      methods: {
          onEditorBlur(editor) {
            //失去焦点事件
            console.log(this.content)
          },
          onEditorFocus(editor) {
            //获得焦点事件
          },
          onEditorChange(editor) {
            //内容改变事件
          },
          // 富文本图片上传前
          beforeUpload() {
            // 显示loading动画
            this.quillUpdateImg = true
          },
          uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上传成功
            if(res.link){
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片  res.info为服务器返回的图片地址
              quill.insertEmbed(length, 'image', res.link)
              // 调整光标到最后
              quill.setSelection(length + 1)
            } else {
              this.$message.error('图片插入失败')
            }
            // loading动画消失
            this.quillUpdateImg = false;
          },
          // 富文本图片上传失败
          uploadError() {
            // loading动画消失
            this.quillUpdateImg = false;
            this.$message.error("图片插入失败");
          }
      }
    }
    </script>
    
    <style scoped lang="less">
    .editor {
        line-height: normal !important;
        height: 500px;
        width: 700px;
        margin: 20px auto;
      }
      .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>
    
    

    效果:
    在这里插入图片描述


    就酱~

    展开全文
  • 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 ...
  • 这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!之前使用的富文本编辑器是uEditor,...
  • vue 富文本编辑器--vue-quill-editor

    千次阅读 2019-04-26 17:27:43
    在很多vue项目中会用到富文本编辑器,那什么是富文本编辑器呢?一个图你就可以明白了…… 现在说下vue 富文本编辑器的安装和使用步骤: 1、下载 Vue-quill-editor 命令:npm install vue-quill-editor 2、安装...
  • 1.挑个富文本编辑器首先针对自己项目的类型,确定自己要用啥编辑器。1.1 wangeditor如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作,轻...
  • vue 富文本编辑器使用

    2021-01-30 17:00:47
    环境:在vue + TS 中使用富文本编辑器 markdown文本编辑器更加适合开发者使用 普通用户更适合类似word的使用方式,所见即所得 推荐使用的富文本编辑器 ckeditor5,内置插件和扩展性非常好 quill medium-editor,...
  • 本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下先看效果图:1、下载Vue-Quill-Editornpm install vue-quill-editor --save2、下载quill(Vue-Quill-Editor需要依赖)npm ...
  • vue富文本编辑器,包含获取内容弹框 <template> <div class="mod-demo-ueditor"> <el-alert title="提示:" type="warning" :closable="false"> <div slot-scope="description"> &...
  • vue富文本编辑器tinymce

    千次阅读 2020-11-19 11:22:19
    最近整合了一个富文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vue的tinymce富文本 ,重点介绍一下tinymce的操作流程 ...
  • 步骤如下:1、下载Vue-Quill-Editornpm install vue-quill-editor --save2、下载quill(Vue-Quill-Editor需要依赖)npm install quill --save3、引入对应的css和jsimport { quill... //调用编辑器import 'quill/dis...
  • vue富文本编辑器vue-quill-editor的使用方法 这是vue自家的一款编辑器,支持IE10+以上的浏览器。界面比较友好,如果你需要对你的文字,图像做一些编辑。它是一个不错的选择,先上一张效果图吧! 先上代码 主要介绍...
  • 介绍Vue2Editor是一个简单易用且功能强大的Vue版本的富文本编辑器,其基于Quill.js和Vuejs构建!Githubhttps://github.com/davidroyer/vue2-editor特性简单易用;基于Vue.js & Quill.js构建;为更复杂的场景提供...
  • 各个编辑器之间的较量UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery......
  • 前阵子在用vue富文本编辑器vue-quill-editor的时候碰见个问题就是用户从文档上直接粘贴过去的图片保存后链接没问题,但页面展示不出来F12打开看,图片链接显示403。 原因 我们对Markdown编辑器进行了一些功能拓展与...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,591
精华内容 1,036
关键字:

vue富文本编辑器

vue 订阅