vue-quill-editor富文本的簡單使用

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

一、背景

之前就已經使用過其他的富文本，因為使用的不多，是以很快就忘記了。正所謂好記性不然爛筆頭，為了快速開發，節約時間是以簡單的做一下筆記。

二、Vue-Quill-Editor使用

1.簡介

Quill适用于Vue的富文本編輯器,支援服務端渲染和單頁應用.不過有一定的相容性,就是相容IE10+

2.安裝-使用

使用：我這裡使用的是局部注冊，因為使用的不多，是以就不挂載全局了

<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富文本