quill 富文本编辑器的使用。。。

 

 

官方地址： https://quilljs.com/docs/download/

 

 

<!--
    "quill": "^1.3.6",
-->
<template>
  <div>
    <el-button @click="save">保 存</el-button>
    <div id="editor">

    </div>
    <div class="show">

    </div>
  </div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import "quill/dist/quill.core.css";

export default {
  data() {
    return {
      renderStr: ''
    }
  },
  mounted() {
    this.quillInit()
  },
  methods: {
    save() {
      // 获取转化后的html文本
      this.renderStr = this.editor.container.firstChild.innerHTML
      console.log(this.renderStr)
      let show = document.getElementsByClassName('show')[0]
      show.innerHTML = this.renderStr
    },
    quillInit() {
      var toolbarOptions = [
        ["bold", "italic", "underline", "strike"], // toggled buttons
        ["blockquote", "code-block"],
        [{header: 1}, {header: 2}], // custom button values
        [{list: "ordered"}, {list: "bullet"}],
        [{script: "sub"}, {script: "super"}], // superscript/subscript
        [{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: []}],
        ["clean", "image"], // remove formatting button
      ];
      var options = {
        debug: 'info',
        modules: {
          toolbar: toolbarOptions
        },
        placeholder: 'Compose an epic...',
        readOnly: false,
        theme: 'snow'
      };
      this.editor = new Quill('#editor', options);
    }
  }
}
</script>
<style scoped>
#editor {
  height: 400px;
  background: #ffffff;
}

/deep/ .ql-toolbar.ql-snow {
  background: #ffffff;
}
</style>