vue富文本编辑器插件推荐_vue富文本编辑器的使用

vue富文本编辑器插件推荐_vue富文本编辑器的使用vue富文本编辑器,插件

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

 1、npm install vue-quill-editor -s

2、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);

3、配置(css包含汉化)

<template>
   <!-- 新建日记 -->
   <div class="notes">
      <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>
   </div>
</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() {
          
        } 
}
</script>

<style lang="less" scoped>
   .notes{
      margin-top: 40px;
      margin-bottom: 40px;
      background: #F6F4EC;
      box-shadow: 0 0 15px 0 #ccc;
      padding: 20px 0 0;
       .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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181986.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 层序遍历总结「建议收藏」

    层序遍历总结「建议收藏」以LeetCode102作为例子:题目描述思路描述层序遍历需要用到的数据结构是队列。需要考虑的问题是:如何标识当前节点的层数。有以下三种方法:方法1将每个节点表示为一个二元组(node,level),这种方法效率太低,不考虑。感兴趣可以参考方法2遍历完一层节点后,在队列中插入一个标记节点NULL,这个标记节点没有具体意义,只是标识某一层已经遍历结束。这种方法的缺点在于,假如想要在层序遍历过程中,有元素为NULL,那么标记节点就会出现混淆。这种方法的代码我经常用,如下:c

    2022年10月31日
  • CBOW全称_skip的形式

    CBOW全称_skip的形式skip-gram结构是利用中间词预测邻近词cbow模型是利用上下文词预测中间词一、CBOW1、CBOW之所以叫连续词袋模型,是因为在每个窗口内它也不考虑词序信息,因为它是直接把上下文的词向量相加了,自然就损失了词序信息。CBOW抛弃了词序信息,指的就是在每个窗口内部上下文直接相加而没有考虑词序。2、CBOW过程简单介绍如下(实际算法会用到哈夫曼编码等降维技巧,这里仅以理解为目的简介基本原理):输入为C个V维的vector。其中C为上下文窗口的大小,V为原始编码空间的规模。例如,

  • PhpStorm常用的一些快捷键

    PhpStorm常用的一些快捷键

  • create方法 eslint关闭_Vue项目如何关闭Eslint检测

    create方法 eslint关闭_Vue项目如何关闭Eslint检测读取本地外网IP地址读取本地外网IP地址.根据启动并运行的网卡名称,找到本机实际的IP地址(已知当前运行的无线网卡名包含某一个字符)importjava.net.InterfaceAddress;importj…【原创】大众点评监控平台cat的性能分析由于工作的原因,或者说我们之前内部监控设计和实现有点不满足现有的研发需求,所以调研了一下大众点评开源出来的cat这一套监控系统.今…

  • 微信公众平台开发入门教程——方倍工作室

    微信公众平台开发入门教程——方倍工作室微信公众平台开发入门教程——方倍工作室http://www.cnblogs.com/txw1958/p/wechat-tutorial.html

  • 下列变量名不符合python命名规范的是_下列选项中不符合Python语言变量命名规则的是…

    下列变量名不符合python命名规范的是_下列选项中不符合Python语言变量命名规则的是…【单选题】下列Python保留字中,不用于表示分支结构的是【单选题】以下程序的输出结果是:j=”foriin”12345″:j+=i+’,’print(j)【单选题】在读写文件之前,必须通过哪种方法创建文件对象【单选题】以下程序的输出结果是:s=”ls=[1,2,3,4]forlinls:s+=str(l)print(s)【单选题】Python…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号