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)
blank

相关推荐

  • 常见电机分类和驱动原理动画[通俗易懂]

    常见电机分类和驱动原理动画[通俗易懂]常见电机分类和驱动原理动画文章目录常见电机分类和驱动原理动画基本分类直流有刷电机直流无刷电机(BLDC)步进电机(Steppermotor)舵机(steeringengine)伺服电机(servomotor)基本分类直流有刷电机电机的基本原理就是电磁感应:旋转磁场带动转子转动。电动机是由定子和转子组成,一个产生旋转磁场,一个为磁极,电机的转子(轴承)就转起来了。这便实现了电能->磁能->机械能的转换直流无刷电机(BLDC)BLDC的定子(stator)是通电的线圈,而

  • 仙剑—相爱

    仙剑—相爱

  • mybatisplus实现关联查询(为什么要使用mybatis)

    关联查询数据模型订单商品模型:目标:分析表与表之间的关系。分析步骤:1、按模块去分析表,不要将系统全部表一次性分析2、了解每个表存储了什么业务数据3、了解表中关键字段(主键、外键、索引字段、非空字段)4、了解表与表之间数据库级别的关系(外键关系)5、表与表之间的业务关系(一对一、一对多、多对多)注意:分析表与表之间的业务关系时一定要建立在某种业务意

  • Vim 3 vimrc[通俗易懂]

    Vim 3 vimrc[通俗易懂]文章目录什么是vimrc基本修改UI相关配置编码相关配置文件相关配置编辑器相关配置按键映射“键我的vimrc小结什么是vimrcvimrc是Vim的配置文件,Vim在启动时会加载vimrc文件,你能想到的几乎所有的配置(包括主题,快捷键,插件设置等等),都可以配置在vimrc中,所以,vimrc在Vim使用过程中有着至关重要的地位.Vim是极…

  • mysql longtext,在MySQL中,当只需要TEXT时,LONGTEXT是否会浪费空间?[通俗易懂]

    mysql longtext,在MySQL中,当只需要TEXT时,LONGTEXT是否会浪费空间?[通俗易懂]TEXT[(M)][CHARACTERSETcharset_name][COLLATEcollation_name]ATEXTcolumnwithamaximumlengthof65,535(2^16−1)characters.Theeffectivemaximumlengthislessifthevaluecontainsmultibytec…

  • 用户登录界面[通俗易懂]

    用户登录界面[通俗易懂]publicclassLoginIn{privateStringname;privateStringpassword;publicLoginIn(Stringname,Stri

发表回复

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

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