vue-quill-editor富文本的简单使用

基于Vue项目的富文本vue-quill-editor的使用

一、背景

之前就已经使用过其他的富文本，因为使用的不多，所以很快就忘记了。正所谓好记性不然烂笔头，为了快速开发，节约时间所以简单的做一下笔记。

二、Vue-Quill-Editor使用

1.简介

Quill适用于Vue的富文本编辑器,支持服务端渲染和单页应用.不过有一定的兼容性,就是兼容IE10+

2.安装-使用

npm install vue-quill-editor -S

使用：我这里使用的是局部注册，因为使用的不多，所以就不挂载全局了

<template>
    <div class="card-page">
        <el-form
            ref="isShowCardForm"
            :model="isShowCardForm"
            label-position="left"
            label-width="120px"
            size='small'
            style="margin-left: 70px">
            <el-form-item  label="须知:" >
                <quill-editor
                    style='width:71%'
                    placeholder="请输入内容"
                    v-model="isShowCardForm.remark"
                     class="quill-editor"
                    :options="editorOption"
                  >
                </quill-editor>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {Quill, quillEditor} from 'vue-quill-editor'
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
export default {
    components: {
      quillEditor,
    },
    data () {

        return {
            isShowCardForm:{
                remark: ""
            },
            editorOption: {
              modules: {
                toolbar: {
                    container: [
                      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
                      ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
                      [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
                      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
                      [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
                      [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
                      [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
                      [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
                      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
                      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
                      [{ font: [] }], // 字体种类-----[{ font: [] }]
                      [{ align: [] }], // 对齐方式-----[{ align: [] }]
                      ["clean"], // 清除文本格式-----['clean']
                      ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']

                    ],
                }
              },
            },

        }
    },

}
</script>



<style lang="scss">
  @import '~quill/dist/quill.core.css';
  @import '~quill/dist/quill.snow.css';
  @import '~quill/dist/quill.bubble.css';
  //这里是为了防止小图标样式乱
.quill-editor{
      -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 1.42;
        height: 100%;
        outline: none;
        padding: 0 !important;
        tab-size: 4;
        -moz-tab-size: 4;
        text-align: left;
        word-wrap: break-word;
}
</style>

总结

我这里主要是为了记录一下自己使用过的富文本，不喜勿喷。如果这里不能满足你的需求，你可以看看这位大佬的写法
地址：vue-quill-edito富文本