精华内容
下载资源
问答
  • 强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件,此软件包是Quill的一个薄包装,使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建:比以前更强大,更...
  • VueUpQuill Vue 3插件或组件的Quill编辑器。 安装 使用软件包管理器或来安装VueUpQuill。 npm install @vueup/quill --save ...import { QuillEditor } from '@vueup/quill' import '@vueup/quill/
  • 本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下 先看效果图:    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quillVue-Quill-Editor...
  • 主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • quill的扩展vue-quill-editor的文字大小和文字字体只有那几种,并且无法添加,修改quill依赖包下的源码后,支持12/14/16/18/20/24/28/32/36像素大小文字设置,支持黑体,微软雅黑,楷体,宋体,隶书、arial、...
  • 主要为大家详细介绍了vue-quill-editor实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue-quill-editorvue项目中常用的富文本插件,其功能能满足大部分的项目需求。但是,最近项目中,需要在富文本中上传音频文件,但是vue-quill-editor这个富文本仅支持图片,视频上传;所以这个功能需要自定义。 ...
  • 官网:Vue-Quill-Editor 官网中的几个案例的代码戳这里查看 1. 安装vue-quill-editor npm install vue-quill-editor -S 2. 安装quill npm install quill -S 3. 引入 import { quillEditor } from '...

    官网:Vue-Quill-Editor
    官网中的几个案例的代码戳这里查看

    1. 安装vue-quill-editor

    npm install vue-quill-editor -S
    

    2. 安装quill

    npm install quill -S
    

    3. 引入

    import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
    import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
    //import 'quill/dist/quill.core.css'
    //import 'quill/dist/quill.bubble.css'
    import * as Quill from 'quill'; // 富文本基于quill
    

    4. To use

    <!-- template部分 -->
    <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @focus="onEditorFocus($event)"
        @blur="onEditorBlur($event)"
        @change="onEditorChange($event)">
    </quill-editor>
    
    <!-- js data部分 -->
    editor: null,   // 富文本编辑器对象
    content: `<p></p><p><br></p><ol></ol>`, // 富文本编辑器默认内容
    editorOption: { //  富文本编辑器配置
        modules: {
            toolbar: '#toolbar'
        },
        theme: 'snow',
        placeholder: '请输入正文'
    },
    
    <!-- js mounted部分 -->
    this.editor = this.$refs.myQuillEditor.quill;
    
    <!-- js beforeDestroy部分 -->
    this.editor = null;
    delete this.editor;
    
    <!-- js methods部分 -->
    // 准备富文本编辑器
    onEditorReady (editor) {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur (editor) {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus (editor) {},
    // 富文本编辑器 内容改变事件
    onEditorChange (editor) {},
    
    <!-- js components部分 -->
    components: {
        quillEditor
    }
    

    5. 如果想自定义工具栏:

    <!-- template部分 -->
    <div id="toolbar" slot="toolbar">
        <button class="ql-bold" title="加粗">Bold</button>
        <select class="ql-header" title="段落格式">
            <option selected>正文</option>
            <option value="2">标题1</option>
            <option value="3">标题2</option>
            <option value="4">标题3</option>
        </select>
        <button class="ql-list" value="ordered" title="有序列表"></button>
        <button class="ql-list" value="bullet" title="无序列表"></button>
        <select class="ql-color" value="color" title="字体颜色"></select>
        <span class="icon-pic custom-icon" title="图片" @click="insertImgClick($event)"></span>  <!-- 插入图片 -->
        <span class="icon-video custom-icon" title="视频" @click="insertImgClick($event)"></span>  <!-- 插入视频 -->
    </div>
    <input style="display: none;" type="file" id="insert_image" @change="fileInsert($event)">  <!-- 选择图片input -->
    <input style="display: none;" type="file" id="insert_video" @change="fileInsert($event)">  <!-- 选择视频input -->
    
    <!-- js methods部分 -->
    // 富文本编辑器 点击插入图片或者视频
    insertImgClick (e) {
        if (e.target.className.indexOf('icon-pic') != -1) {
            document.getElementById('insert_image').click();
        } else if (e.target.className.indexOf('icon-video') != -1) {
            document.getElementById('insert_video').click();
        }
    },
    // 富文本编辑器 点击插入图片或者视频上传并预览
    fileInsert (e) {
        var oFile = e.target.files[0];
        if (typeof (oFile) === 'undefined') {
            return;
        }
        let sExtensionName = oFile.name.substring(oFile.name.lastIndexOf('.') + 1).toLowerCase();   // 文件扩展名
        let sfileType = ''; // 上传文件类型
        if (e.target.id == 'insert_image') {
            sfileType = 'image'
            if (sExtensionName !== 'png' && sExtensionName !== 'jpg' && sExtensionName !== 'jpeg') {
                alert('不支持该类型图片');
                return;
            }
        }
        if (e.target.id == 'insert_video') {
            sfileType = 'video';
            if (sExtensionName !== 'mp4' && sExtensionName !== 'avi' && sExtensionName !== 'mov') {
                alert('不支持该类型视频');
                return;
            }
            let maxSize = 100*1024*1024;    // 100MB
            if (oFile.size > maxSize) {
                alert('上传视频大小不能超过100MB');
                return;
            }
        }
        var reader = new FileReader();
        reader.readAsDataURL(oFile);
        reader.onloadend = () => {
            let formData = new FormData(); // 通过formdata上传
            formData.append('file', oFile);
            let sUrl = '';
            if (sfileType == 'image') {
                sUrl = 'Pic';
            }
            if (sfileType == 'video') {
                sUrl = 'Vie';
            }
            var url = this.api_config + '/dealerIndex/upload' + sUrl + '.htm';
            this.axios.post(url, formData, {
                headers: { 'Content-Type': 'multipart/form-data' }
            }).then((res) => {
                this.editor.insertEmbed(this.editor.selection.savedRange.index, sfileType, res.data.data);  // 这个方法用来手动插入dom到编辑器里
                let isAndroid = this.$is_android(); // 判断是ios还是android
                if (isAndroid) {
                    $('video').removeAttr('controls');
                    $('video').attr('x5-video-player-type', 'h5');
                }
                this.editor.setSelection(this.editor.selection.savedRange.index + 1);  // 这个方法可以获取光标位置
            }).catch((response) => {
                console.log('失败', response);
            })
        }
    },
    

    关于编辑器里面的一些操作可以到quill官方查看,用法和配置项的的介绍很详细,很好用

    6. 如果想更好地操作插入的video,可以把iframe改成h5的video,通过下面这段代码:

    import { Quill } from 'vue-quill-editor'
    
    // 源码中是import直接倒入,这里要用Quill.import引入
    const BlockEmbed = Quill.import('blots/block/embed')
    const Link = Quill.import('formats/link')
    
    const ATTRIBUTES = ['height', 'width']
    
    class Video extends BlockEmbed {
      static create (value) {
        const node = super.create(value)
        // 添加video标签所需的属性
        node.setAttribute('controls', 'controls')   // 控制播放器
        node.setAttribute('type', 'video/mp4')
        node.setAttribute('style', 'object-fit:fill;width: 100%;')
        node.setAttribute('preload', 'auto')    // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频
        node.setAttribute('webkit-playsinline', 'true') // 兼容ios 不全屏播放
        node.setAttribute('playsinline', 'true')
        node.setAttribute('x-webkit-airplay', 'allow')
        // node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性
        node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏
        node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放
        node.setAttribute('x5-video-player-fullscreen', 'true')    // 全屏设置,设置为 true 是防止横屏
        node.setAttribute('src', this.sanitize(value))
        return node
      }
    
      static formats (domNode) {
        return ATTRIBUTES.reduce((formats, attribute) => {
          if (domNode.hasAttribute(attribute)) {
            formats[attribute] = domNode.getAttribute(attribute)
          }
          return formats
        }, {})
      }
    
      static sanitize (url) {
        return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
      }
    
      static value (domNode) {
        return domNode.getAttribute('src')
      }
    
      format (name, value) {
        if (ATTRIBUTES.indexOf(name) > -1) {
          if (value) {
            this.domNode.setAttribute(name, value)
          } else {
            this.domNode.removeAttribute(name)
          }
        } else {
          super.format(name, value)
        }
      }
    
      html () {
        const { video } = this.value()
        return `<a href="${video}">${video}</a>`
      }
    }
    Video.blotName = 'video' // 这里不用改,楼主不用iframe,直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot
    Video.className = 'ql-video'
    Video.tagName = 'video' // 用video标签替换iframe
    
    export default Video
    

    然后再把它引入到有编辑器的那个文件里:

    import Video from '../../plugins/video.js'; // 插入h5 video视频
    Quill.register(Video, true);  // 注册video
    

    顺便推荐下我的小说网站,欢迎收藏哟

    虫鱼小说网

    知秋小说网 

    展开全文
  • import { quillEditor , Quill } from 'vue3-quill' import customQuillModule from 'customQuillModule' Quill . register ( 'modules/customQuillModule' , customQuillModule ) app . use ( quillEditor ) 或者 ...
  • vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大。 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-...
  • QuillEditor.vue

    2021-10-21 16:21:43
    editor qull vue 封装 解决图片上传
  • vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html...
  • 最近在用vue + element ui写一个小应用要用到富文本编辑器,以前做项目都一直都用ueditor,但是看了一下它与vue的兼容性并不好,又对比了几个后,选择了vue-quill-editorvue-quill-editor基于Quill、适用于 Vue ...
  • 1. 富文本效果 ...2. npm 安装vue-quill-editor vue-quill-editor 3. 组件代码 <template> <div> <div class="crumbs"> <el-breadcrumb separator="/"> <el...

    最近vue项目用到了富文本,选了好多不合适,最后还是用了quillEditor 记录下遇到的问题,下次直接用就号了。

    这是基础模版有两个遗留问题:

    1. 图片默认是base64图片,怎么为自己接口调用的地址
    2. 默认是英文,怎么汉化

    解决方案参考:(vue Vue-Quill-Editor 基于Quill、适用于Vue的富文本编辑器(二)解决图片上传base64,汉化文字问题

    1. 富文本效果

    在这里插入图片描述

    2. npm 安装vue-quill-editor

    vue-quill-editor
    

    3. 组件代码

    <template>
        <div>
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                    <el-breadcrumb-item>编辑器</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container"   width="200px">
                <div class="plugins-tips">
                    Vue-Quill-Editor:基于Quill、适用于Vue2的富文本编辑器。
                    访问地址:<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
                </div>
                <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
                <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
            </div>
        </div>
    </template>
    
    <script>
        import 'quill/dist/quill.core.css';
        import 'quill/dist/quill.snow.css';
        import 'quill/dist/quill.bubble.css';
        import { quillEditor } from 'vue-quill-editor';
        export default {
            name: 'editor',
            data: function(){
                return {
                    content: '',
                    editorOption: {
                        placeholder: 'Hello World'
                    }
                }
            },
            components: {
                quillEditor
            },
            methods: {
                onEditorChange({ editor, html, text }) {
                    this.content = html;
                },
                submit(){
                    console.log(this.content);
                    this.$message.success('提交成功!');
                }
            }
        }
    </script>
    <style scoped>
        .editor-btn{
            margin-top: 20px;
        }
    </style>
    
    展开全文
  • npm install vue-quill-editor --save 2 vue-ui可视化安装 项目终端输入vue-ui打开可视化界面 选中依赖项如图: 然后右上角点安装依赖 如图 选中运行依赖并且输入vue-quill-editor插件名称 如图标注: 点击安装...

    vue-cli中npm安装:
    两种方法:
    1 终端安装

    npm install vue-quill-editor --save
    

    2 vue-ui可视化安装
    项目终端输入vue-ui打开可视化界面
    选中依赖项如图:
    在这里插入图片描述
    然后右上角点安装依赖
    如图
    在这里插入图片描述
    选中运行依赖并且输入vue-quill-editor插件名称
    如图标注:
    在这里插入图片描述
    点击安装该依赖,等来安装即可
    在这里插入图片描述
    完成后如图
    在这里插入图片描述
    基本使用说明:

    插件体积不大这里只介绍全局使用,如果希望按需引用可参考
    https://github.com/surmon-china/vue-quill-editor
    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)
    

    组件中使用:
    v-mode双向绑定的内容即为输入的内容

    <quill-editor v-model="text"> </quill-editor>
    

    效果图:
    在这里插入图片描述
    就这,就这,就这啦。

    展开全文
  • import {policy} from './policy' import {getUUID} from '@/utils' 后台代码
  • 主要介绍了Vue 实现对quill-editor组件中的工具栏添加title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的,而我们实际开发需要将图片存在自己的服务器中...
  • 主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import '...
  • 文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下: 安装: npm install vue-quill-editor --save main.js: import VueQuillEditor from 'vue-quill-editor' import 'quill/dist...
  • vue-quill-editor的guthub地址 ,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要...
  • npm install vue-quill-editor --save # or yarn add vue-quill-editor CDN < link rel =" stylesheet " href =" path/to/quill.core.css "/> < link rel =" stylesheet " href =" path/to/quill.snow....
  • 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-...

    # npm 安装

    1、下载Vue-Quill-Editor

    npm install vue-quill-editor --save
    

    2、下载quill(Vue-Quill-Editor需要依赖)

    npm install quill --save
    


    # 新建一个 quill.vue

    <template>
      <div><quill-editor v-model="content"></quill-editor></div>
    </template>
    
    <script>
      import  {quillEditor} from 'vue-quill-editor'  // 引入编辑器
      // require styles 引入样式
      import 'quill/dist/quill.core.css'
      import 'quill/dist/quill.snow.css'
      import 'quill/dist/quill.bubble.css'
    
        export default {
          name: "quill",
          components: {
            quillEditor
          },
          data(){
            return {
              content:null
            }
          }
        }
    </script>
    
    <style scoped>
    </style>
    
    • 这就是一个富文本的组件了,在需要用到的地方引入即可



    # 组件内使用

    <template>
      <div>
        <quill ref="myQuillEditor"></quill>
      </div>
    </template>
    
    <script>
      // 引入 quill 组件
      import quill from '@/components/indexs/quill'
    
      export default {
        name: "test1",
        components: {
          quill
        },
        data() {
          return {
          }
        },
        mounted() {
          console.log(" 获取富文本框内的值,使用this.$refs.myQuillEditor.content 获取");
          console.log(this.$refs.myQuillEditor.content);
        },
        methods: {
        }
      }
    </script>
    
    <style scoped>
    </style>
    

    # 显示富文本的文本

    <template>
      <div class="ql-snow">
        <div class="ql-editor" v-html="contents">{{contents}}</div>
      </div>
    </template>
    
    <script>
      export default {
        name: "test2",
        data() {
          return {
            contents: '<p>欢迎使用quill富文本</p>'
          }
        },
        mounted() {
        },
        methods: {
        }
      }
    </script>
    
    <style scoped>
    </style>
    


    # 自定义 Vue-Quill-Editor 工具栏

    <template>
      <div><quill-editor v-model="content" style="height: 100px;" :options="editorOption"></quill-editor></div>
    </template>
    
    <script>
      import  {quillEditor} from 'vue-quill-editor'  // 引入编辑器
      // 富文本编辑器外部引用样式  三种样式三选一引入即可
      import 'quill/dist/quill.snow.css'
      // import 'quill/dist/quill.core.css'
      // import 'quill/dist/quill.bubble.css'
    
      export default {
        name: "quill",
        components: {
          quillEditor
        },
        data(){
          return {
            content: '欢迎使用',
            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'],    //清除字体样式
                  ['image','video']    //上传图片、上传视频
                ]
              },
            }
          }
        },
      }
    </script>
    
    <style scoped>
    </style>
    


    参考博客:

    1. Vue-Quill-Editor在vue中的使用方式
    展开全文

空空如也

空空如也

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

editorquillvue

vue 订阅