精华内容
下载资源
问答
  • 强大的文本编辑器的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 ...
  • import { quillEditor , Quill } from 'vue3-quill' import customQuillModule from 'customQuillModule' Quill . register ( 'modules/customQuillModule' , customQuillModule ) app . use ( quillEditor ) 或者 ...
  • 这个富文本编辑器在vue3.0项目中一直保存,怎么破。。。
  • 前段时间在项目中有这样一个需求: 1:要求用户在输入文字的过程中可以引用变量,并且可以插入到任意的位置。...随后经过调研,选择了github上start 25k的quill。 下面就来说一个我的使用方案吧。 ...

    前段时间在项目中有这样一个需求:
    1:要求用户在输入文字的过程中可以引用变量,并且可以插入到任意的位置。
    2:引用的变量要求是一个整体,删除的话必须整体删除。不能在一个变量的中间插入其他的文字。
    3:引用的变量和输入的文字在样式上也要有区别。

    拿到这样一个需求,第一个想到的就是需要使用富文本编辑器。随后经过调研,选择了github上start 25k的quill。

    下面就来说一个我的使用方案吧。
    1:因为项目使用的框架为vue所以下载安装vue-quill-editor:npm install vue-quill-edito
    2:引入到组件中使用,需要以下两个部分:

    • 头部引入
    import { quillEditor} from 'vue-quill-editor';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    
    • 作为components引入该组件
        components: {
       	 QuillEditor: quillEditor,
        },
    

    3:这样就可以在项目中使用quillEditor了。

    <QuillEditor
        ref="editor"
        v-model="desc"
     >
    

    到这里我们就可以使用quill富文本编辑器了,可以给它设置官网上的所有的属性和方法。官网地址
    接下来就是要满足产品的需求。
    1:插入变量。quill提供了可以自定义标签的方法,具体操作如下:
    新建一个js文件。这里我取名叫quill.js,自定义的标签名叫ruleVariates。这个文件是需要引入到vue组件中。

    import { Quill } from 'vue-quill-editor';
    const Embed = Quill.import('blots/embed');
    // 拿到内嵌
    class ruleVariates extends Embed {
      static blotName = 'ruleVariates';
      static tagName = 'ruleVariates';
      static create(value) {
        if (!value.split) return super.create('')
        let val = value.split(',')
        const node = super.create(val[0]);
        node.innerHTML = val[0];
        node.setAttribute('logType', val[0]);
        return node;
      }
    }
    // 注册
    Quill.register(ruleVariates)
    

    我们可以通过setAttribute给这个变量设置属性,设置的属性和我们平时使用的class,id是一样的。
    上面我就是给这个自定义标签设置了logType这个属性。
    2:变量设置好了,那就需要把它插入到设定的位置。

    • 获取要插入到的位置
      quill提供了focus这个方法,可以获取当前的焦点位置。如果没有焦点的话,就默认是0。但是这里如果当度使用focus方法是会存在一些问题,必须搭配selection-change方法一起使用。具体原因的话我也不是很清楚。
    	<QuillEditor
              ref="editor"
              v-model="desc"
              :options="descObj.editorOption"
              @selection-change="descFocus"
              @focus="descFocus"
            >
    
        descFocus(){
          const quill = this.$refs['editor'].quill;
          this.descRage = quill.getSelection();
        },
    

    这个时候descRage的index属性就是当前的焦点的位置。

    • 将变量插入到焦点的位置
        addVarToText() {
          this.$nextTick(() => {
            const quill = this.$refs['editor'].quill;
            const range = this.descRage;
            let message = '';
            if (!range) {
              message = '请先点击到文本框!';
            } else {
              quill.insertEmbed(range.index, 'ruleVariates', 'logType',
            }
          })
        },
    

    这时候这里的logType就会作为ruleVariates标签的logType属性的值。
    到这里我们就已经将功能实现了90%了。因为ruleVariates标签是一个整体,所以删除的时候整个变量都会被删除。

    3: 最后一步,给变量设置样式。
    直接在css中操作就可以啦!

    rulevariates {
      color: #1596f0;
      font-weight: 700;
    }
    

    好啦现在就大功告成了。bingo

    展开全文
  • 从0开始在vue项目中使用quill编辑器

    千次阅读 2020-08-27 14:44:01
    快速、便捷的创建在vue cli中使用quill。 参考资料: quill中文文档 1: 找一个文件夹 输入vue create quill-editor(前提是电脑上已经安装了cli) 按回车,出现提示。问你项目配置,没有特殊需求直接继续按...

    快速、便捷的创建在vue cli中使用quill。
    参考资料: quill中文文档
    在线示例: 点我预览
    github仓库地址:https://github.com/font-size/vue-quill-simple-demo

    1: 找一个文件夹

    • 输入vue create quill-editor(前提是电脑上已经安装了cli
      在这里插入图片描述

    • 按回车,出现提示。问你项目配置,没有特殊需求直接继续按回车,默认配置走起。

    在这里插入图片描述

    • 静等几分钟,提示完成了

    在这里插入图片描述

    • 接下来自然是打开vscode

    在这里插入图片描述

    2:简单的quill实例

    在这里插入图片描述

    • ctrl+shift+~ 打开终端,安装quill。输入npm i quill@1.3.6 --save

    在这里插入图片描述

    • 在tempalte里删掉原来的代码,写入
       <div class="quill-editor">
          <div id="toolbar" slot="toolbar">
          <div class="editor" ref="editor"></div>
        </div>
    
    • 接着引入quill依赖
      // 引入原始组件
      import * as Quill from 'quill'
      // 引入核心样式和主题样式
      import 'quill/dist/quill.core.css'
      import 'quill/dist/quill.snow.css'
    

    大致是这样
    在这里插入图片描述

    • 接着在data里定义个option,作为quill的配置项
    	 quill: null,
          options: {
            theme: 'snow',
            modules: {
              // 工具栏的具体配置
              toolbar:  [
                ['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
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction
                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean']                                         // remove formatting button
              ],
            },
            placeholder: '请输入内容...'
    

    在这里插入图片描述

    • 创建quill
     let editorDom = this.$el.querySelector('.editor')
     // 初始化编辑器
     this.quill = new Quill(editorDom, this.options)
    

    在这里插入图片描述

    • 基本完成了

    我们npm run serve一下
    在这里插入图片描述
    高度有点问题,我们在css里加上高度。
    在这里插入图片描述
    一个基本的quill编辑器就这样完成了
    在这里插入图片描述

    3:关于toolbar配置

    options中的toolbar可以写一个node节点

    • 在template中写一个toolbar
    		<div id="toolbar">
    		  <span class="ql-formats">
                <select class="ql-font"></select>
                <select class="ql-size"></select>
              </span>
              <span class="ql-formats">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
                <button class="ql-strike"></button>
              </span>
              <span class="ql-formats">
                <select class="ql-color"></select>
                <select class="ql-background"></select>
              </span>
              <span class="ql-formats">
                <button class="ql-script" value="sub"></button>
                <button class="ql-script" value="super"></button>
              </span>
              <span class="ql-formats">
                <button class="ql-header" value="1"></button>
                <button class="ql-header" value="2"></button>
                <button class="ql-blockquote"></button>
                <button class="ql-code-block"></button>
              </span>
              <span class="ql-formats">
                <button class="ql-list" value="ordered"></button>
                <button class="ql-list" value="bullet"></button>
                <button class="ql-indent" value="-1"></button>
                <button class="ql-indent" value="+1"></button>
              </span>
              <span class="ql-formats">
                <button class="ql-direction" value="rtl"></button>
                <select class="ql-align"></select>
              </span>
              <span class="ql-formats">
                <button class="ql-link"></button>
                <button class="ql-image"></button>
                <button class="ql-video"></button>
                <button class="ql-formula"></button>
              </span>
              <span class="ql-formats">
                <button class="ql-clean"></button>
              </span>
            </div>  
    

    在这里插入图片描述
    可以自定义图标,比如新加一个quill中没有的图标,如秀米。

    • 我们新建一个
     <button id="custom-button-xiumi" title="秀米" @click="showmi"></button>
    

    在这里插入图片描述
    加样式

    #custom-button-xiumi{
      background-size: contain;
      background-repeat: no-repeat;
      height: 16px;
      margin-top: 4px;
      width: 33px;
      padding-right: 8px;
      background-position: center;
      position: relative;
    }
    #custom-button-xiumi {
      background-image: url('http://xiumi.us/connect/ue/xiumi-connect-icon.png');
    }
    #custom-button-xiumi:hover {
      background-image: url('http://xiumi.us/connect/ue/xiumi-connect-icon.png');
    }
    
    • 完成

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200827141437922.png#pic_center

    4:数据双向绑定

    • 在创建quill实例的时候加监听方法
    // 初始化编辑器
        _initEditor () {
          // 获取编辑器的DOM容器
          let editorDom = this.$el.querySelector('.editor')
          // 初始化编辑器
          this.quill = new Quill(editorDom, this.options)
          this.quill.on('text-change', () => {
            this.emitChange()
            this.selection = this.quill.getSelection()
          })
        },
        // 更新text-change
        emitChange() {
          let html = this.$refs.editor.children[0].innerHTML
          const quill = this.quill
          const text = this.quill.getText()
          if (html === '<p><br></p>') html = ''
          this.$emit('input', html)
          this.$emit('change', { html, text, quill })
          this.$emit("getConetntLength", this.quill.getLength())
        }
    
    • 然后搬家

    把app.vue的内容搬到src/components/quill.vue
    在这里插入图片描述

    • 修改app.vue页面代码

    改成
    在这里插入图片描述

    • 完成

    在编辑器中输入文字,已经双向绑定成功
    在这里插入图片描述

    5:自定义quill样式

    quill自带的字体大小只有几种,如果我要更多的字体大小。怎么做呢

    • 首先在toolbar中定义
     		<select class="ql-size toolbarButton">
              <option value="14px">14px</option>
              <option value="16px">16px</option>
              <option value="18px">18px</option>
              <option selected>默认</option>
              <option value="22px">22px</option>
              <option value="24px">24px</option>
              <option value="26px">26px</option>
              <option value="28px">28px</option>
            </select>
    

    已经有了选项
    在这里插入图片描述

    • 给字体大小设置效果
      通过插件方法,添加样式
      在这里插入图片描述
      1:定义字体样式列表
      2:添加字体白名单
      3:注册字体大小
      在这里插入图片描述
      我们发现给字体设置大小后,在样式上出现了这个ql-size-28px。聪明的小伙伴应该知道了接下来改怎么做了。
    • 新建quillSize.css文件
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=14px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=14px]::before {
        font-size: 14px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=16px]::before,
    .ql-snow .ql-picker.ql-size  .ql-picker-item[data-value=16px]::before {
    	font-size: 16px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=18px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=18px]::before {
    	font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=20px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=20px]::before {
    	font-size: 20px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=22px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=22px]::before {
    	font-size: 22px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=24px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=24px]::before {
    	font-size: 24px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=26px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=26px]::before {
    	font-size: 26px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=28px]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=28px]::before {
    	font-size: 28px;
    }
     
    .ql-container {
        font-size:20px;
    }
    .ql-size-26px {
      	font-size: 26px;
    }
    .ql-size-28px {
    	font-size: 28px;
    }
    .ql-size-24px {
      	font-size: 24px;
    }
    .ql-size-22px {
      	font-size: 22px;
    }
    .ql-size-20px {
      	font-size: 20px;
    }
    .ql-size-18px {
      	font-size: 18px;
    }
    .ql-size-16px {
      	font-size: 16px;
    }
    .ql-size-14px {
      	font-size: 14px;
    }
    
    • 在quill.vue里导入css

    在这里插入图片描述

    • 完成
      在这里插入图片描述
    • 同理也可以实现更多的字体font-family
      新增toobar
      在这里插入图片描述
    let fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];  
    let Font = Quill.import('formats/font');  
    Font.whitelist = fonts; //将字体加入到白名单 
    Quill.register(Font, true);
    

    这是相关样式
    在这里插入图片描述

    6:样式过滤问题

    quill会过滤大部分样式,只保留p、span、h1等几个常用标签,某种程度上是简洁的代名词,但有时候又成了缺陷。通过自定义一个blot,阻止目标文本的样式被过滤。
    参考这篇文章: 在quill编辑器中集成秀米和135编辑器

    展开全文
  • Vue-cli3整合Quill富文本编辑器

    千次阅读 热门讨论 2019-10-24 09:18:06
    其实vue能整合的富文本有很多,最好的应该是tinymce这款,但是这款在我们使用过程中,发现一个问题就是:同一个页面多个使用的时候,会有回显不正常的问题,图层错乱的问题,具体项目具体可能问题不一样。...

    一、背景

    我们在开发后台管理系统的时候,通常会用到富文本,比如公告啦,新闻啦,各种图文详情啊等。其实vue能整合的富文本有很多,最好的应该是tinymce这款,但是这款在我们使用过程中,发现一个问题就是:同一个页面多个使用的时候,会有回显不正常的问题,图层错乱的问题,具体项目具体可能问题不一样。但是遇到了就记录在这里。所以我们之后就换了一个新的quill editor,感觉还不错,解决了上述问题:

    二、整合过程

    当然了,得先初始化一个vue-cli3的项目,这里就不初始化了,不是重点。几乎是一搜一堆哦。

    2.1 项目根目录下执行以下命令,安装quill和vue-quill-editor

    $ npm install quill --save
    
    $ npm install vue-quill-editor --save
    
    

    2.2 在src/components下新建quilleditor包,并在其下新建quill-editor.vue,目录如下:

    在这里插入图片描述

    2.3 在新建的quill-editor.vue文件中,添加如下代码

    <template>
      <div>
        <!-- 图片上传组件:这里整合的是elementUI的组件-->
        <el-upload
            class='avatar-uploader'
            :action='serverUrl'
            name='file'
            :headers='header'
            :show-file-list='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>
    // 需要引入的文件
    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'] // 链接、图片、视频 ['link', 'image', 'video']
    ]
    
    export default {
      props: {
        /* 编辑器的内容 */
        value: {
          type: String
        },
        /* 图片大小 */
        maxSize: {
          type: Number,
          default: 1024 * 5 // kb
        }
      },
      components: {
        quillEditor
      },
      data () {
        return {
          content: this.value,
          quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
          editorOption: {
            theme: 'snow', // or 'bubble'
            placeholder: '请在这里输入...',
            modules: {
              toolbar: {
                container: toolbarOptions,
                handlers: {
                  // 处理图片上传
                  image: function (value) {
                    if (value) {
                      // 触发input框选择图片文件
                      document.querySelector('.avatar-uploader input').click()
                    } else {
                      this.quill.format('image', false)
                    }
                  }
                }
              }
            }
          },
          serverUrl: `${window.SITE_CONFIG['apiURL']}/demo/upload/upload?type=1&token=${Cookies.get('token')}`, // 这里写你要上传的图片服务器地址
          imageBaseUrl: `${window.SITE_CONFIG['imgBaseUrl']}`, // 这里写你要上传的图片服务器地址
          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 === 0) {
            this.$message.success('图片上传成功')
            // 获取光标所在位置
            let length = quill.getSelection().index
            // 插入图片  res.url为服务器返回的图片地址,需要拼接图片服务根地址
            quill.insertEmbed(length, 'image', this.imageBaseUrl + res.data)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else {
            this.$message.warning('图片插入失败')
          }
          // loading动画消失
          this.quillUpdateImg = false
        },
        // 富文本图片上传失败
        uploadError () {
          // loading动画消失
          this.quillUpdateImg = false
          this.$message.warning('图片插入失败')
        }
      }
    }
    </script>
    <!-- 富文本样式,需要加哦,不然有问题 -->
    <style>
      .editor {
        line-height: normal !important;
        height: 300px;
      }
      .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,然后就可以使用了,具体代码如下:

    <template>
      <div>
        <div>
          <div>QuillEditor</div>
          {{content}}
          <QuillEditor v-model="content"></QuillEditor>
        </div>
        <br>
        <hr>
        <br>
      </div>
    </template>
    
    <script>
    // 注意这边的路径,按照自己项目引入的实际路径引入即可
    import QuillEditor from '../../components/quilleditor/quill-editor'
    export default {
      components: {
        QuillEditor // 组件还是要写的,和import名保持一致。
      },
      data () {
        return {
          content: '' // 富文本绑定的参数
        }
      },
      methods: {
      	
      }
    }
    </script>
    
    

    四、效果

    启动项目,访问地址,得到如下效果就可以了。
    在这里插入图片描述
    简单输入一些文字看下效果:
    在这里插入图片描述
    END

    展开全文
  • Vue3使用富文本编辑器QuillEditor

    千次阅读 2021-04-09 15:38:33
    vue-quill-editor似乎对于vue3没有较好支持,或者是我水平太差不会用。这里推荐使用vue-quill。官网地址https://vueup.github.io/vue-quill/guide/usage.html#in-single-file-component 1、安装。在控制面板中查找...

     

    vue-quill-editor似乎对于vue3没有较好支持,或者是我水平太差不会用。这里推荐使用vue-quill。官网地址https://vueup.github.io/vue-quill/guide/usage.html#in-single-file-component

    1、安装。在控制面板中查找依赖,@vueup/vue-quill进行安装,即下图中的第2个。或者使用命令行进行安装

    npm install @vueup/vue-quill@alpha --save

    2.配置。在main.js文件中按如下方式导入

    import { createApp } from 'vue'
    import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css';
    
    const app = createApp()
    app.component('QuillEditor', QuillEditor)

    或者在需要使用的组件文件中导入

    import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css';
    
    export default {
      components: {
        QuillEditor
      }
    }

    3.在vue文件中使用。

     

    <QuillEditor theme="snow" />
    4.效果如图。

    虽然简陋,但是使用方便,更多配置项见官网 

     

    展开全文
  • npm install vue-quill-editor --save 2 vue-ui可视化安装 项目终端输入vue-ui打开可视化界面 选中依赖项如图: 然后右上角点安装依赖 如图 选中运行依赖并且输入vue-quill-editor插件名称 如图标注: 点击安装...
  • VUE 引入用Quill 富文本

    2019-09-17 17:18:10
    在你的项目终端运行 ( npm install vue-quill-editor --save); (第二步:) 等上一步运行完成以后 在项目中找到 (src/main.js) 文件里引入( import VueQuillEditor from ‘vue-quill-editor’ )具体操作看图 ...
  • vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求。但是,最近项目中,需要在富文本中上传音频文件,但是vue-quill-editor这个富文本仅支持图片,视频上传;所以这个功能需要自定义。 ...
  • vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html...
  • 主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了VueQuill富文本编辑器的使用教程,包括自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小等使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一、 Vue中使用quill-editor之初体验 二、 Vue中使用quill-editor之修改工具栏(toolbar) 三、Vue中使用quill-editor之增加字体和文字大小 四、Vue中使用quill-editor之二次封装quill-editor 文章目录系列文章目录...
  • quill的扩展vue-quill-editor的文字大小和文字字体只有那几种,并且无法添加,修改quill依赖包下的源码后,支持12/14/16/18/20/24/28/32/36像素大小文字设置,支持黑体,微软雅黑,楷体,宋体,隶书、arial、...
  • 主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue-quill-editor实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近在用vue + element ui写一个小应用要用到富文本编辑器,以前做项目都一直都用ueditor,但是看了一下它与vue的兼容性并不好,又对比了几个后,选择了vue-quill-editor。 vue-quill-editor基于Quill、适用于 Vue ...
  • 本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下 先看效果图:    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quillVue-Quill-Editor...
  • Vue注意事项之|使用vue-quill-editor 最近开始过渡vuecli3,感觉cli3确实比cli2简化了许多配置,取消了webpack.config.js的配置,改为自定义的vue.config.js,几乎可以0配置就可以开始工作,具体关于cli3的配置可见...
  • 我不知道我将要去何方,但我已经在路上 前端QQ群: 981668406 在此附上我的QQ: 2489757828 有...如何使用看这篇文章 vue-quill-editor使用 import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.core.css'; im
  • vue2使用vue-quill-editor

    2017-08-16 15:42:00
    一、npm install vue-quill-editor npm install quill 二、index.js引入 import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor) 三、components文件夹新建xx.vue 写法 <!-- Or manually ...
  • npm install vue-quill-editor --save 安装调节图片大小插件(不是必须的,看需求) npm install quill-image-resize-module -S 二、 引用(两种方式) 全局引用 在main.js中填入以下代码 import Vue from 'vue' ...
  • vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大。 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-...
  • vue-quill-editor是个较为轻量级富文本,但是在使用vue-quill-editor我们会发现,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,而且也不方便我们...
  • 今天来优化下Vue-Quill-Editor富文本编辑器,在编辑的工具栏中我们可以看到各式各样的图标,很多时候我们容易忘记图标对应的功能是什么,所以这里我们为其添加文字提示,当我将鼠标放到图标上时显示对应的功能提示,...
  • 主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

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

quillvue

vue 订阅