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

    千次阅读 2020-11-19 11:22:19
    最近整合了一个文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vue的tinymce文本 ,重点介绍一下tinymce的操作流程 ...
          最近整合了一个富文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vue的tinymce富文本 ,重点介绍一下tinymce的操作流程
          
          tinymce的英文官网写的贼垃圾 不建议观看 乱的一匹,先进行npm下载插件依赖
    
    1. 对于vue.js3
      $ npm install --save “@tinymce/tinymce-vue@^4”

    2. 对于vue.js2
      $ npm install --save “@tinymce/tinymce-vue@^3”

     <template>
       <div id="app">
         <img alt="Vue logo" src="./assets/logo.png">
         <editor
           api-key="no-api-key"
           :init="{
             height: 500,
             menubar: false,
             plugins: [
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             ],
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help'
           }"
         />
       </div>
     </template>
    
     <script>
     import Editor from '@tinymce/tinymce-vue'
    
     export default {
       name: 'app',
       components: {
         'editor': Editor
       }
     }
     </script>
    

    因为上面工具toolbar里面的值不是很全 我这边把全的贴出来

                   'undo redo | styleselect | fontselect| bold italic  backcolor forecolor | \
                   underline strikethrough  | \
                  alignleft aligncenter alignright alignjustify | \
                  bullist numlist outdent indent | removeformat | link image| \
                  advlist autolink lists charmap print preview|\
                  searchreplace visualblocks code fullscreen|insertdatetime media table paste | wordcount help '
    

    在这里插入图片描述
    这个是效果图 唯一的缺点就是这里配置上传的视频和图片是直接输入连接的 ,
    不过比较欣慰的就是因为苹果手机限制,视频在手机显示效果直接就是一个播放按钮,没有第一帧的画面,这里竟然做了处理,需要视频的小伙伴必看,在视频里面的高级设置里面,先配置一般的原始码,在配置高级里面的封面,下面是示意图在这里插入图片描述在这里插入图片描述

    展开全文
  • 首先给你们看下效果图: 上述功能不能满足你们需求的可以不用往下看了…… 先大致介绍下:ckedior官方有6种默认编辑器类型, ...第一步:为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的编辑器...
    首先给你们看下效果图:

    在这里插入图片描述
    上述功能不能满足你们需求的可以不用往下看了……
    先大致介绍下:ckedior官方有6种默认编辑器类型,
    分别是:经典编辑器、内联编辑器、气球块编辑器、气球编辑、文档编辑器、自定义构建
    根据我的项目需求,我需要文档编辑器类型,应用于VUE项目中,官方文档有针对vue项目的具体步骤:

    第一步:为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的编辑器构建。
    npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-你选择的编辑器类型
    //比如说:我选择的是上图中的文档编辑器那么,安装语句则为:
    npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document
    
    第二步:在main.js引入
    import Vue from 'vue';
    import CKEditor from '@ckeditor/ckeditor5-vue';
    
    Vue.use( CKEditor );
    
    第三步:手动将编辑器工具栏添加到DOM(使用文档编辑器必选)并加载中文版

    如果是经典编辑器不需要这一步

    <template>
            <div id="app">
                <ckeditor :editor="editor" 
                		  @ready="onReady" 
                		  v-model="editorData" 
                		  :config="editorConfig"></ckeditor>
            </div>
    </template>
    
    <script>
        import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    	import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'; //中文包
        export default {
            name: 'app',
            data() {
                return {
                    editor: DecoupledEditor,
                    editorData: '<p>Content of the editor.</p>',
    		        editorConfig: {
    		           // The configuration of the editor.
    		           language: 'zh-cn',  // 中文
    		        },
                }
            },
            methods: {
                onReady( editor )  {
                    // Insert the toolbar before the editable area.
                    editor.ui.getEditableElement().parentElement.insertBefore(
                        editor.ui.view.toolbar.element,
                        editor.ui.getEditableElement()
                    );
                }
            }
        }
    </script>
    
    	当然,文档默认的编辑器高度没有这么高,没有边框,你可以自行添加:.	
    
    		ck-editor__editable {
    		    min-height: 400px;
    		    border: 1px solid #ccc!important;
    		  }
    
    	欧了,做到这一步,你应该已经看到了上述图片中的内容,如有疑问,欢迎交流……
    
    展开全文
  • Vue富文本编辑器代码高亮

    千次阅读 2019-01-17 23:00:40
    之前在Vue-awesome上面找文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的。 首先下载到自己的项目中 npm install vue-quill-editor --save -dev 这个只是文本编辑器,你使用...

    之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的。
    首先下载到自己的项目中

    npm install vue-quill-editor --save -dev
    

    这个只是富文本编辑器,你使用代码块的话代码是不会高亮的,所以还要装一个highlight.js

    npm install highlight.js --save -dev
    

    注意这个highlight.js中间是有一个点的(不知道发布这个包的作者咋想的)。

    然后在引入highlight.js的样式文件

    import 'highlight.js/styles/xcode.css'
    

    我引的主题是xcode,还有其他很多主题,具体可以去他的highlight.js的npm包去查看。

    到这里highlight.js的引入就完成了。

    vue-quill-editor的配置

    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', 'medium', 'large', 'huge', 'false'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'font': [] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image', 'video']
        ],
        syntax: {
            highlight: text => {
                return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
            }
        }
    }
    

    加上语法高亮的配置项貌似就快大功告成了,但是我发现到这里代码块确实有语法高亮了,但是字体还是默认最丑的字体啊,不等宽的英文字体看起来很难受啊有木有。

    最后发现问题是不起眼的reset.css把所有的标签都给了默认字体,所以最后把precode标签单独拿出来用上自己喜欢的字体就ok啦!

    pre, code { font-family: Consolas; }
    

    Consolas和Monoca我觉得是windows上最好看的字体了。

    结束语

    第一次写文章,有什么不对的地方还请大家指正批评。告辞~

    展开全文
  • Vue tinymce文本编辑器整合

    万次阅读 多人点赞 2018-10-23 17:54:57
    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…) 下面开始工作: 插件安装 tinymce官方提供...
  • 1.文本编辑器插件安装 npm install vue-quill-editor 2.安装依赖quill npm install quill --save 3.配置文件 需要引入三个css文件 import ‘quill/dist/quill.core.css’ import 'quill/dist/quill.snow.css' ...
  • vue富文本编辑器--vue-quill-editor

    千次阅读 2020-07-15 09:33:35
    vue富文本编辑器 vue-quill-editor quill 富文本编辑器
  • ant.vue富文本编辑器 编辑器 (SMEditor) Rich text editor based on Vue.js 2.0 and shimo Docs style, lightweight, fast and elegant. 基于Vue.js 2.0和shimo Docs样式的富文本编辑器,轻巧,快速,优雅。 View ...
  • Vue+文本编辑器

    2020-10-16 15:42:21
    文本编辑器,由于现在官网不在做更新,开发者也不容易找到,为了开发者能够找得到该文本编辑器~
  • Vue-Quill-Editor:基于Quill、适用于Vue2的文本编辑器。 1.首先安装依赖包 npm install vue-quill-editor --save 2.引入样式(这里是组件引入,非全局引入) import 'quill/dist/quill.core.css'; import '...
  • vue项目中经常会遇到需要编辑和展示一些比较复杂的新闻内容,这时候就会用到文本编辑器,接下来咱们一起来看一下如何在vue中使用文本组件vue-quill-editor 1、安装editor组件 在终端运行命令cnpm install ...
  • 文本编辑器wangEditor百度UEditorbootstrap-wysiwygckeditor ckeditorKindeditorTinymcevue-quill-editor 很多项目中都需要用到文本编辑器,目前也有很多种类的文本编辑器。我就查了一下资料,了解了一些目前...
  • vue 文本编辑器--vue-quill-editor

    千次阅读 2019-04-26 17:27:43
    在很多vue项目中会用到文本编辑器,那什么是文本编辑器呢?一个图你就可以明白了…… 现在说下vue 文本编辑器的安装和使用步骤: 1、下载 Vue-quill-editor 命令:npm install vue-quill-editor 2、安装...
  • vue-quill-editor 基于 Quill、适用于 Vue文本编辑器,支持服务端渲染和单页应用,非常高效简洁。 基础用法 1、npm 导入 vue-quill-editor npm install vue-quill-editor --save 2、引入 vue...
  • 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 ...
  • 1. 下载vue-quill-editor插件 npm install --save vue-quill-editor 2. 在main.js中 引入vue-quill-editor插件 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/...
  • 文本编辑器引用 import VueKindEditor from 'vue-kindeditor' import 'kindeditor/kindeditor-all-min.js' import 'kindeditor/themes/default/default.css' Vue.use(VueKindEditor) template部分 <editor...
  • npm install tinymce -S npm install @tinymce/tinymce-vue -S
  • Vue富文本编辑器

    2019-02-19 07:22:28
    vue-quill-editor 转载于:https://juejin.im/post/5c6bae9af265da2daf799879
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • 基于vue2.0 开发的 文本编辑器,比之前的ueditor好看又好用,安装需要执行 npm install --save vue2-editor <vue-editor v-model="content"></vue-editor> import { VueEditor } from 'vue2-editor' 即可

空空如也

空空如也

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

vue的富编辑器

vue 订阅