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)


相关推荐

  • 电网101、104规约解析(Java)「建议收藏」

    电网101、104规约解析(Java)「建议收藏」国家电网101规约解析(Java)最近在研究国家电网的101与104规约,也就是DL/T634.5101-2002和DL/T634.5104-2009。因为要做一个规约解析的软件(基于Android平台的),刚开始接触的也是一头雾水,因为没有接触过这方面的知识,所以就在网上搜索各种技术帖,大神经验什么的。后来在网上找到了一个软件–IEC8705(报文翻译工具).exe,这个##可以解析一…

  • 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop转载自:https://www.imooc.com/article/17571网页可见区域高:document.body.clientHeight网页正文全文高:document.body.scrollHeight网页可见区域高(包括边线的高):document.body.offsetHeight网页被卷去的高:document.body.scrollTop屏幕分辨率高:window.screen…

  • h2数据库使用_数据库教程

    h2数据库使用_数据库教程H2数据库是一个开源的关系型数据库。H2是一个采用java语言编写的嵌入式数据库引擎,只是一个类库(即只有一个jar文件),可以直接嵌入到应用项目中,不受平台的限制应用场景:可以同应用程序打包在一起发布,可以非常方便地存储少量结构化数据可用于单元测试可以用作缓存,即当做内存数据库H2的产品优势:纯Java编写,不受平台的限制;只有一个jar文件,适合作为嵌入式数据库使用;h2提供了一个十分方便的web控制台用于操作和管理数据库内容;功能完整,支持标准SQL和JDBC。麻雀虽小五

    2022年10月10日
  • Pytorch加载自己的数据集(使用DataLoader读取Dataset)[通俗易懂]

    Pytorch加载自己的数据集(使用DataLoader读取Dataset)[通俗易懂]1.我们经常可以看到Pytorch加载数据集会用到官方整理好的数据集。很多时候我们需要加载自己的数据集,这时候我们需要使用Dataset和DataLoaderDataset:是被封装进DataLoader里,实现该方法封装自己的数据和标签。DataLoader:被封装入DataLoaderIter里,实现该方法达到数据的划分。2.Dataset阅读源码后,我们可以指导,继承该方法必须…

  • CodeForces 10D. LCIS 最长公共上升子序列模板题 + 打印路径

    CodeForces 10D. LCIS 最长公共上升子序列模板题 + 打印路径

  • JAVA 大数据Excel POI生成导出

    JAVA 大数据Excel POI生成导出一、背景在工作中经常会将List导出Excel,但是有时数据量很大,需要一次性导出。为防止各个系统重复造轮子,本文通过注解方式来实现Excel的普通、分片生成。二、直接上代码1、导入依赖<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId>…

发表回复

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

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