vue的富文本編輯器使用,並且添加顯示當前輸入字數

下載:

 npm install vue-quill-editor --save

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

組件使用:

  <div class="fu">
      <quill-editor
        class="editor"
        ref="myTextEditor"
        v-model.trim="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)"
      ></quill-editor> 
    </div>

添加輸入框的頭:

添加在data中

// 富文本編輯器header
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜體 下划線 刪除線
            ["blockquote", "code-block"], // 引用  代碼塊
            [{ header: 1 }, { header: 2 }], // 1、2 級標題
            [{ list: "ordered" }], // 有序、無序列表
            [{ script: "sub" }, { script: "super" }], // 上標/下標
            [{ indent: "-1" }, { indent: "+1" }], // 縮進
            [{ direction: "rtl" }], // 文本方向 
            [{ color: [] }, { background: [] }], // {  color: [] }, 字體顏色、字體背景顏色
            [{ font: [] }], // 字體種類
            [{ align: [] }], // 對齊方式
            ["clean"], // 清除文本格式
            ["link", "image"] // , 鏈接、圖片、視頻
          ] //工具菜單欄配置
        },
        placeholder: "請在這里添加產品描述", //提示
        readyOnly: false, //是否只讀
        theme: "snow", //主題 snow/bubble
        syntax: true, //語法檢測
        edit: ""
      }

就是長這樣:

 

 

 然后添加js:

    // 失去焦點
    onEditorBlur(editor) {},
    // 獲得焦點
    onEditorFocus(editor) {},
    // 開始
    onEditorReady(editor) {},
    // 值發生變化
    onEditorChange(editor) { 
      this.edit = editor;
    }

css:

<style  scoped>
.functional {
  height: 473px;
  width: 1120px;
  text-align: left;
  border: 1px #eee solid;
  background: #fff;
  margin: 40px auto;
}
.editor {
  line-height: normal !important;
  width: 1120px;
  height: 430px;
}
.ql-editor {
  line-height: 2.42;
}
.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: "等寬字體";
}
.SizeTiShi {
  float: right;
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-right: 20px;
  margin-top: 50px;
}
</style>

如圖:

 

 完成