精华内容
下载资源
问答
  • Vue-Quill-Editor Quill editor component for Vue. 基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。 Example Component example page CDN example page Install NPM npm install vue-quill...
  • Quill Rich Text Editor Quickstart • Documentation • Development • Contributing • Interactive Playground Quill is a modern rich text editor built for ...
  • 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-...

    先看效果图:画面太美哈哈哈
    在这里插入图片描述
    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字符串

    后台接收到数据后会将字符中的标签进行转码,所以我们要先进行一个解码的操作让他变成标签形式的字符串:
    例如后台接收的数据如下:"<h1>title<" ,对应解码后就是<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以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。

    展开全文
  • vue-quill-editorVue 项目中使用的 富文本编辑器1 引言在实际应用开发中,在常见的管理后台或者是多媒体管理后台,多多少少都会有富文本编辑器,而在编辑富文本时,通常的一个需求就是在富文本中插入图片或者...
    vue-quill-editor 是 Vue 项目中使用的 富文本编辑器

    1 引言

    在实际应用开发中,在常见的管理后台或者是多媒体管理后台,多多少少都会有富文本编辑器,而在编辑富文本时,通常的一个需求就是在富文本中插入图片或者视频,本篇文章讲述的就是在 vue 项目中,使用 Vue-Quill-Editor 编辑器在富文本中插入视频。

    官方的效果如下图1所示 点击这里查看Vue-Quill-Editor官方效果

    图1

    21485501c9024abf65f58106d89db1bd.png

    在实际应用开发中,官方提供的效果往往满足不了我们的效果,而通过我们自定义样式后,达到如下的效果

    图2

    0203b2d8d15ff9835902771b5fca22c7.gif

    2 一步步实现我们上面的效果

    在实际项目中,我们有引用到 quill-editor 的地方,如这里写的

    <quill-editor class="editer" 
             ref="editer" 
             v-model="dataForm.content"
              :options="editorOption"
                          style="height: 500px;">
    
     </quill-editor>
    在 vue 中 ref 用来给元素或者子组件 注册引用信息,引用信息会注册在父组件的 refs对象中,也就是说 我们可以通过 this.refs.editer 来获取当前 quill-editor 的实例

    在这里 quill-editor 有一个配置信息 editorOption ,editorOption 是定义在 我们的 data() 中

    <script>
      ...
      export default {
    
        data() {
    
          var self2 = this;
          return {
                //显示插入视频链接弹框的标识
                videoUploadTag: false,
                //弹框插入的视频链接记录
                videoLink:"",
                //quill-editor 编辑器的配置
                editorOption: {
                          modules: {
                            toolbar: {
                              container: [
                                ...
                                ['image', 'video']
                              ],
                              handlers: {
                                  ...
                                'video': function(value) {
                                  self2.videoUploadTag = true;
                                }
                              }
                            }
                          }
                  },
            }
    

    在上述代码块中,通过 toolbar 来配置 quill-editor 编辑器的菜单栏 ,如这里配置的 ['image', 'video'] 在编辑器中如下显示 图3

    37f7d0e6130c4eba0cd0743415f6a7fa.png

    通过在 handlers 配置 'video': function(value) 来自定义quill-editor 编辑器的菜单栏中的视频图标点击事件,在这里,当点击菜单栏的视频图标时,这里定义的方法监听到点击事件,然后将 标识 videoUploadTag 的值修改为 true,在页面上显示插入视频链接地址的弹框

    <!--videoUploadTag 默认是 false -->
        <!--所以这里的上传弹框是隐藏的 -->
        <!--当点击编辑器菜单栏中的视频图标时,将videoUploadTag 修改为 true 在页面上显示出来插入视频的弹框-->
        <div :visible.sync="videoUploadTag">
          <el-dialog
            width="50%"
            id="video_upload"
            style="margin-top: 1px"
            title="视频上传"
            :visible.sync="videoUploadTag"
            append-to-body>
            <el-tabs v-model="activeName" @tab-click="videoSelectTagClick" value="0">
              <el-tab-pane label="添加视频链接" name="first">
                <el-input v-model="videoLink" placeholder="请输入视频链接" clearable></el-input>
                <el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="addVideoLink()">添加
                </el-button>
    
    
              </el-tab-pane>
              <el-tab-pane label="素材库" name="second">请期待</el-tab-pane>
    
            </el-tabs>
          </el-dialog>
        </div>

    在这里使用到的 el-dialog、el-tabs、el-input 等等是 element ui框架点击这里查看element

    当点击 添加按钮时会调用 addVideoLink() 方法 图4

    25f21851315022e701e20c18b9bc5f2d.png

    在代码中 addVideoLink() 的定义如下

    methods: {
    
          addVideoLink() {
    
            if (this.videoLink.length == 0) {
              alert('请输入视频链接');
            }
            //当编辑器中没有输入文本时,这里获取到的 range 为 null
            var range = this.$refs.editer.quill.getSelection();
            //视频插入在富文本中的位置
            var index = 0;
            if (range == null) {
              index = 0;
            } else {
              index = range.index;
            }
            //隐藏弹框
            this.videoUploadTag = false;
            //将视频链接插入到当前的富文本当中
            this.$refs.editer.quill.insertEmbed(index, 'video', this.videoLink);
    
    
    
          },
    }
    

    最终我们实现了如图2中所示的效果。


    完结

    展开全文
  • vue 富文本 vue-quill-editor element-ui 配置图片上传 解决富文本图片为base64的问题 解决思路 把之前的上传图片的节点复制替换 注册事件,事件调用 element-ui的上传节点的点击事件,获取之前的光标位置editor....

     vue 富文本 vue-quill-editor  element-ui    配置图片上传

    解决富文本图片为base64的问题

    解决思路

    1. 把之前的上传图片的节点复制替换
    2. 注册事件,事件调用 element-ui的上传节点的点击事件,获取之前的光标位置 editor.getSelection().index
    3. 上传成功后,调用vue-quill-editor的内置方法,取得返回的图片地址。插入节editor.insertEmbed(this.index,'image',res.url)   

     

    效果展示

    代码

    <template>
          <div>
            <el-upload
              class="avatar-uploader"
              id="upImgEtr"
              :action="$store.state.Compile_Server+'/uploadImg.do'" <!-- 图片上传的接口 -->
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon">
              </i>
            </el-upload>
            <div class="quill-editor-example">
              <!-- quill-editor -->
              <quill-editor ref="myTextEditor"
                            v-model="content"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)"
                            @ready="onEditorReady($event)">
              </quill-editor>
              <div class="quill-code">
                <code class="hljs"  v-html="contentCode"></code>
              </div>
            </div>
          </div>
    </template>
    
    <script>
      import hljs from 'highlight.js'
      export default {
        name: 'myEditor',
        created(){
            //console.log('content',this.content);
        },
        data() {
          return {
            dialogImageUrl: '',
            imageUrl:"",
            dialogVisible: false,
            editorOption: {
              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', false, 'large', 'huge'] }],
                  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                  [{ 'font': [] }],
                  [{ 'color': [] }, { 'background': [] }],
                  [{ 'align': [] }],
                  ['clean'],
                  ['link', 'image', 'video'],
                ],
                syntax: {
                  highlight: text => hljs.highlightAuto(text).value,
                },
              }
            },
            str:'',
            content:this.qyzzMs,
            upImgData:{
              id:localStorage.getItem('cdp_id'),
              web_id:this.$store.state.web_id
            },
            index:0
          }
        },
        methods: {
          handlePictureCardPreview(file, fileList) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
          },
          handleAvatarSuccess(res, file) {
              //后台返回的图片
              this.editor.insertEmbed(this.index,'image',res.url)
              this.editor.setSelection(this.index+1);
          },
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isLt2M = file.size / 1024 / 1024 < 2;
    
              if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return isJPG && isLt2M;
          },
          onEditorBlur(editor) {
            //console.log('editor blur!', editor.getText())
          },
          onEditorFocus(editor) {
            this.index=this.editor.getSelection().index
          },
          onEditorReady(editor) {
            //console.log('editor ready!', editor);
          },
          escapeStringHTML(str) {
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                return str;
          },
          onEditorChange(editor){
            this.index=this.editor.getSelection().index;
          }
        },
        computed: {
          editor() {
            return this.$refs.myTextEditor.quill
          },
          contentCode() {
            return hljs.highlightAuto(this.content).value
          }
        },
        mounted() {
          let content = '';  // 请求后台返回的内容字符串
          this.str = this.escapeStringHTML(content);
          var oldNode=document.querySelector('.ql-image');
          var newNode=oldNode.cloneNode(true);
          oldNode.parentNode.replaceChild(newNode,oldNode);
          oldNode="";
          var that=this;
          newNode.onclick=function(){
            try{
              that.index=that.editor.getSelection().index;
              document.querySelector('#upImgEtr .el-icon-plus').click();
            }catch(err){
              that.editor.setSelection(0);
              that.index=0;
              document.querySelector('#upImgEtr .el-icon-plus').click();
            }
          };
    
        }
      }
    </script>
    展开全文
  • quill-editorvue中展示的样式问题

    千次阅读 2019-06-28 10:20:02
    quill-editor在main.js...import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor) import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.cs...

    quill-editor在main.js中引用

    import VueQuillEditor from 'vue-quill-editor'
    
    Vue.use(VueQuillEditor)
    
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    

    如果需要展示内容,要用一下方法包裹。

    <div class="ql-container ql-snow">
        <div class="ql-editor" v-html="content">
        </div>
    </div>
    
    展开全文
  • 安装vue-quill-editor cnpm install vue-quill-editor -S 编辑组件中引入 import {quillEditor } from "vue-quill-editor"; //调用编辑器 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow....
  • npm install vue-quill-editor --save 2 vue-ui可视化安装 项目终端输入vue-ui打开可视化界面 选中依赖项如图: 然后右上角点安装依赖 如图 选中运行依赖并且输入vue-quill-editor插件名称 如图标注: 点击安装...
  • vue-quill-editor是基于Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用 一.配置vue-quill-editor 打开终端(Terminal) 输入npm install vue-quill-editor –save 下载依赖 在main.js里进行全局...
  • vue-quill-editorVue 项目中使用的 富文本编辑器 1 引言 在实际应用开发中,在常见的管理后台或者是多媒体管理后台,多多少少都会有富文本编辑器,而在编辑富文本时,通常的一个需求就是在富文本中插入图片或者...
  • 我们要实现的功能如下: 步骤一、上传图片 步骤二、剪切图片 步骤三、生成新图片 ...npm install -d vue-quill-editor quill vue-cropper element组件请自行下载并引入 实现代码如下: 第一部分...
  • vue-quill-editorVue 项目中使用的 富文本编辑器1 引言在实际应用开发中,在常见的管理后台或者是多媒体管理后台,多多少少都会有富文本编辑器,而在编辑富文本时,通常的一个需求就是在富文本中插入图片或者...
  • 今天来优化下Vue-Quill-Editor富文本编辑器,在编辑的工具栏中我们可以看到各式各样的图标,很多时候我们容易忘记图标对应的功能是什么,所以这里我们为其添加文字提示,当我将鼠标放到图标上时显示对应的功能提示,...
  • 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 2 3 4 5 ... 20
收藏数 1,501
精华内容 600
关键字:

editorquillvue

vue 订阅