精华内容
下载资源
问答
  • vue导入sql编辑器

    2021-10-26 11:11:47
    sql编辑器一些配置项 (更多配置项参考:https://blog.csdn.net/JLU_Lei/article/details/80259697) 事件监听 触发器使用方法:editor.on(‘chang’, ()=>{}) 取消触发器方法:ediotr.off(‘change’) ...

    sql编辑器一些配置项

    (更多配置项参考:https://blog.csdn.net/JLU_Lei/article/details/80259697)
    在这里插入图片描述
    在这里插入图片描述

    事件监听

    触发器使用方法:editor.on(‘chang’, ()=>{})
    取消触发器方法:ediotr.off(‘change’)

    “changes”:每次编辑器内容更改时触发
    “beforeChange”:事件在更改生效前触发
    “cursorActivity”:当光标或选中(内容)发生变化,或者编辑器的内容发生了更改的时候触发。
    “keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发
    “inputRead”:当用户输入或粘贴到编辑器时触发。
    “electrictInput”:收到指定的electrict输入时触发
    “beforeSelectionChange”:此事件在选中内容变化前触发
    “viewportChange”:编辑器的视口( view port )改变(滚动,编辑或其它动作)时触发
    “gutterClick”:编辑器的gutter(行号区域)点击时触发
    “focus”:编辑器收到焦点时触发
    “blur”:编辑器失去焦点时触发
    “scroll”:编辑器滚动条滚动时触发
    “keydown”, “keypress”, “keyup”,“mousedown”, “dblclick”硬件事件触发器

    下面详细记录vue导入sql编辑器进行sql编写的方法


    # API this.CodeMirrorEditor.setValue(“Hello Kitty”):设置编辑器内容 this.CodeMirrorEditor.getValue():获取编辑器内容 this.CodeMirrorEditor.getLine(n):获取第n行的内容 this.CodeMirrorEditor.lineCount():获取当前行数 this.CodeMirrorEditor.lastLine():获取最后一行的行号 this.CodeMirrorEditor.isClean():boolean类型判断编译器是否是clean的 this.CodeMirrorEditor.getSelection():获取选中内容 this.CodeMirrorEditor.getSelections():返回array类型选中内容 this.CodeMirrorEditor.replaceSelection(“替换后的内容”):替换选中的内容 this.CodeMirrorEditor.getCursor():获取光标位置,返回{line,char} this.CodeMirrorEditor.setOption("",""):设置编译器属性 this.CodeMirrorEditor.getOption(""):获取编译器属性 this.CodeMirrorEditor.addKeyMap("",""):添加key-map键值,该键值具有比原来键值更高的优先级 this.CodeMirrorEditor.removeKeyMap(""):移除key-map this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…没试出效果 this.CodeMirrorEditor.removeOverlay(""):移除Overlay this.CodeMirrorEditor.setSize(width,height):设置编译器大小 this.CodeMirrorEditor.scrollTo(x,y):设置scroll到position位置 this.CodeMirrorEditor.refresh():刷新编辑器/n this.CodeMirrorEditor.execCommand(“命令”):执行命令

    效果图

    在这里插入图片描述

    一、下载sql编辑器插件

    npm install --save sql-formatter
    npm install --save vue-codemirror 
    

    二、使用步骤

    1.引入

    父组件
    在这里插入图片描述
    子组件

    import "codemirror/theme/ambiance.css";
    import "codemirror/lib/codemirror.css";
    import "codemirror/addon/hint/show-hint.css";
    let CodeMirror = require("codemirror/lib/codemirror");
    require("codemirror/addon/edit/matchbrackets");
    require("codemirror/addon/selection/active-line");
    require("codemirror/mode/sql/sql");
    require("codemirror/addon/hint/show-hint");
    require("codemirror/addon/hint/sql-hint");
    

    2.vue文件(父和子)

    父组件:

    <template>
      <div class="history-container">
                <span class="btn2">
                  <el-button
                    @click="showBtn"
                    style="
                      background-color: #fff;
                      color: #1192ac;
                      font-size: 14px;
                      height: 40px;
                      padding: 0px 8px;
                    "
                    size="small"
                    >点击显示对话框</el-button
                  >
                </span>
        <el-dialog
          @close="cancelScheduleInfoDia"
          :title="title"
          top="160px"
          width="400px;"
          :close-on-click-modal="false"
          :visible.sync="visible"
          class="planDialog"
        >
          <el-form
            ref="addRecordFormRef"
            :rules="addRecordFormRules"
            :model="addRecordForm"
            :label-position="labelPosition"
            label-width="110px"
            class="firstform"
          >
            <el-form-item label="查询名称:" prop="statisticsName">
              <el-input
                v-model="addRecordForm.statisticsName"
                placeholder="请选择"
                class="selcClass timesel"
                style="width: 100%"
                filterable
                @change="statisticsNameIpt"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="SQL脚本:" prop="sqlcontent">
              <el-tag
                type="warning"
                style="position: absolute; top: 35px; left: -75px; cursor: pointer"
                @click="formatterBtn"
                >格式化</el-tag
              >
              <SqlEditor
                v-if="sqlVisible"
                ref="sqleditor"
                :value="addRecordForm.sqlcontent"
                :tables="sqlTable"
                @changeTextarea="changeTextarea($event)"
              />
              <!-- <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                style="width: 100%"
                v-model="addRecordForm.sqlcontent"
              /> -->
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
              <el-input
                v-model="addRecordForm.remark"
                placeholder="请选择"
                class="selcClass timesel"
                style="width: 100%"
                filterable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="排序:" prop="serialNo">
              <el-input
                v-model="addRecordForm.serialNo"
                placeholder="请选择"
                class="selcClass timesel"
                style="width: 100%"
                filterable
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div class="myBtn text-align_right">
            <el-button @click="cancle">取消</el-button>
            <el-button type="primary" @click="addSure">确认</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import sqlFormatter from 'sql-formatter'
    import SqlEditor from '@/components/SqlEditor'
    export default {
      components: { SqlEditor },
      data() {
        return {
          sqlVisible: true,
          sqlTable: {},
          addRecordFormRules: {
            statisticsName: [{ required: true, message: '请输入查询名称', trigger: 'blur' },],
            sqlcontent: [{ required: true, message: '请输入SQL脚本', trigger: 'blur' },],
            remark: [{ required: true, message: '请输入备注', trigger: 'blur' },],
            serialNo: [{ required: true, message: '请输入排序', trigger: 'blur' },],
          },
          addRecordForm: {
            statisticsName: '',
            sqlcontent: '',
            remark: "",
            serialNo: '',
            statisticsId: '',
          },
          labelPosition: 'right',
        }
      },
      methods: {
     //实时记录sql输入变化
        changeTextarea(val) {
          this.addRecordForm.sqlcontent = val;
        },
        //格式化 输入的sql语句
        formatterBtn(val) {
          let dom = this.$refs.sqleditor
          dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
        },
        editLeftTree() {
          this.sqlVisible= true
          //回显sql
          this.$nextTick(() => {
            const dom = this.$refs.sqleditor;
            dom.editor.setValue(this.sqljb);
          });
        },
        cancle() {
          this.sqlVisible= false
          this.$refs.addRecordFormRef.resetFields()
        },
        cancelScheduleInfoDia() {
          this.sqlVisible= false
          this.$refs.addRecordFormRef.resetFields()
        }
      },
    }
    </script>
    
    <style lang="scss" scoped>
    </style>
    

    子组件:

    <template>
      <div>
        <textarea ref="sqlEditor" v-model="value" class="codesql"></textarea>
      </div>
    </template>
    <script>
    import "codemirror/theme/ambiance.css";
    import "codemirror/lib/codemirror.css";
    import "codemirror/addon/hint/show-hint.css";
    let CodeMirror = require("codemirror/lib/codemirror");
    require("codemirror/addon/edit/matchbrackets");
    require("codemirror/addon/selection/active-line");
    require("codemirror/mode/sql/sql");
    require("codemirror/addon/hint/show-hint");
    require("codemirror/addon/hint/sql-hint");
    export default {
      name:'SqlEditor',
      data() {
        return {
          editor: null
        }
      },
        props: {
          // 接收父组件传值
          value: {
            type: String,
            default: ''
          },
          sqlStyle: {
            type: String,
            default: 'default'
          },
          readOnly: {
            type: [Boolean, String]
          },
          // 父组件将表结构传给编辑器,实现自动提示表名和字段名的功能
          tables: {
            type: Object,
            default: () => { }
          }
      },
      watch: {
        // 监听newVal值的变化,通过getValue方法获取到值并传递给父组件
        newVal(newV, oldV) {
          if (this.editor) {
            this.$emit('changeTextarea', this.editor.getValue());
          }
        },
        // 将value赋值给编辑器配置项中的value
        value(newV, oldV) {
          if (this.editor) {
            if (newV === '') {
              this.editor.setValue('');
            }
          }
        }
      },
      computed: {
        newVal() {
          if (this.editor) {
            return this.editor.getValue();
          }
        }
    
      },
    
      mounted() {
        let mime = 'text/x-mariadb'
        //let theme = 'ambiance'//设置主题,不设置的会使用默认主题
        this.editor = CodeMirror.fromTextArea(this.$refs.sqlEditor, {
          value: this.value,
          mode: { name: 'text/x-mysql' },
          indentWithTabs: true,
          smartIndent: true,
          lineNumbers: true,
          matchBrackets: true,
          cursorHeight: 1,
          lineWrapping: true,
          readOnly: this.readOnly,
          // theme: theme,
          autofocus: true,
          extraKeys: { Ctrl: 'autocomplete' },
          hintOptions: {
            completeSingle: false,
            tables: this.tables
          }
        });
        //代码自动提示功能,记住使用cursorActivity事件不要使用change事件,这是一个坑,那样页面直接会卡死==编辑器触发
        this.editor.on('inputRead', () => {
          this.editor.showHint()
        })
      },
      methods: {
        setVal() {
          if (this.editor) {
            if (this.value === '') {
              this.editor.setValue('')
            } else {
              this.editor.setValue(this.value)
            }
    
          }
        }
      }
    }
    </script>
    <style>
    .CodeMirror {
      color: black;
      direction: ltr;
      line-height: 22px;
    }
    .CodeMirror-hints {
      z-index: 9999 !important;
    }
    </style>
    
    
    展开全文
  • 最近需要用到富文本编辑器插件,项目是用VUE框架搭建的 所以这里就专门介绍几款有关vue的富文本插件:项目中趟过了很多坑,特记下供大家借鉴,希望大家不要重滔我的复撤 本文章只介绍插件 具体使用方式可自行百度由于...

    最近需要用到富文本编辑器插件,项目是用VUE框架搭建的 所以这里就专门介绍几款有关vue的富文本插件:

    项目中趟过了很多坑,特记下供大家借鉴,希望大家不要重滔我的复撤 本文章只介绍插件 具体使用方式可自行百度

    由于编辑器编辑的内容需要在小程序 能完美显示,并且能和小程序富文本编辑器完全打通

    1.百度的ueditor (网上都这么说)(没有缘分,果断放弃)

    优势:开源,插件多,基本满足各种需求, 由百度web前端研发部开发。

    不足:比较庞大,对于网页的加载来说,会相对影响速度 ,界面不太美观。

    官方的wiki文档并不是很完善,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢。

    16e28b392b2f

    功能强大  UI经典

    2.bootstrap-wysiwyg  (网上都这么说)(不能满足需求,果断放弃)

    优点:外观简洁大方,使用方便,支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性

    没有强制规定的样式。

    缺点:没有表情包 , 没有开发文档不便于阅读使用,无字体变色,无视频上传功能

    以上两个插件我没使用,可能是真的因为缘分不够吧 如果你喜欢尽管拿去用

    下面介绍一下我的漫漫入坑路 从Vue-Quill-Editor 说起吧

    第一个编辑器

    这个编辑器还是可以的 页面简单大气 上手快,文档配置简单,在管理后台中使用完全no problem,

    16e28b392b2f

    上手快 可以

    16e28b392b2f

    给span添加了class

    当我把上传图片 还有数据绑定都做好 觉得工作怎么会如此简单的时候 改了一下字体 发现编辑器会给span 标签添加类名,然而你必须要引入类名样式才能显示对应样式,这不是开玩笑吗 为什么要这么设计啊,是不是应该写到span 的行内样式里,一般管理后台用的话 前台还要引一下css文件 这不符合常理啊作者.

    最后小程序的富文本编辑器里不支持外部样式.

    16e28b392b2f

    .ql-size-huge{    font-size: 56rpx !important;  }  不生效

    唉心塞...  所以还是换编辑器吧 对吧 又不是就这一个 所以信心满满

    换编辑器 必须换

    Vue-html-Editor

    vue-quil-editor vue-html-editor 何等的相似, 一样的优势 一样的配置 页面简单大气上档次

    16e28b392b2f

    多么优美的编辑器

    16e28b392b2f

    为何要有font 标签

    但是 问题又来了 微信小程序 富文本编辑器根本不支持font 标签漂亮!!!

    换编辑器 必须换

    所以就有了接下来的Wangeditor

    这是一个文档齐全 上手特别容易,有可视化编辑器demo 预览的地表最强编辑器,我觉得这一点特别好 最起码能让我们开发者在用之前知道你这个开源插件UI 是什么样的,能不能满足用户的需求 不是说把代码跑起来我才能知道你这个编辑器长什么样,浪费了开发者的时间和精力 到最后还不能用.

    16e28b392b2f

    真香

    那就开始码代码吧 因为有了之前的经验 先看了一下结果获取到的html  结果 凉凉夜色为我思念成河 化作春泥呵护了我。。。

    一样的font 标签 一样的font-size 属性 ,实在不想再换编辑器了 没办法 源码改不动  replice 替换吧  需要把所有的font 标签替换成span 还得把font的font-size 属性 和color 属性 改为行内,心塞,讲道理 这不符合常理啊,

    换编辑器 必须换

    kindeditor

    16e28b392b2f

    主要特点

    快速:体积小,加载速度快

    开源:开放源代码,高水平,高品质

    底层:内置自定义 DOM 类库,精确操作 DOM

    扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

    风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

    兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

    这是官方解释, 说的我都信了 那就用用吧

    果然满足我了我所有的需求 完美的能和小程序对接起来  不管是从前端显示 还是在小程序 富文本编辑器里显示都能兼容, 就是ui 长的有点丑,没办法,谁让功能强大呢,丑点就丑点吧 ,没想到坑在后面,就是编辑器没有暴露自定义上传参数,比如上传图片到服务器的时候需要从Header 传个token,怎么办,凉拌,也不知道网上哪位大佬改了一下他的源码重写了图片上传,

    好人啊

    所以多图上传呢,还得改代码  唉心塞...

    先冷静一下,最后还是在这几个编辑器里择优选择了Wangeditor 在他的基础上来满足我的需求

    找了很多资料最后一行代码解决问题

    styleWithCSS  = true

    可以把font 替换成span

    最后再推荐一下Wangeditor 虽然官方还在维护,还有很多问题,但是我还是比较看好他的,能够满足自己需求的编辑器就是好的编辑器

    兜兜转转还在又回到Wangeditor 如果你是大佬可能不会走这么多弯路,直接在源码上拓展就能实现你的功能,还是能力不够吧,希望有时间能够自己手写一个富文本编辑器

    如果你只是需要一个编辑器 其实任意一款都可以,如果你想和微信小程序兼容起来,Wangeditor首选

    展开全文
  • vue整合文本编辑器

    2021-04-20 16:30:22
    所以需要采用后端整合文本编辑器,前端(vue)采用v-html标签直接渲染 小编的示例是整合vue 0、富文本编辑器的插件和组件 链接:https://pan.baidu.com/s/1OK770qsv1Ozv-4FWLjCtdg 提取码:5ggs 复制这段内容后...

    场景说明:

    后端输入一篇文章,在前端显示,这时就有个排版问题了。单纯的文本输入框无法满足要求。
    所以需要采用后端整合文本编辑器,前端(vue)采用v-html标签直接渲染
    小编的示例是整合vue

    0、富文本编辑器的插件和组件

    链接:https://pan.baidu.com/s/1OK770qsv1Ozv-4FWLjCtdg 
    提取码:5ggs 
    复制这段内容后打开百度网盘手机App,操作更方便哦--来自百度网盘超级会员V4的分享
    

    1、效果如图:

    后台图片:
    在这里插入图片描述

    前端渲染图片:
    在这里插入图片描述
    或者
    在这里插入图片描述


    2、下载富文本编辑器 插件Tinymce:

    01:先下载插件,官网入口(默认英文版)
    02:补充下汉化(入口)

    汉化下载这个:
    在这里插入图片描述
    在这里插入图片描述
    去掉不要的文件夹,完整插件如图:
    在这里插入图片描述

    3、在工程引入

    说明:小编的demo是整合vue脚手架哦

    1. 在public文件夹引入插件,如图:
    在这里插入图片描述
    2. 封装组件

    注明:小编会把(插件和组件代码)放在百度网盘,需要自取
    在这里插入图片描述
    3. 在需要使用的地方引用该组件

    示例:

     //引入
     import Tinymce from '@/components/Tinymce'
     //注册
     components: {Tinymce},
     //使用---> v-model是数据绑定
     <tinymce v-model="dataList.content" :height="300" style="min-width: 600px" :size="componentSize"/>
    

    如图:
    在这里插入图片描述
    在这里插入图片描述
    整合完成

    4、前端渲染

    <div v-html="Content" style="font-size: 14px;letter-spacing: 1px;line-height:18px"></div>
    

    5、细节(bug)说明:

    小编采用的element ui
    可能会出现如下问题:
    1、文本域初始化一次,第二次发现无法输入
    解决办法: 每次打开添加、修改…等组件,重新渲染一次
    例如:采用v-if创建组件

    //dialogShow是自己定义的
    //父页面点击添加按钮,创建出一个dialog组件,dialogShow变为true,显示组件
    //所以我们在dialog组件中使用v-if解决这个问题 v-if="dialogShow"
    //原理:百度下 v-if和b-show的区别
    //代码如下:
    <template>
    <el-dialog 
    	:visible.sync="dialogShow" 
    	 v-if="dialogShow" 
    	:before-close="handleClose"
    	append-to-body width="60%"
    	top="5vh">
    </el-dialog>
    //这个是table的内容
    </template>
    

    2、修改功能:文本编辑器影响到原本的显示数据
    解决办法: 父组件向子组件传递数据的时候,不要传递整个对象,使用一个一个变量传输

    类如:

     	  //更新页面
          openUpdateWin(data) {
            const refs = this.$refs.updateWin;
            //推荐一个一个赋值
            refs.dataList.id = data.id;
            refs.dataList.title = data.title;
            refs.dialogShow = true;
            //不推荐
            //refs.dataList = data;
          },
    
    展开全文
  • vue富文本编辑器

    2021-01-11 22:43:21
    vue富文本编辑器 Vue-Quill-Editor 主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。 wangEditor(国产,...

    vue富文本编辑器

    Vue-Quill-Editor

    主流富文本编辑器对比

    前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。

    1. wangEditor(国产,基于javascript和css开发的web富文本编辑器,开源免费)优势:轻量简介,最重要的是开源且中文文档齐全。缺点:更新不及时。没有强大的开发团队支撑。

    2. UEditor(百度)优势:插件多,基本曼度各种需求,由百度web前端研发部开发。缺点:插件提交较大,网页加载速度相对就慢了些。使用复杂。属于前后端不分离插件。在使用时需要配置后端的一些东西,使用不便。

    1. Kindeditor () 优势:文档齐全,为中文,阅读方便。缺点:图片上传存在问题,上传历史过多,会全部加载,导致浏览器卡顿。

    2. 补充:Tinymce也是一款不错的富文本编辑器,种植,各有优势和劣势,关键是选择一款最适合的就好。因为笔者在开发vue,所以直接使用vue-quill-editor较为方便些。具体看情况使用。

    vue-quill-editor基本配置

    npm install vue-quill-editor -s

    main.js中引入

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

    使用

     需要注意的是toolbar的配置

     

      1. 只需要填写功能名的    

     加粗 - bold;
    
         斜体 - italic
    
         下划线 - underline
    
         删除线 - strike
    
         引用- blockquote
    
         代码块 - code-block
    
         公式 - formula
    
         图片 - image
    
         视频 - video
    
         清除字体样式- clean
    
         这一类的引用 直接['name','name']这种格式就好了

      2. 需要有默认值的

     标题 - header 
    
      [{ 'header': 1 }, { 'header': 2 }] 值字体大小
     
      列表 - list
      [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered,bullet
     
      上标/下标 - script
      [{ 'script': 'sub'}, { 'script': 'super' }],  值sub,super
     
      缩进 - indent
      [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1,+1等
     
      文本方向 - direction
      [{'direction':'rtl'}]

    结构 

    <template>
          <quill-editor class="editor"
                        ref="myTextEditor"
                        v-model="content"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)"
                        @change="onEditorChange($event)">
          </quill-editor>
      </template>
      <script>
          export default {
            data () {
              return {
                content: null,
                editorOption: {
                  modules: {
                    toolbar: [
                      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                      ["blockquote", "code-block"], // 引用  代码块
                      [{ header: 1 }, { header: 2 }], // 1、2 级标题
                      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                      [{ script: "sub" }, { script: "super" }], // 上标/下标
                      [{ indent: "-1" }, { indent: "+1" }], // 缩进
                      // [{'direction': 'rtl'}],                         // 文本方向
                      [{ size: ["small", false, "large", "huge"] }], // 字体大小
                      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                      [{ font: [] }], // 字体种类
                      [{ align: [] }], // 对齐方式
                      ["clean"], // 清除文本格式
                      ["link", "image", "video"] // 链接、图片、视频
                    ], //工具菜单栏配置
                  },
                  placeholder: '请在这里添加产品描述', //提示
                  readyOnly: false, //是否只读
                  theme: 'snow', //主题 snow/bubble
                  syntax: true, //语法检测
                }
              }
            },
            methods: {
              // 失去焦点
              onEditorBlur(editor) {},
              // 获得焦点
              onEditorFocus(editor) {},
              // 开始
              onEditorReady(editor) {},
              // 值发生变化
              onEditorChange(editor) {
                this.content = editor.html;
                console.log(editor);
              },
            },
            computed: {
              editor() {
                return this.$refs.myTextEditor.quillEditor;
              }
            },
            mounted() {
              // console.log('this is my editor',this.editor);
            } 
          }
      </script>

    汉化

    汉化只需要更改toolbar工具栏中的样式即可实现

    <style>
      .editor {
        line-height: normal !important;
        height: 800px;
      }
      .ql-snow .ql-tooltip[data-mode=link]::before {
        content: "请输入链接地址:";
      }
      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
          border-right: 0px;
          content: '保存';
          padding-right: 0px;
      }
     
      .ql-snow .ql-tooltip[data-mode=video]::before {
          content: "请输入视频地址:";
      }
     
      .ql-snow .ql-picker.ql-size .ql-picker-label::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
      }
     
      .ql-snow .ql-picker.ql-header .ql-picker-label::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: '标题1';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: '标题2';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: '标题3';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: '标题4';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: '标题5';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: '标题6';
      }
     
      .ql-snow .ql-picker.ql-font .ql-picker-label::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
      }
      </style>

    实现以上配置后就可以看到效果如图:

    以上就是vue-quill-editor的基本配置了。

     

    图片上传的配置

    因为图片这块,大多情况下,我们都不需要base64格式的,所以我们需要将图片通过OSS换取网络路径然后发送给后端和回显

    更换quill-editor的点击事件为自定义事件

    这里借助element-ui的图片功能,因为其功能齐全,图片上传前,上传后,都有交互效果的处理,所以可以选择性使用

     editorOption: {
          modules: {
              toolbar: {
                  handlers: {
                      image: function(value) {
                          if (value) {
                              // 触发input框选择图片文件
                              document.querySelector(".avatar-uploader input").click();//自定义元素的点击事件
                          } else {
                              this.quill.format("image", false);
                          }
                      },
                          // link: function(value) {
                          //   if (value) {
                          //     var href = prompt('请输入url');
                          //     this.quill.format("link", href);
                          //   } else {
                          //     this.quill.format("link", false);
                          //   }
                          // },
                  }
              }
          }
      },

    而后在自定义的元素上写入点击事件,然后将该元素隐藏掉。点击quill-editor的图片上传时,实际点击了自定义的图片上传,而后在返回网络路径后将图片插入富文本编辑器即可。

    插入返回的网络图片路径(这里借助的是element-ui)

    uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill;
            // 如果上传成功
            if (res.code == 200) {
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片  res.url为服务器返回的图片地址
              quill.insertEmbed(length, "image", res.url);
              // 调整光标到最后
              quill.setSelection(length + 1);
            } else {
              this.$message.error("图片插入失败");
            }
            // loading动画消失
            this.quillUpdateImg = false;
          },

    以上就是主要思路及代码,如果还是不懂就看下面vue组件的源码(也可直接使用,前提是下载了element-ui)

    组件封装源码及引用

    <template>
          <div>
              <!-- 图片上传组件辅助-->
            <el-upload
              class="avatar-uploader"
              :action="serverUrl"
              name="file"
              :headers="header"
              :show-file-list="false"
              list-type="picture"
              :multiple="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload">
            </el-upload>
     
            <quill-editor
            class="editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
            </quill-editor>
          </div>
      </template>
      <script>
      // 工具栏配置
      const toolbarOptions = [
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
        ["blockquote", "code-block"], // 引用  代码块
        [{ header: 1 }, { header: 2 }], // 1、2 级标题
        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
        [{ script: "sub" }, { script: "super" }], // 上标/下标
        [{ indent: "-1" }, { indent: "+1" }], // 缩进
        // [{'direction': 'rtl'}],                         // 文本方向
        [{ size: ["small", false, "large", "huge"] }], // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ font: [] }], // 字体种类
        [{ align: [] }], // 对齐方式
        ["clean"], // 清除文本格式
        ["link", "image", "video"] // 链接、图片、视频
      ];
     
      import { quillEditor } from "vue-quill-editor";
      import "quill/dist/quill.core.css";
      import "quill/dist/quill.snow.css";
      import "quill/dist/quill.bubble.css";
     
      export default {
        props: {
          /*编辑器的内容*/
          value: {
            type: String
          },
          /*图片大小*/
          maxSize: {
            type: Number,
            default: 4000 //kb
          }
        },
     
        components: {
          quillEditor
        },
     
        data() {
          return {
            content: this.value,
            quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
            editorOption: {
              theme: "snow", // or 'bubble'
              placeholder: "您想说点什么?",
              modules: {
                toolbar: {
                  container: toolbarOptions,
                  // container: "#toolbar",
                  handlers: {
                    image: function(value) {
                      if (value) {
                        // 触发input框选择图片文件
                        document.querySelector(".avatar-uploader input").click();
                      } else {
                        this.quill.format("image", false);
                      }
                    },
                    // link: function(value) {
                    //   if (value) {
                    //     var href = prompt('请输入url');
                    //     this.quill.format("link", href);
                    //   } else {
                    //     this.quill.format("link", false);
                    //   }
                    // },
                  }
                }
              }
            },
            serverUrl: "https://testihospitalapi.ebaiyihui.com/oss/api/file/store/v1/saveFile", // 这里写你要上传的图片服务器地址
            header: {
              // token: sessionStorage.token
            } // 有的图片服务器要求请求头需要有token
          };
        },
     
        methods: {
          onEditorBlur() {
            //失去焦点事件
          },
          onEditorFocus() {
            //获得焦点事件
          },
          onEditorChange() {
            //内容改变事件
            this.$emit("input", this.content);
          },
     
          // 富文本图片上传前
          beforeUpload() {
            // 显示loading动画
            this.quillUpdateImg = true;
          },
     
          uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill;
            // 如果上传成功
            if (res.code == 200) {
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片  res.url为服务器返回的图片地址
              quill.insertEmbed(length, "image", res.result.url);
              // 调整光标到最后
              quill.setSelection(length + 1);
            } else {
              this.$message.error("图片插入失败");
            }
            // loading动画消失
            this.quillUpdateImg = false;
          },
          // 富文本图片上传失败
          uploadError() {
            // loading动画消失
            this.quillUpdateImg = false;
            this.$message.error("图片插入失败");
          }
        }
      };
      </script>
     
      <style>
      .editor {
        line-height: normal !important;
        height: 800px;
      }
      .ql-snow .ql-tooltip[data-mode=link]::before {
        content: "请输入链接地址:";
      }
      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
          border-right: 0px;
          content: '保存';
          padding-right: 0px;
      }
     
      .ql-snow .ql-tooltip[data-mode=video]::before {
          content: "请输入视频地址:";
      }
     
      .ql-snow .ql-picker.ql-size .ql-picker-label::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
      }
     
      .ql-snow .ql-picker.ql-header .ql-picker-label::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: '标题1';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: '标题2';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: '标题3';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: '标题4';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: '标题5';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: '标题6';
      }
     
      .ql-snow .ql-picker.ql-font .ql-picker-label::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
      }
      </style>
    引入:
      <template>
        <Editor v-model="article.content"/>
      </template>
      <script>
      import Editor from './quillEditor'
      export default {
        components: {
          Editor
        },
        data() {
          return {
            article: {
              content: '',
            }
          }
        }
      }
      </script>
      <style>
     
      </style>

     

    VUE组件封装

    <template>
      <quill-editor
        class="editor"
        ref="myTextEditor"
        v-model="content"
        :options="editorOption"
        @change="onEditorChange($event)"
      ></quill-editor>
    </template>
    
    <script>
    const toolbar = [
      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
      ["blockquote", "code-block"], // 引用  代码块
      [{ header: 1 }, { header: 2 }], // 1、2 级标题
      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
      //   [{ script: "sub" }, { script: "super" }], // 上标/下标
      //   [{ indent: "-1" }, { indent: "+1" }], // 缩进
      // [{'direction': 'rtl'}],                         // 文本方向
      [{ size: ["small", false, "large", "huge"] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
      [{ font: [] }], // 字体种类
      [{ align: [] }], // 对齐方式
      ["clean"], // 清除文本格式
      ["link", "image", "video"] // 链接、图片、视频
    ]; //工具菜单栏配置
    export default {
      data() {
        return {
          content: null, //内容
          editorOption: {
            modules: {
              toolbar
            },
            placeholder: "", //提示
            readyOnly: false, //是否只读
            theme: "snow", //主题 snow/bubble
            syntax: true //语法检测
          }
        };
      },
      methods: {
        // 值发生变化
        onEditorChange(editor) {
          this.content = editor.html;
          this.$emit("content", editor.html);
        }
      }
    };
    </script>
    
    <style>
    .editor {
      line-height: normal !important;
      height: 800px;
      margin-bottom: 30px;
    }
    .ql-snow .ql-tooltip[data-mode="link"]::before {
      content: "请输入链接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: "保存";
      padding-right: 0px;
    }
    
    .ql-snow .ql-tooltip[data-mode="video"]::before {
      content: "请输入视频地址:";
    }
    
    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: "14px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
      content: "10px";
    }
    
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
      content: "18px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
      content: "32px";
    }
    
    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "标题1";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "标题2";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "标题3";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "标题4";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "标题5";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "标题6";
    }
    
    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: "标准字体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
      content: "衬线字体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
      content: "等宽字体";
    }
    </style>
    展开全文
  • vue3中json编辑器

    2021-11-12 14:14:41
    vue3的第三方插件 实现json编辑器 安装依赖 npm i vue3-ace-editor 引入 import {reactive,defineComponent} from 'vue' import {VAceEditor} from 'vue3-ace-editor'; import "ace-builds/webpack-resolver...
  • 这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!之前使用的富文本编辑器是uEditor,...
  • 基于vue-codemirror实现的代码编辑器 开发环境 jshint 2.11.1 jsonlint 1.6.3 script-loader 0.7.2 vue 2.6.11 vue-codemirror 4.0.6 element-ui 2.13.1 (使用到element-ui message组件,提示错误消息,如果不想安装...
  • Vue3 JSON编辑器

    2021-09-22 22:44:15
    npm i vue3-ace-editor 使用示例 <v-ace-editor v-model:value="dataForm.apiResFailExample" @init="initFail" :lang="aceConfig.lang" :theme="aceConfig.theme" :options="aceConfig.options
  • 文章目录 背景 效果预览 具体实现 相关依赖 Vue部分 Js部分 背景 ​ 有些时候我们系统的配置、为了方便会以JSON的形式保存使用,或者其他需要修改JSON的场景,一款方便好用的编辑器就显得很重要了,本文采用的是vue-...
  • Vue使用富文本编辑器

    2020-12-22 11:27:36
    本人用vue使用富文本编辑器踩了很多坑,特记下供大家借鉴。一.选取编辑器刚开始使用的是kindeditor,在npm社区中找到了适用于vue的版本vue-kindeditor。存在如下缺陷:文档不全、网上资料不全、npm社区实例过于简单...
  • 前言:在 Vue日常项目开发中,会遇到将后端传回的代码格式化输出并支持用户编辑的需求。实现方法有很多,可以分别使用 vue2-ace-editor,vue-prism-editor,codemirror等插件方法实现,下面对这三种方法的使用做一个...
  • vue 富文本编辑器

    2021-04-28 21:54:37
    vue项目中使用到 富文本编辑器 npm i wangeditor --save 创建一个组件wangeditor <template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left;"></div> </...
  • Vue富文本编辑器vue-quill-editor-使用-bug问题小图标样式排布错乱
  • Vue实现简单的echarts在线编辑器简述思路效果图页面分布main.js的配置其中ace编辑器的配置按钮功能实现思路具体实现图表初始化图表组件传给父组件option配置对象父组件传给编辑器组件scriptStr字符串编辑器组件...
  • redis 主从同步修改redis.conf配置文件 vi redis.conf 在编辑模式下 输入 /slaveof 来搜索 将slaveof启用 即 将#删除 依次配置所有 slave 并将进程 kill 掉 重启 ...apache 指定的网络名不再可用 原因及解决方法1....
  • 1、安装npm install vue-quill-editor --save2、使用import { quillEditor } from 'vue-quill-editor'...:content="content"//内容对应的字段:options = "editorOption"@change="onEditorChange($event)">...
  • Vue-Quill-Editor 是一个基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。 该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。 一、实现效果: 二、使用方法: 1...
  • 最近遇到个需求,需要在页面中引入富文本编辑器。最后选择使用wangEditor,直接引入即可使用,因此记录一下。 引入方式如下: import E from 'wangeditor' const editor = new E('#div1') editor.create() 更多...
  • 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器...
  • 1.挑个富文本编辑器首先针对自己项目的类型,确定自己要用啥编辑器。...▽wangeditor效果图1.2 tinyMCE如果需要复杂的编辑器推荐tinyMCE(点击跳转),同样也非常简单和优雅,但是文档是英文的,配合...
  • mavonEditor基于Vue的markdown编辑器example (图片展示)PCPC-GIFUse Setup (开始)Install mavon-editor (安装)$ npm install mavon-editor --saveUse (如何引入)index.js:// 全局注册// import with ES6import Vue ...
  •   此组件的功能主要依赖于codemirror,另外加入了js-yaml进行语法检查,方便在实时编辑时提示语法不正确的地方。因此首先需要在项目中安装codemirror与js-yaml: codemirror: npm install codemirror js-yaml: npm ...
  • Vue实现副本编辑器

    2021-02-08 21:18:19
    // 导入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // 导入富文本编辑器对应的样式 import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme...
  • 一控近到都从述序也问ml5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11支器事的后功发久这含层请间业在屏有随些气和域,实按控幻近持的前时来能过后些的处求也务浏蔽等机站...
  • 富文本编辑器,我们之前用过百度的ueditor,在传统模式开发的时候还是很方便的,可以很便利的进行内容编辑,然后获取到编辑内容的信息百度的ueditor地址:但是这次是要整合一个vue的,还没有这么搞过,就试试吧。...
  • 基于JS和vue的sql编辑器功能的实现

    千次阅读 2021-03-02 14:08:08
    {配置项}) 编辑器事件监听 API 封装一个sql编辑器 在父组件中使用 背景 项目中需要前端做一个sql编辑器,能够实现sql语句的格式化、自动匹配大小写、自动提示关键词、表名和字段名,关键词高亮显示等功能。...
  • 前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了...
  • 第一步,下载依赖yum install kindeditor第二步,建立kindeditor.vue组件import '../../node_modules/kindeditor/kindeditor-all.js'import '../../node_modules/kindeditor/lang/zh-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,459
精华内容 16,983
关键字:

vue推荐什么编辑器

vue 订阅