精华内容
下载资源
问答
  • 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_...
  • 前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… ...
  • vue是前端开发者所追捧的框架,简单易上手,但是基于vue富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor...
  • 之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。 近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧! 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册: import ...
  • 基于vue2.0 开发的 富文本编辑器,比之前的ueditor好看又好用,安装需要执行 npm install --save vue2-editor <vue-editor v-model="content"></vue-editor> import { VueEditor } from 'vue2-editor' 即可
  • Vue-html5-editor是一个Vue富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.
  • vue-tinymce 封装了el-upload 控件,支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见:https://xingyun.blog.csdn.net/article/details/102492921
  • vue结合element-ui和quill富文本编辑器实现上传视频和封面
  • 主要介绍了富文本编辑器vue2-editor实现全屏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码,具有一定的参考价值,有兴趣的可以了解一下
  • vue富文本编辑器:集成了网上集中富文本编辑器
  • 最近遇到个需求,需要在页面中引入富文本编辑器。最后选择使用wangEditor,直接引入即可使用,因此记录一下。 引入方式如下: import E from 'wangeditor' const editor = new E('#div1') editor.create() 更多...

    最近遇到个需求,需要在页面中引入富文本编辑器。最后选择使用wangEditor,直接引入即可使用,因此记录一下。

    引入方式如下:

    import E from 'wangeditor'
    const editor = new E('#div1')
    editor.create()

    更多配置可以参考官方使用文档

    更多内容可以去官网

    展开全文
  • vue-quill-editor的guthub地址 ,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要...
  • Vue+富文本编辑器

    2020-10-16 15:42:21
    富文本编辑器,由于现在官网不在做更新,开发者也不容易找到,为了开发者能够找得到该富文本编辑器~
  • 主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 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项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。 项目地址:https://github.com/suweiteng/vue2-management-platform  1.放入静态资源并配置 首先把官网下载的Ueditor资源,放入...
  • 主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器,轻量,简洁,易用,开源免费。 兼容常见的PC浏览器:Chrome,Firefox,Safar,Edge,QQ浏览器,IE11。 不支持移动端。 wangEditor当前是v4...
  • 轻量级富文本编辑器

    2017-12-15 15:22:39
    轻量级富文本编辑器,这是一个txt,里面是百度云链接,绝对好用
  • 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>
    展开全文
  • 主要介绍了Vue中Quill富文本编辑器的使用教程,包括自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小等使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.挑个富文本编辑器首先针对自己项目的类型,确定自己要用啥编辑器。1.1 wangeditor如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作,轻...

    1.挑个富文本编辑器

    首先针对自己项目的类型,确定自己要用啥编辑器。

    1.1 wangeditor

    如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作,轻量化,开源,有中文文档。

    ▽wangeditor效果图

    1.2 tinyMCE

    如果需要复杂的编辑器,推荐tinyMCE(点击跳转),同样也非常简单和优雅,但是文档是英文的,配合chrome的翻译,基本上能看懂,而且tinyMCE有另外一个好处,word上的东西基本上都可以保存格式复制到编辑器里,可以比较方便的转移。

    ▽tinyMCE效果图

    剩下的很多编辑器,但是大多没接触过,推荐的这两个,一个简洁够用,一个功能齐全,能覆盖90%以上的场景了,所以就不推荐别的了。另外本文主要讲wangeditor。

    2.项目准备(wangeditor)

    本文选用框架的是nuxt.js,和vue-cli基本一致。都0202年了,如果不是模块化的项目请参考下

    既然谈到模块化项目,那么将编辑器设为组件那就是非常必要的了。

    但是有一个问题,vue自带的数据双向绑定是不支持组件内外之间的双向传递的(其实支持的,就是我不知道),也就是说,如果你将富文本编辑器封装在组件B中,你在A页面用组件B去写入数据C,这个C数据只能在B的组件页面中获取,无法直接在A页面中取到。但是项目逻辑不可能在组件的B页面上去执行,一定是在A页面去完成逻辑,所以一定要在A中获取到数据。

    为了解决这个问题,我们需要回顾一下vue的v-model和父子组件的传值方式。如果你了解组件数据的双向绑定和它的原理,可以忽略下面,直接到最后的代码处就行了。

    2.1 v-model

    这个很基础了,就简单放个例子好了。

    1

    2

    {{message}}

    这个例子其实等价于

    1

    挺好理解的,①v-bind:"message" 等于给input赋值,②@input="message = $event.target.value" 等于给message赋值,所以这样才实现了双向绑定,也就是修改message时会触发v-bind让Input变换值,在Input输入时能触发input事件来改变message的值。

    2.2实现组件v-model

    那现在我搞一个组件,给他设上v-bind ,然后顺便监听他的input,这两步可以化为一步v-model="price",也可以看非组件时候的"② @input="message = $event.target.value" 等于给message赋值,"。因为监听了input会将数据赋给price,然后通过v-bind会将price的值赋给组件内部的props中的value属性。

    1

    2

    3

    展开全文
  • index是主文件,编写富文本的地方,也可以根据个人需要修改) 附 下载地址: 组件下载地址 4.在需要的地方调用即可,如demo.vue中: import Tinymce from "./Tinymce"; export default { ...

    使用步骤:

    1.在index.html中引入js文件:

    <body>
      <script src="./static/tinymce4.7.5/tinymce.min.js"></script>
      <div id="app"></div>
      <!-- built files will be auto injected -->
    </body>

    ⚠️注意:一定要在打包的js之前引入

    2.将富文本资源文件放到static文件夹:

    附 下载地址:tinymce静态资源文件包    

    3.在components文件夹下放置如下文件(封装好的组件,plugin和toolbar是配置功能的文件,可以根据个人需要修改删除。editorImage是一个图片上传的组件,可以自定义修改,因此对媒体资源可扩展性好。index是主文件,编写富文本的地方,也可以根据个人需要修改)

    附 下载地址:组件下载地址

    4.在需要的地方调用即可,如demo.vue中:

    <template>
      <div id="demo">
        <tinymce :height="300" v-model="content"/>
      </div>
    </template>
    
    <script>
    import Tinymce from "./Tinymce";
    export default {
      name: "qrcode",
      components: { Tinymce },
      data() {
        return {
          content: `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />`
        };
      },
      methods: {},
      mounted() {}
    };
    </script>
    
    <style scoped>
    </style>

    这是运行之后的结果:

    自定义插入图片(或者视频,语音)的功能特别赞,根据个人需要来修改。

    展开全文
  • 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> </...
  • 主要介绍了Vue 中使用富文本编译器wangEditor3的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,288
精华内容 3,715
关键字:

vue富文本编辑器推荐

vue 订阅