精华内容
下载资源
问答
  • Quill Rich Text Editor Quickstart • Documentation • Development • Contributing • Interactive Playground Quill is a modern rich text editor built for ...
  • Vue-Quill-Editor Quill editor component for Vue. 基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。 Example Component example page CDN example page Install NPM npm install vue-quill...
  • vue-quill-editor的安装/引用 使用步骤: npm i quill vue-quill-editor import { quillEditor} from "vue-quill-editor"; import "quill/dist/quill.snow.css"; //quill编辑器的样式表 在vue中注册quillEditor组件 ...

    vue-quill-editor的安装/引用

    首先看效果, 如下图:
    效果如图

    使用步骤:
    1. npm i quill vue-quill-editor
    2. import { quillEditor} from "vue-quill-editor";
    3. import "quill/dist/quill.snow.css"; //quill编辑器的样式表
    4. 在vue中注册quillEditor组件
      components: { quillEditor },
    5. 在template中使用这个组件
     <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          style="height: 300px;width: 600px"
        >
        </quill-editor>
    
    1. 在data中写入配置项
    data(){
        return {
           content:'', //文本区域内容
           editorOption: { 
            placeholder: "请输入内容...",
            modules: {
                 
              }
            },
          },
        }
    }
    
    1. 注册组件 拿到quill值
     computed: {
        editor() {
          return this.$refs.myQuillEditor.quill;
        },
      },
    
    这时页面就出现了富文本编辑器

    当我们调用接口保存时,直接存图片,文件会很大,此时要在传图片前拦截图片上传,借助antdesign的上传功能只存一个地址
    首先要拦截图片上传

    1. 先配置编辑器的一些功能(可选部分功能)
      全局变量:
    var toolbarList=[
              ["bold", "italic", "underline", "strike"], // toggled buttons
              ["blockquote", "code-block"],
              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }], // superscript/subscript        
              [{ direction: "rtl" }], // text direction
              [{ size: ["small", false, "large", "huge"] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }], 
              [{ font: [] }],
              [{ align: [] }],
              ["clean"], 
              ["link"], 
              ["image"], 
            ]                
    
    1. data中引用
    data(){
       return {
          content:'', //文本区域内容
          editorOption: { 
           placeholder: "请输入内容...",
           modules: {
                 toolbar: toolbarList,
             }
           },
         },
       }
    }
    
    1. 在mounted中定义此方法,当点击富文本中的上传图片按钮通过JS点击事件触发antdesign的上传功能
         <a-upload
        name="file"
       :multiple="true"
        @change="handleChange"
        :showUploadList='false'
       action="上传图片到地址"
     >
       <a ref="uploader"></a>
     </a-upload>
    
    mounted() {
        var toolbar = this.editor.getModule('toolbar');
        toolbar.addHandler('image', () => {
             this.$refs.uploader.click()
        });
     },
     methods:{
             handleChange(info){
          if (info.file.status !== 'uploading') {
           console.log(info.file, info.fileList);
         }
         if (info.file.status === 'done') {//上传成功在文本区域显示图片
           //info.file.response中可拿到转码后地址
             this.content += `<img src='${this.$absoultSrc(info.file.response)}'/>`
             //this.$absoultSrc()是自己封装的拼接图片路径的方法
         } else if (info.file.status === 'error') {
             this.$message.error(`上传失败`);
         }
        }
     } 
    
    1. 此时就借助了antdesign拦截了原本的图片上传,点击编辑器的上传图片按钮实际出发antdesign的上传功能,使上传的图片文件没那么大
    文本域拖拽图片功能步骤
    1. npm i @felrov/quill-image-resize-module
    2. import { quillEditor ,Quill } from "vue-quill-editor";
    3. Quill.register("modules/imageResize", ImageResize)
    4. import ImageResize from '@felrov/quill-image-resize-module';
    5. 添加imageResize配置对象
    editorOption: {
        placeholder: "请输入内容...",
        modules: {
          toolbar: toolbarList,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        },
      },
    

    此时上传图片时就可在文本域内拖拽调整图片大小
    如果有想在其他组件看到此页面内编辑样式,需在main.js或对应展示的组件内引入

    import "quill/dist/quill.core.css";的css文件
    
    展开全文
  • 强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件,此软件包是Quill的一个薄包装,使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建:比以前更强大,更...
  • Vue 3插件或组件的Quill编辑器。 安装 使用软件包管理器或来安装VueUpQuill。 npm install @vueup/quill --save # OR yarn add @vueup/quill 用法 全局安装 import { createApp } from 'vue' import VueUpQuill ...
  • Vue轻量级富文本编辑器-Vue-Quill-Editor

    万次阅读 多人点赞 2018-09-04 19:51:35
    先看效果图:女神镇楼 下载Vue-Quill-Editor npm install vue-quill-editor --save ... 下载quillVue-Quill-Editor需要依赖) npm install quill --save 代码 <template>...

         

      先看效果图:女神镇楼
          

               

    1. 下载Vue-Quill-Editor
       
      
      npm install vue-quill-editor --save

       

    2. 下载quill(Vue-Quill-Editor需要依赖)
       
      npm install quill --save

       

    3. 代码
       
      <template>
          <div class="edit_container">
              <quill-editor 
                  v-model="content" 
                  ref="myQuillEditor" 
                  :options="editorOption" 
                  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
              </quill-editor>
          </div>
      </template>
      <script>
      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 {
          components: {
              quillEditor
          },
          data() {
              return {
                  content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
                  editorOption: {}
              }
          },
          methods: {
              onEditorReady(editor) { // 准备编辑器
      
              },
              onEditorBlur(){}, // 失去焦点事件
              onEditorFocus(){}, // 获得焦点事件
              onEditorChange(){}, // 内容改变事件
          },
          computed: {
              editor() {
                  return this.$refs.myQuillEditor.quill;
              },
          }
      }
      </script>
      

      OK,搞定,简洁的富文本编辑器就展现在你眼前了,另外附上API。Vue-Quill-Editor

    4. 自定义 toolbar 菜单
       

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

       

    5. 存储及将数据库中的数据反显为HTML字符串

      后台接收到数据后会将字符中的标签进行转码,所以我们要先进行一个解码的操作让他变成标签形式的字符串:
      例如后台接收的数据如下:"&lt;h1&gt;title&lt;"  ,对应解码后就是`<h1>title</h1>`。

      //把实体格式字符串转义成HTML格式的字符串
      escapeStringHTML(str) {
          str = str.replace(/&lt;/g,'<');
          str = str.replace(/&gt;/g,'>');
          return str;
      }

      然后将返回值赋值给对应的参数:
       

      <div v-html="str" class="ql-editor">
          {{str}}
      </div>

      上面的str就是转码函数返回的值,我们要先在data中定义,所以我现在将新增跟展示放在一起,代码如下:

       

      <template>
          <div class="edit_container">
              <!--  新增时输入 -->
              <quill-editor 
                  v-model="content" 
                  ref="myQuillEditor" 
                  :options="editorOption" 
                  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
              </quill-editor>
              <!-- 从数据库读取展示 -->
              <div v-html="str" class="ql-editor">
                  {{str}}
              </div>
          </div>
      </template>
      <script>
      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 {
          components: {
              quillEditor
          },
          data() {
              return {
                  content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
                  str: '',
                  editorOption: {}
              }
          },
          methods: {
              onEditorReady(editor) { // 准备编辑器
      
              },
              onEditorBlur(){}, // 失去焦点事件
              onEditorFocus(){}, // 获得焦点事件
              onEditorChange(){}, // 内容改变事件
              // 转码
              escapeStringHTML(str) {
                  str = str.replace(/&lt;/g,'<');
                  str = str.replace(/&gt;/g,'>');
                  return str;
              }
          },
          computed: {
              editor() {
                  return this.$refs.myQuillEditor.quill;
              },
          },
          mounted() {
              let content = '';  // 请求后台返回的内容字符串
              this.str = this.escapeStringHTML(content);
          }
      }
      </script>
      

      最后提醒大家一句,插件只兼容IE10以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。     

     

    展开全文
  • 我们要实现的功能如下: 步骤一、上传图片 步骤二、剪切图片 步骤三、生成新图片 ...npm install -d vue-quill-editor quill vue-cropper element组件请自行下载并引入 实现代码如下: 第一部分...

    我们要实现的功能如下:

    步骤一、上传图片

    步骤二、剪切图片

    步骤三、生成新图片

    安装组件:我使用Yarn

    yarn add vue-quill-editor quill vue-cropper
    或者使用npm
    npm install -d vue-quill-editor quill vue-cropper
    
    element组件请自行下载并引入

    实现代码如下:

    第一部分:综合组件部分,本文件放置余conponent文件夹下,名为textEditor.vue:

    <template>
        <div>
          <!-- 图片上传组件-->
          <el-upload
            accept="image/*"
            action="192.168.0.108/api/subject/file/upload"
            class="avatar-uploader"
            name="upload"
            :show-file-list="false"
            :before-upload="beforeUpload"
            hidden>
            <el-button size="small" type="primary">点击上传图片 到 文本编辑器</el-button>
          </el-upload>
          <!-- 编辑器组件-->
          <quill-editor 
            class="editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange($event)">
          </quill-editor>
          <!-- 图片裁剪组件-->
          <el-dialog top="5vh" :visible.sync="isShowCropper">
            <VueCropper
              style="height:600px;margin:20px 0"
              ref="cropper"
              :img="option.img"
              :outputSize="option.outputSize"
              :outputType="option.outputType"
              :info="option.info"
              :canScale="option.canScale"
              :autoCrop="option.autoCrop"
              :autoCropWidth="option.autoCropWidth"
              :autoCropHeight="option.autoCropHeight"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
            >
            </VueCropper>
            <br/>
            <el-button type="primary" @click="onCubeImg()">生成图片</el-button>
            <el-button @click="isShowCropper = false">取消</el-button>
          </el-dialog>
        </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 { VueCropper } from "vue-cropper";
      import { ApiFileUploadFile } from '../api';
      import "quill/dist/quill.core.css";
      import "quill/dist/quill.snow.css";
      import "quill/dist/quill.bubble.css";
      
      export default {
        name: 'textEditor',
        components: {
          quillEditor,
          VueCropper
        },
        props: {
          /*编辑器的内容*/
          value: {
            type: String
          },
          /*图片大小*/
          maxSize: {
            type: Number,
            default: 4000 //kb
          }
        },
        data() {
          return {
            // 富文本数据
            content: '',
            quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
            editorOption: {
              theme: "snow", // or 'bubble'
              placeholder: "请输入您想输入的内容",
              modules: {
                toolbar: {
                  container: toolbarOptions,
                  // container: "#toolbar",
                  handlers: {
                    image: function(value) {
                      console.log(value)
                      if (value) {
                        // 触发input框选择图片文件
                        document.querySelector(".avatar-uploader input").click();
                      } else {
                        this.quill.format("image", false);
                      }
                    },
                  }
                }
              }
            },
            // 切图器数据
            option: {
              img: '',                         // 裁剪图片的地址
              info: true,                      // 裁剪框的大小信息
              outputSize: 1,                   // 裁剪生成图片的质量
              outputType: 'png',               // 裁剪生成图片的格式
              canScale: false,                 // 图片是否允许滚轮缩放
              autoCrop: true,                  // 是否默认生成截图框
              autoCropWidth: 150,              // 默认生成截图框宽度
              autoCropHeight: 150,             // 默认生成截图框高度
              fixed: false,                    // 是否开启截图框宽高固定比例
              fixedNumber: [4, 4],             // 截图框的宽高比例
            },
            isShowCropper: false,
          };
        },
        methods: {
          // 上传切图前调用
          beforeUpload(file) {
            this.option.img = URL.createObjectURL(file);
            this.option.autoCropWidth = this.width;
            this.option.autoCropHeight = this.height;
            this.isShowCropper = true;
            return false;
          },
          // 确定裁剪图片
          onCubeImg() {
            // 获取cropper的截图的base64 数据
            this.$refs.cropper.getCropData(data => {
              this.isShowCropper = false
              // 先将显示图片地址清空,防止重复显示
              this.option.img = ''
              // 将剪裁后base64的图片转化为file格式
              let file = this.convertBase64UrlToBlob(data)
              file.name = 'img' + new Date().getTime();
              // 将剪裁后的图片执行上传
              var fd = new FormData();
              fd.append("file", file);
              this.$message.success("图片正在上传");
              ApiFileUploadFile(fd).then(res => {
                // 获取富文本组件实例
                this.$message.success("图片上传成功");
                let quill = this.$refs.myQuillEditor.quill;
                // loading动画消失
                this.quillUpdateImg = false;
                // 如果上传成功
                if (res.data.code == 0) {
                  // 获取光标所在位置
                  if (quill.getSelection()&&quill.getSelection().index) {
                    let length = quill.getSelection().index;
                  }else{
                    let length = 0;
                  }
                  // 插入图片  res.url为服务器返回的图片地址
                  console.log(res)
                  quill.insertEmbed(length, "image", res.data.data.imageUrl);
                  // 调整光标到最后
                  quill.setSelection(length + 1);
                } else {
                  this.$message.error("图片插入失败");
                }
              })
            })
          },
          // 将base64的图片转换为file文件
          convertBase64UrlToBlob(urlData) {
            let bytes = window.atob(urlData.split(',')[1]);//去掉url的头,并转换为byte
            //处理异常,将ascii码小于0的转换为大于0
            let ab = new ArrayBuffer(bytes.length);
            let ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
              ia[i] = bytes.charCodeAt(i);
            }
            return new Blob([ab], { type: 'image/png' });
          },
          onEditorChange() {
            //富文本内容改变事件
            this.$emit("change", this.content);
          },
        },
        mounted() {
          setTimeout(() => {
            this.content = this.value
          },500)
        },
      };
    </script> 
      
    <style>
      .avatar {
        width: 80%;
        height: 80%;
      }
      .editor {
        line-height: normal !important;
        margin-top: 10px;
      }
      .ql-editor {
        height: 300px;
      }
      .editor img {
        width: 200px;
      }
      .ql-toolbar.ql-snow .ql-formats {
        margin-right: 1px;
      }
      .ql-video {
        display: none !important;
      }
      .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>

    第二部分:调用代码,本文件放置于page目录的子文件夹下

    <template>
      <div class="inputwrapper">
        <el-form :model="formData" ref="formData" label-width="100px" class="demo-ruleForm">
            <el-form-item
              style="width: 900px"
              label="标题"
              prop="title"
              :rules="[
                { required: true, message: '标题不能为空'}
              ]"
            >
              <el-input type="text" v-model="formData.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              style="width: 900px"
              label="详情"
              prop="detail"
              :rules="[
                { required: true, message: '详情不能为空'}
              ]"
            >
              <el-input type="text" v-model="formData.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item 
              label="编辑器"
              style="width: 900px"
            >
              <textEditor v-model="formData.content"  v-on:change="editorChange"/>
            </el-form-item>
            <el-form-item style="margin-top: 90px">
              <el-button type="primary" @click="submitForm('formData')">提交</el-button>
              <el-button @click="resetForm('formData')">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
    </template>
    
    <script>
      import textEditor from '../../components/textEditor.vue';
      export default {
        components: {
          textEditor
        },
        data() {
          return {
            formData: {
              title: '',
              detail: '',
              content: '',
            },
          };
        },
        methods: {
          editorChange(value) {
            this.formData.content = value;
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                console.log(this.formData)
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        },
      }
    </script>

    以上为所有代码,欢迎朋友们使用。

    参考文章:https://www.jianshu.com/p/21dab85b7fa8。欢迎指正。

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

    千次阅读 2018-09-23 10:49:13
    基于quilljs实现的支持vue的富文本...vue-quill-editor Toolbar Module - Quill vue-quill-image-upload 图片支持上传服务器并调整大小 在 package.json 中加入 "quill-image-extend-module": "^1...

    基于quilljs实现的支持vue的富文本框编辑器

    更多精彩

    官网

    1. vue-quill-editor
    2. Toolbar Module - Quill
    3. vue-quill-image-upload

    图片支持上传服务器并调整大小

    1. package.json 中加入 "quill-image-extend-module": "^1.1.2" 依赖
    2. 在编辑器组件中引入以下代码
    <template>
      <div class="in-editor-panel">
        <quill-editor ref="quillEditor" v-model="content" :options="editorOption" @change="onChange">
        </quill-editor>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
      import 'quill/dist/quill.core.css'
      import 'quill/dist/quill.snow.css'
      import { quillEditor, Quill } from 'vue-quill-editor'
      import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
      import { hasClass } from 'assets/scripts/dom/dom'
    
      Quill.register('modules/ImageExtend', ImageExtend)
    
      export default {
        props: {
          value: {
            type: String,
            default: ''
          },
          toolbarMode: {
            type: Number,
            default: 0
          },
          placeholder: {
            type: String,
            default: '请输入内容'
          },
          height: {
            type: Number,
            default: 170
          },
          imagePath: {
            type: String,
            default: ''
          }
        },
        data () {
          return {
            content: '',
            toolbars: [
              [
                ['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', false, 'large', 'huge']}],
                [{'header': [1, 2, 3, 4, 5, 6, false]}],
                [{'font': []}],
                [{'color': []}, {'background': []}],
                [{'align': []}],
                ['clean'],
                ['link', 'image', 'video']
              ],
              [
                ['bold', 'italic', 'underline'],
                ['blockquote', 'code-block'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                [{'header': [1, 2, 3, 4, 5, 6, false]}],
                [{'color': []}, {'background': []}],
                [{'align': []}],
                ['link', 'image', 'video']
              ],
              [
                ['bold', 'italic', 'underline'],
                ['blockquote', 'code-block'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                [{'color': []}, {'background': []}],
                ['insert']
              ]
            ],
            editorOption: {
              modules: {
                ImageExtend: {
                  loading: true,
                  name: 'image',
                  size: 2,
                  action: `/api/file/upload/image?filePath=${JSON.stringify(this.imagePath)}`,
                  response: (res) => {
                    return res.data
                  }
                },
                toolbar: {
                  container: [],
                  handlers: {
                    'image': function () {
                      QuillWatch.emit(this.quill.id)
                    }
                  }
                }
              },
              placeholder: this.placeholder
            }
          }
        },
        computed: {
          editor () {
            return this.$refs.quillEditor.quill
          }
        },
        watch: {
          // 监听父组件传入的内容
          value (newVal) {
            this.$nextTick(() => {
              this._listenerImage()
            })
    
            if (newVal === this.content) {
              return false
            }
    
            // 传入的内容不等于编辑器自身内容,则更新
            this.content = newVal
          },
          'content' () {
            this._listenerImage()
          }
        },
        created () {
          // 指定工具栏
          this.editorOption.modules.toolbar.container = this.toolbars[this.toolbarMode]
        },
        mounted () {
          // 设置编辑器高度
          this.editor.container.style.height = `${this.height}px`
        },
        methods: {
          // 显示宽度修改框
          _showWidthBox (event) {
            // 获取当前图片对象
            let currentImg = event.target
    
            // 弹出宽度输入框
            this.$prompt('请输入宽度', '提示', {
              inputValue: currentImg.width,
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(({value}) => {
              // 赋值新宽度
              currentImg.width = value
            }).catch(() => {})
          },
          // 监听图片点击
          _listenerImage () {
            // 获取DOM对象
            let editor = document.getElementsByClassName('ql-editor')[0]
            let img = editor.getElementsByTagName('img')
    
            // 非空验证
            if (img.length === 0) {
              return
            }
    
            for (let i = 0; i < img.length; i++) {
              let currentImg = img[i]
    
              // 绑定且防止重复绑定
              currentImg.removeEventListener('dblclick', this._showWidthBox, false)
              currentImg.addEventListener('dblclick', this._showWidthBox, false)
            }
          },
          onChange () {
            // 告知父组件内容发生变化
            this.$emit('input', this.content)
          }
        },
        components: {
          quillEditor
        }
      }
    </script>
    
    展开全文
  • vue-quill-editor 将 quill 封装成了vue 插件,赞
  • 1、下载Vue-Quill-Editor npm install vue-quill-editor --save 2、下载quillVue-Quill-Editor需要依赖) npm install quill --save 3、代码 <template> <div class="edit_container"> <quill-...
  • vue-quill-editor Toolbar Module - Quill vue-quill-image-upload 图片支持上传服务器并调整大小 1.在 package.json 中加入 “quill-image-extend-module”: “^1.1.2” 依赖 2.在编辑器组件中引入以下代码 <...
  • 安装 npm install vue-quill-editor --save npm install quill –save 2.在所需页面进行按需引入 创建文件组件 components/quill.vue 部分代码如下: 上传图片 效果图如下: (默认编辑器有很多icon ,各取所需) ...
  • vue-quill-editor' import 'quill-emoji/dist/quill-emoji' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' ...
  • npm install vue-quill-editor --save npm install quill-image-resize-module quill-image-drop-module --save main.js import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor) vue页面: &...
  • npm i vue-quill-editor --save npm i vue-quill --save 2.注册 入口文件main.js import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.cs...
  • vue-quill-editor Toolbar Module - Quill vue-quill-image-upload 图片支持上传服务器并调整大小 1.在 package.json 中加入 "quill-image-extend-module": "^1.1.2" 依赖 2.在编辑器组件中引入以下代码 <...
  • 1. 富文本效果 ...2. npm 安装vue-quill-editor vue-quill-editor 3. 组件代码 <template> <div> <div class="crumbs"> <el-breadcrumb separator="/"> <el...
  • ? Quill editor component for Vue2,基于Quill、适用于Vue2的富文本编辑器
  • 1、下载Vue-Quill-Editor npm install vue-quill-editor --save 2、下载quillVue-Quill-Editor需要依赖) npm install quill --save # 新建一个 quill.vue <template> <div><quill-editor v-...
  • 安装vue-quill-editor npm install vue-quill-editor -S 安装quill npm install quill -S 页面引用 import {quillEditor} from “vue-quill-editor”; //调用编辑器 import ‘quill/dist/quill.core.css’; import ...
  • 官网地址:Vue-Quill-Editor 下载安装vue-quill-editor npm install vue-quill-editor --save 安装quill npm install quill --save 在页面中引入 import { quillEditor } from 'vue-quill-editor' // 调用富...
  • vue-quill-editor是个较为轻量级富文本,但是在使用vue-quill-editor我们会发现,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,而且也不方便我们...
  • npm install vue-quill-editor --save 2、使用 引入vue-quill-editor import { quillEditor } from 'vue-quill-editor' <quill-editor ref="myTextEditor" :content="content"//内容对应的字段
  • vue 富文本 vue-quill-editor element-ui 配置图片上传 解决富文本图片为base64的问题 解决思路 把之前的上传图片的节点复制替换 注册事件,事件调用 element-ui的上传节点的点击事件,获取之前的光标位置editor....
  • 1.安装 npm install vue-quill-...import { quillEditor } from 'vue-quill-editor' components: { quillEditor }, 3.使用 &lt;quill-editor v-model="blogContext" //编辑器内容字段 ...
  • vue-quill-editor

    2021-03-30 10:38:26
    npm install vue-quill-editor --save 在那个组件中用就在那个组件中引入 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } ...
  • 关于vue集成quillEditor

    2020-10-27 00:00:32
    关于vue集成 ...1.安装,vue运行npm install vue-quill-editor --save安装依赖 2.在使用的vue文件必定引入三个js文件 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow....
  • 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/...
  • npm install vue-quill-editor --save 2.全局注入 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill....
  • 第一步:安装vue-quill-editor npm ivue-quill-editor 第二步:在main.js中引用 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' ...

空空如也

空空如也

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

quillvue

vue 订阅