使用vue-quill-editor

安装vue-quill-editor

 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);
//全局定义文本框的功能和文字提示
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  [{
    header: 1 }, {
    header: 2 }], // custom button values
  [{
    list: "ordered" }, {
    list: "bullet" }],
  [{
    indent: "-1" }, {
    indent: "+1" }], // outdent/indent
  [{
    direction: "rtl" }], // text direction
  [{
    size: ["small", false, "large", "huge"] }], // custom dropdown
  [{
    header: [1, 2, 3, 4, 5, 6, false] }],
  [{
    color: [] }, {
    background: [] }], // dropdown with defaults from theme
  [{
    font: [] }],
  [{
    align: [] }],
  ["image"],
  ["clean"]
];
const titleConfig = [
  {
    Choice: ".ql-bold", title: "加粗" },
  {
    Choice: ".ql-italic", title: "斜体" },
  {
    Choice: ".ql-underline", title: "下划线" },
  {
    Choice: ".ql-header", title: "段落格式" },
  {
    Choice: ".ql-strike", title: "删除线" },
  {
    Choice: ".ql-blockquote"