zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    奇数
    简单的登录基于代码的
    偶数
    寻找特定的值
    'k1': 大于66的所有值, 'k2': 小于66的所有值
    差数和
    day1
    页面滑动监听
    jq的ajax初级使用
    在vue中引入swiper
  • 原文地址:https://www.cnblogs.com/javascript9527/p/14688456.html
Copyright © 2011-2022 走看看