vue+element-ui 使用富文本编辑器

vue+element-ui 使用富文本编辑器npm安装编辑器组件npminstallvue-quill-editor–save在components文件夹创建ue.vue组件,如下ue.vue代码如下:<!–组件代码如下–><template><div><scriptid=”editor”type=”text/plain”></s…

大家好,又见面了,我是你们的朋友全栈君。

  1. npm安装编辑器组件
    npm install vue-quill-editor –save

  2. 在components文件夹创建ue.vue组件,如下
    新增ue.vue文件
    ue.vue代码如下:

<!-- 组件代码如下 -->
<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data() {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后,放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy()
    }
  }

</script>
  1. 页面代码部分
<template>
  <div>
    <el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
      </quill-editor>
    </el-card>
  </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 {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    data() {
      return {
        content: null,
        editorOption: {}
      }
    }
  }

</script>

<style scoped>
</style>

以上就是简单的在vue+element-ui 使用富文本编辑器,效果图如下
富文本编辑器

接下来,我们可以美化一下编辑器菜单栏。修改页面代码,如下:

<template>
  <div>
    <el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
        <!-- 自定义toolar -->
        <div id="toolbar" slot="toolbar">
          <!-- Add a bold button -->
          <button class="ql-bold" title="加粗">Bold</button>
          <button class="ql-italic" title="斜体">Italic</button>
          <button class="ql-underline" title="下划线">underline</button>
          <button class="ql-strike" title="删除线">strike</button>
          <button class="ql-blockquote" title="引用"></button>
          <button class="ql-code-block" title="代码"></button>
          <button class="ql-header" value="1" title="标题1"></button>
          <button class="ql-header" value="2" title="标题2"></button>
          <!--Add list -->
          <button class="ql-list" value="ordered" title="有序列表"></button>
          <button class="ql-list" value="bullet" title="无序列表"></button>
          <!-- Add font size dropdown -->
          <select class="ql-header" title="段落格式">
            <option selected>段落</option>
            <option value="1">标题1</option>
            <option value="2">标题2</option>
            <option value="3">标题3</option>
            <option value="4">标题4</option>
            <option value="5">标题5</option>
            <option value="6">标题6</option>
          </select>
          <select class="ql-size" title="字体大小">
            <option value="10px">10px</option>
            <option value="12px">12px</option>
            <option value="14px">14px</option>
            <option value="16px" selected>16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
          </select>
          <select class="ql-font" title="字体">
            <option value="SimSun">宋体</option>
            <option value="SimHei">黑体</option>
            <option value="Microsoft-YaHei">微软雅黑</option>
            <option value="KaiTi">楷体</option>
            <option value="FangSong">仿宋</option>
            <option value="Arial">Arial</option>
          </select>
          <!-- Add subscript and superscript buttons -->
          <select class="ql-color" value="color" title="字体颜色"></select>
          <select class="ql-background" value="background" title="背景颜色"></select>
          <select class="ql-align" value="align" title="对齐"></select>
          <button class="ql-clean" title="还原"></button>
          <!-- You can also add your own -->
        </div>
      </quill-editor>
    </el-card>
  </div>
</template>

<script>
  import {
    Quill,
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  
  //引入font.css 
  import '../../../assets/css/font.css'
  
  // 自定义字体大小
  let Size = Quill.import('attributors/style/size')
  Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
  Quill.register(Size, true)

  // 自定义字体类型
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋体', '黑体'
  ]
  var Font = Quill.import('formats/font')
  Font.whitelist = fonts
  Quill.register(Font, true)

  export default {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    data() {
      return {
        content: null,
        editorOption: {
          placeholder: "请输入",
          theme: "snow", // or 'bubble' 
          modules: {
            toolbar: {
              container: '#toolbar'
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
</style>

在 asset 文件夹下新建font.css 文件,如下图
新增font.css文件
font.css代码如下:

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}

设置后的效果如下图
自定义菜单的富文本编辑器

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

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

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

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

(0)


相关推荐

  • python nonlocal的用法_python nonlocal 的具体原理[通俗易懂]

    python nonlocal的用法_python nonlocal 的具体原理[通俗易懂]很多文章都大概列了下nonlocal的具体用法,比如看到几篇文章写的“nonlocal关键字用来在函数或其他作用域中使用外层(非全局)变量”看完以后我感觉自己是懂了,但光从这句话来说还没完全理解它的真实含义nonlocaldefmake_average():series=[]defaverage(new_value):series.append(new_value)total=sum(s…

  • drupal教程 Drupal的电子商务模块(ecommerce module)[通俗易懂]

    drupal教程 Drupal的电子商务模块(ecommerce module)[通俗易懂]译者:老葛Drupal自身并没有自带一个电子商务模块,但是开发者贡献了一个电子商务模块E-commercemodule。事实上,还有一个模块ubercartmodule,后者看起来功能更强大一些,而且后者有专门的论坛和开发者。但是我还是选择了前者,这个更简单一些的ecommercemodule。原因很简单,与电子商务相关的是支付功能,对于前者来说,存在着大量的各个支付网管的模块功

  • 电子商务系统开发(笔记一)[通俗易懂]

    电子商务系统开发(笔记一)[通俗易懂]第一章 ASP.NET概述1.www的基础知识 1.1 计算机网络 ①地理位置不同的 ②具有独立功能的 ③多台计算机及其外部设备 ④通过通信线路连接起来 ⑤在 网络操作系统,网络管理软件及网络通信协议的管理和协调下 ⑥实现资源共享和信息传递的计算机系统 1.2 …

  • 查看Maven版本_maven部署

    查看Maven版本_maven部署一、下载压缩包官方地址:Maven-DownloadApacheMaven​maven.apache.org直接使用wget命令进行下载maven压缩包>wgethttps://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz二、解压ta…

  • visualsvn安装教程_visualsvn使用教程

    visualsvn安装教程_visualsvn使用教程VisualSVN安装配置与使用1、所选服务器安装包:VisualSVN-Server-2.1.3.msi、2、客户端安装包:TortoiseSVN-1.6.2.16344-win32-svn

  • C语言数组当参数传递

    C语言数组当参数传递在学习C语言的过程中遇到数组作为参数传递的问题一维数组:#includeinttest2(inta[]){ for(inti=0;i<5;i++){ printf("%d",a[i]); }}intmain(){ inta[5]={1,2,3,4,5},*p; p=a; test2(a); }这样我们可以很顺利的在test去遍历这个

发表回复

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

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