精华内容
下载资源
问答
  • vue中使用富文本编辑器

    千次阅读 2019-08-13 19:47:26
    vue中使用富文本编辑器 vue中会经常用到富文本编辑器,今天遇到一个问题,想要点击按钮显示富文本编辑器,在网上找了很多都不合适不能进行有效的显示,今天跟大家分享简单快速的方法操作富文本编辑器无论是vue-cli...

    vue中使用富文本编辑器

    vue中会经常用到富文本编辑器,今天遇到一个问题,想要点击按钮显示富文本编辑器,在网上找了很多都不合适不能进行有效的显示,今天跟大家分享简单快速的方法操作富文本编辑器无论是vue-cli3.0还是vue-cli2.0都可以进行操作
    GitHub ------- https://github.com/surmon-china/vue-quill-editor

    在这里插入图片描述
    打开页面向下滑动

    在这里插入图片描述
    安装依赖 ↑

    在这里插入图片描述
    如果在其他页面也需要引用可以进行全局的安装(上面的),如果只在当前页面可以只在当前页面引用(下面)↑
    在这里插入图片描述
    这样加在页面中就可以进行显示~

    展开全文
  • 主要介绍了Vue 中使用富文本编译器wangEditor3的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue中使用富文本

    2021-03-09 17:35:40
    效果图 1.npm i vue-quill-editor --save 2.在main.js引入 // 引入富文本插件 import VueQuillEditor from 'vue-quill-editor' // 引入富文本样式 import 'quill/dist/quill....// 使用富文本 Vue.use(VueQuillEdito

    效果图
    效果图
    1.npm i vue-quill-editor --save
    2.在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)
    

    3.在组件中使用

    <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
    

    v-model=“content” 绑定输入的内容;
    options 配置参数项

    在这里插入图片描述

    展开全文
  • ant design vue中使用富文本vue-quill-editor 在项目中使用富文本 使用富文本可以存储一些带样式的文本信息(这里不谈图片,尚未解决),在获取到富文本信息时,存储到数据库要是用text类型来进行数据的存储 首先再...

    ant design vue中使用富文本vue-quill-editor

    在项目中使用富文本

    使用富文本可以存储一些带样式的文本信息(这里不谈图片,尚未解决),在获取到富文本信息时,存储到数据库要是用text类型来进行数据的存储

    • 首先再引入vue-quill-editor
    yarn add vue-quill-editor
    
    • 在项目中引入quill的css,文章最后是所需css的源代码

      我的路径是src/views/assets/css

    在这里插入图片描述

    • 在main.js中进行相关的配置
    import VueQuillEditor from 'vue-quill-editor'
    import './views/assets/css/quill.core.css'
    import './views/assets/css/quill.snow.css'
    import './views/assets/css/quill.bubble.css'
    Vue.use(VueQuillEditor)
    
    • 创建一个富文本组件course-rich-text.vue,在想要展示的地方直接调用就好。
    <template>
      <div>
        <quill-editor
          :content="editorContent"
          :options="newOption"
          @change="editorChange"
          ref="newEditor"
          style="height: 200px; margin-bottom: 54px"
        >
        </quill-editor>
      </div>
    </template>
    
    <script>
    import { quillEditor } from 'vue-quill-editor'
    export default {
      name: 'CourseRichText',
      props: ['text', 'editorId'],
      components: { quillEditor },
      data () {
        return {
          editorContent: '',
          uniqueId: '',
          imgPercent: 0,
          imageLoading: false,
          newOption: {
            placeholder: '请填写简介',
            history: {
              delay: 100,
              maxStack: 100,
              userOnly: false
            },
            modules: {
              toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'font': [] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'align': [] }],
                ['clean'],
                ['link', 'image', 'video']
              ]
            }
          }
        }
      },
      methods: {
        editorChange ({ editor, html, text }) {
          this.$emit('editorChange', html)
        }
      },
      watch: {
          //监控富文本内的变化
        text: function (val) {
          this.editorContent = val
        }
      },
      mounted () {
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    
    • 在需要的地方调用即可
    <template>
    //在需要用的富文本的地方加上下面标签
                <richText
                  :text="content"
                  @editorChange="editorChange"
                />
    </template>
    <script>
    import richText from './course-rich-text'
        export default {
            components: { richText },
            data () {
        	return {
                 content: '',
            	}
            },
            methods: {
                  editorChange: function (html) {
          			this.content = html
        		}    
            }
        }
    </script>
    
    • 如果你想在其他地方展示富文本的东西时,可以使用v-html来反向解析
    //text即为要展示的富文本
    <span v-html="text"></span>
    

    附源代码

    quill.bubble.css源代码

    /*!
     * Quill Editor v1.3.6
     * https://quilljs.com/
     * Copyright (c) 2014, Jason Chen
     * Copyright (c) 2013, salesforce.com
     */
    .ql-container {
      box-sizing: border-box;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 13px;
      height: 100%;
      margin: 0px;
      position: relative;
    }
    .ql-container.ql-disabled .ql-tooltip {
      visibility: hidden;
    }
    .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
      pointer-events: none;
    }
    .ql-clipboard {
      left: -100000px;
      height: 1px;
      overflow-y: hidden;
      position: absolute;
      top: 50%;
    }
    .ql-clipboard p {
      margin: 0;
      padding: 0;
    }
    .ql-editor {
      box-sizing: border-box;
      line-height: 1.42;
      height: 100%;
      outline: none;
      overflow-y: auto;
      padding: 12px 15px;
      tab-size: 4;
      -moz-tab-size: 4;
      text-align: left;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .ql-editor > * {
      cursor: text;
    }
    .ql-editor p,
    .ql-editor ol,
    .ql-editor ul,
    .ql-editor pre,
    .ql-editor blockquote,
    .ql-editor h1,
    .ql-editor h2,
    .ql-editor h3,
    .ql-editor h4,
    .ql-editor h5,
    .ql-editor h6 {
      margin: 0;
      padding: 0;
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol,
    .ql-editor ul {
      padding-left: 1.5em;
    }
    .ql-editor ol > li,
    .ql-editor ul > li {
      list-style-type: none;
    }
    .ql-editor ul > li::before {
      content: '\2022';
    }
    .ql-editor ul[data-checked=true],
    .ql-editor ul[data-checked=false] {
      pointer-events: none;
    }
    .ql-editor ul[data-checked=true] > li *,
    .ql-editor ul[data-checked=false] > li * {
      pointer-events: all;
    }
    .ql-editor ul[data-checked=true] > li::before,
    .ql-editor ul[data-checked=false] > li::before {
      color: #777;
      cursor: pointer;
      pointer-events: all;
    }
    .ql-editor ul[data-checked=true] > li::before {
      content: '\2611';
    }
    .ql-editor ul[data-checked=false] > li::before {
      content: '\2610';
    }
    .ql-editor li::before {
      display: inline-block;
      white-space: nowrap;
      width: 1.2em;
    }
    .ql-editor li:not(.ql-direction-rtl)::before {
      margin-left: -1.5em;
      margin-right: 0.3em;
      text-align: right;
    }
    .ql-editor li.ql-direction-rtl::before {
      margin-left: 0.3em;
      margin-right: -1.5em;
    }
    .ql-editor ol li:not(.ql-direction-rtl),
    .ql-editor ul li:not(.ql-direction-rtl) {
      padding-left: 1.5em;
    }
    .ql-editor ol li.ql-direction-rtl,
    .ql-editor ul li.ql-direction-rtl {
      padding-right: 1.5em;
    }
    .ql-editor ol li {
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
      counter-increment: list-0;
    }
    .ql-editor ol li:before {
      content: counter(list-0, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-1 {
      counter-increment: list-1;
    }
    .ql-editor ol li.ql-indent-1:before {
      content: counter(list-1, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-1 {
      counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-2 {
      counter-increment: list-2;
    }
    .ql-editor ol li.ql-indent-2:before {
      content: counter(list-2, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-2 {
      counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-3 {
      counter-increment: list-3;
    }
    .ql-editor ol li.ql-indent-3:before {
      content: counter(list-3, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-3 {
      counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-4 {
      counter-increment: list-4;
    }
    .ql-editor ol li.ql-indent-4:before {
      content: counter(list-4, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-4 {
      counter-reset: list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-5 {
      counter-increment: list-5;
    }
    .ql-editor ol li.ql-indent-5:before {
      content: counter(list-5, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-5 {
      counter-reset: list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-6 {
      counter-increment: list-6;
    }
    .ql-editor ol li.ql-indent-6:before {
      content: counter(list-6, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-6 {
      counter-reset: list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-7 {
      counter-increment: list-7;
    }
    .ql-editor ol li.ql-indent-7:before {
      content: counter(list-7, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-7 {
      counter-reset: list-8 list-9;
    }
    .ql-editor ol li.ql-indent-8 {
      counter-increment: list-8;
    }
    .ql-editor ol li.ql-indent-8:before {
      content: counter(list-8, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-8 {
      counter-reset: list-9;
    }
    .ql-editor ol li.ql-indent-9 {
      counter-increment: list-9;
    }
    .ql-editor ol li.ql-indent-9:before {
      content: counter(list-9, decimal) '. ';
    }
    .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 3em;
    }
    .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 4.5em;
    }
    .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 3em;
    }
    .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 4.5em;
    }
    .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 6em;
    }
    .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 7.5em;
    }
    .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 6em;
    }
    .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 7.5em;
    }
    .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 9em;
    }
    .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 10.5em;
    }
    .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 9em;
    }
    .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 10.5em;
    }
    .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 12em;
    }
    .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 13.5em;
    }
    .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 12em;
    }
    .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 13.5em;
    }
    .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 15em;
    }
    .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 16.5em;
    }
    .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 15em;
    }
    .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 16.5em;
    }
    .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 18em;
    }
    .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 19.5em;
    }
    .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 18em;
    }
    .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 19.5em;
    }
    .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 21em;
    }
    .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 22.5em;
    }
    .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 21em;
    }
    .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 22.5em;
    }
    .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 24em;
    }
    .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 25.5em;
    }
    .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 24em;
    }
    .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 25.5em;
    }
    .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 27em;
    }
    .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 28.5em;
    }
    .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 27em;
    }
    .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 28.5em;
    }
    .ql-editor .ql-video {
      display: block;
      max-width: 100%;
    }
    .ql-editor .ql-video.ql-align-center {
      margin: 0 auto;
    }
    .ql-editor .ql-video.ql-align-right {
      margin: 0 0 0 auto;
    }
    .ql-editor .ql-bg-black {
      background-color: #000;
    }
    .ql-editor .ql-bg-red {
      background-color: #e60000;
    }
    .ql-editor .ql-bg-orange {
      background-color: #f90;
    }
    .ql-editor .ql-bg-yellow {
      background-color: #ff0;
    }
    .ql-editor .ql-bg-green {
      background-color: #008a00;
    }
    .ql-editor .ql-bg-blue {
      background-color: #06c;
    }
    .ql-editor .ql-bg-purple {
      background-color: #93f;
    }
    .ql-editor .ql-color-white {
      color: #fff;
    }
    .ql-editor .ql-color-red {
      color: #e60000;
    }
    .ql-editor .ql-color-orange {
      color: #f90;
    }
    .ql-editor .ql-color-yellow {
      color: #ff0;
    }
    .ql-editor .ql-color-green {
      color: #008a00;
    }
    .ql-editor .ql-color-blue {
      color: #06c;
    }
    .ql-editor .ql-color-purple {
      color: #93f;
    }
    .ql-editor .ql-font-serif {
      font-family: Georgia, Times New Roman, serif;
    }
    .ql-editor .ql-font-monospace {
      font-family: Monaco, Courier New, monospace;
    }
    .ql-editor .ql-size-small {
      font-size: 0.75em;
    }
    .ql-editor .ql-size-large {
      font-size: 1.5em;
    }
    .ql-editor .ql-size-huge {
      font-size: 2.5em;
    }
    .ql-editor .ql-direction-rtl {
      direction: rtl;
      text-align: inherit;
    }
    .ql-editor .ql-align-center {
      text-align: center;
    }
    .ql-editor .ql-align-justify {
      text-align: justify;
    }
    .ql-editor .ql-align-right {
      text-align: right;
    }
    .ql-editor.ql-blank::before {
      color: rgba(0,0,0,0.6);
      content: attr(data-placeholder);
      font-style: italic;
      left: 15px;
      pointer-events: none;
      position: absolute;
      right: 15px;
    }
    .ql-bubble.ql-toolbar:after,
    .ql-bubble .ql-toolbar:after {
      clear: both;
      content: '';
      display: table;
    }
    .ql-bubble.ql-toolbar button,
    .ql-bubble .ql-toolbar button {
      background: none;
      border: none;
      cursor: pointer;
      display: inline-block;
      float: left;
      height: 24px;
      padding: 3px 5px;
      width: 28px;
    }
    .ql-bubble.ql-toolbar button svg,
    .ql-bubble .ql-toolbar button svg {
      float: left;
      height: 100%;
    }
    .ql-bubble.ql-toolbar button:active:hover,
    .ql-bubble .ql-toolbar button:active:hover {
      outline: none;
    }
    .ql-bubble.ql-toolbar input.ql-image[type=file],
    .ql-bubble .ql-toolbar input.ql-image[type=file] {
      display: none;
    }
    .ql-bubble.ql-toolbar button:hover,
    .ql-bubble .ql-toolbar button:hover,
    .ql-bubble.ql-toolbar button:focus,
    .ql-bubble .ql-toolbar button:focus,
    .ql-bubble.ql-toolbar button.ql-active,
    .ql-bubble .ql-toolbar button.ql-active,
    .ql-bubble.ql-toolbar .ql-picker-label:hover,
    .ql-bubble .ql-toolbar .ql-picker-label:hover,
    .ql-bubble.ql-toolbar .ql-picker-label.ql-active,
    .ql-bubble .ql-toolbar .ql-picker-label.ql-active,
    .ql-bubble.ql-toolbar .ql-picker-item:hover,
    .ql-bubble .ql-toolbar .ql-picker-item:hover,
    .ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
    .ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
      color: #fff;
    }
    .ql-bubble.ql-toolbar button:hover .ql-fill,
    .ql-bubble .ql-toolbar button:hover .ql-fill,
    .ql-bubble.ql-toolbar button:focus .ql-fill,
    .ql-bubble .ql-toolbar button:focus .ql-fill,
    .ql-bubble.ql-toolbar button.ql-active .ql-fill,
    .ql-bubble .ql-toolbar button.ql-active .ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
      fill: #fff;
    }
    .ql-bubble.ql-toolbar button:hover .ql-stroke,
    .ql-bubble .ql-toolbar button:hover .ql-stroke,
    .ql-bubble.ql-toolbar button:focus .ql-stroke,
    .ql-bubble .ql-toolbar button:focus .ql-stroke,
    .ql-bubble.ql-toolbar button.ql-active .ql-stroke,
    .ql-bubble .ql-toolbar button.ql-active .ql-stroke,
    .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
    .ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
    .ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
    .ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
    .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
    .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
      stroke: #fff;
    }
    @media (pointer: coarse) {
      .ql-bubble.ql-toolbar button:hover:not(.ql-active),
      .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
        color: #ccc;
      }
      .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
      .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
      .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
      .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
        fill: #ccc;
      }
      .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
      .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
      .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
      .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
        stroke: #ccc;
      }
    }
    .ql-bubble {
      box-sizing: border-box;
    }
    .ql-bubble * {
      box-sizing: border-box;
    }
    .ql-bubble .ql-hidden {
      display: none;
    }
    .ql-bubble .ql-out-bottom,
    .ql-bubble .ql-out-top {
      visibility: hidden;
    }
    .ql-bubble .ql-tooltip {
      position: absolute;
      transform: translateY(10px);
    }
    .ql-bubble .ql-tooltip a {
      cursor: pointer;
      text-decoration: none;
    }
    .ql-bubble .ql-tooltip.ql-flip {
      transform: translateY(-10px);
    }
    .ql-bubble .ql-formats {
      display: inline-block;
      vertical-align: middle;
    }
    .ql-bubble .ql-formats:after {
      clear: both;
      content: '';
      display: table;
    }
    .ql-bubble .ql-stroke {
      fill: none;
      stroke: #ccc;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
    .ql-bubble .ql-stroke-miter {
      fill: none;
      stroke: #ccc;
      stroke-miterlimit: 10;
      stroke-width: 2;
    }
    .ql-bubble .ql-fill,
    .ql-bubble .ql-stroke.ql-fill {
      fill: #ccc;
    }
    .ql-bubble .ql-empty {
      fill: none;
    }
    .ql-bubble .ql-even {
      fill-rule: evenodd;
    }
    .ql-bubble .ql-thin,
    .ql-bubble .ql-stroke.ql-thin {
      stroke-width: 1;
    }
    .ql-bubble .ql-transparent {
      opacity: 0.4;
    }
    .ql-bubble .ql-direction svg:last-child {
      display: none;
    }
    .ql-bubble .ql-direction.ql-active svg:last-child {
      display: inline;
    }
    .ql-bubble .ql-direction.ql-active svg:first-child {
      display: none;
    }
    .ql-bubble .ql-editor h1 {
      font-size: 2em;
    }
    .ql-bubble .ql-editor h2 {
      font-size: 1.5em;
    }
    .ql-bubble .ql-editor h3 {
      font-size: 1.17em;
    }
    .ql-bubble .ql-editor h4 {
      font-size: 1em;
    }
    .ql-bubble .ql-editor h5 {
      font-size: 0.83em;
    }
    .ql-bubble .ql-editor h6 {
      font-size: 0.67em;
    }
    .ql-bubble .ql-editor a {
      text-decoration: underline;
    }
    .ql-bubble .ql-editor blockquote {
      border-left: 4px solid #ccc;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-left: 16px;
    }
    .ql-bubble .ql-editor code,
    .ql-bubble .ql-editor pre {
      background-color: #f0f0f0;
      border-radius: 3px;
    }
    .ql-bubble .ql-editor pre {
      white-space: pre-wrap;
      margin-bottom: 5px;
      margin-top: 5px;
      padding: 5px 10px;
    }
    .ql-bubble .ql-editor code {
      font-size: 85%;
      padding: 2px 4px;
    }
    .ql-bubble .ql-editor pre.ql-syntax {
      background-color: #23241f;
      color: #f8f8f2;
      overflow: visible;
    }
    .ql-bubble .ql-editor img {
      max-width: 100%;
    }
    .ql-bubble .ql-picker {
      color: #ccc;
      display: inline-block;
      float: left;
      font-size: 14px;
      font-weight: 500;
      height: 24px;
      position: relative;
      vertical-align: middle;
    }
    .ql-bubble .ql-picker-label {
      cursor: pointer;
      display: inline-block;
      height: 100%;
      padding-left: 8px;
      padding-right: 2px;
      position: relative;
      width: 100%;
    }
    .ql-bubble .ql-picker-label::before {
      display: inline-block;
      line-height: 22px;
    }
    .ql-bubble .ql-picker-options {
      background-color: #444;
      display: none;
      min-width: 100%;
      padding: 4px 8px;
      position: absolute;
      white-space: nowrap;
    }
    .ql-bubble .ql-picker-options .ql-picker-item {
      cursor: pointer;
      display: block;
      padding-bottom: 5px;
      padding-top: 5px;
    }
    .ql-bubble .ql-picker.ql-expanded .ql-picker-label {
      color: #777;
      z-index: 2;
    }
    .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
      fill: #777;
    }
    .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
      stroke: #777;
    }
    .ql-bubble .ql-picker.ql-expanded .ql-picker-options {
      display: block;
      margin-top: -1px;
      top: 100%;
      z-index: 1;
    }
    .ql-bubble .ql-color-picker,
    .ql-bubble .ql-icon-picker {
      width: 28px;
    }
    .ql-bubble .ql-color-picker .ql-picker-label,
    .ql-bubble .ql-icon-picker .ql-picker-label {
      padding: 2px 4px;
    }
    .ql-bubble .ql-color-picker .ql-picker-label svg,
    .ql-bubble .ql-icon-picker .ql-picker-label svg {
      right: 4px;
    }
    .ql-bubble .ql-icon-picker .ql-picker-options {
      padding: 4px 0px;
    }
    .ql-bubble .ql-icon-picker .ql-picker-item {
      height: 24px;
      width: 24px;
      padding: 2px 4px;
    }
    .ql-bubble .ql-color-picker .ql-picker-options {
      padding: 3px 5px;
      width: 152px;
    }
    .ql-bubble .ql-color-picker .ql-picker-item {
      border: 1px solid transparent;
      float: left;
      height: 16px;
      margin: 2px;
      padding: 0px;
      width: 16px;
    }
    .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
      position: absolute;
      margin-top: -9px;
      right: 0;
      top: 50%;
      width: 18px;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
    .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
    .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
    .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
      content: attr(data-label);
    }
    .ql-bubble .ql-picker.ql-header {
      width: 98px;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item::before {
      content: 'Normal';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: 'Heading 1';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: 'Heading 2';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: 'Heading 3';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: 'Heading 4';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: 'Heading 5';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: 'Heading 6';
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      font-size: 2em;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      font-size: 1.5em;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      font-size: 1.17em;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      font-size: 1em;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      font-size: 0.83em;
    }
    .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      font-size: 0.67em;
    }
    .ql-bubble .ql-picker.ql-font {
      width: 108px;
    }
    .ql-bubble .ql-picker.ql-font .ql-picker-label::before,
    .ql-bubble .ql-picker.ql-font .ql-picker-item::before {
      content: 'Sans Serif';
    }
    .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
    .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      content: 'Serif';
    }
    .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
    .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      content: 'Monospace';
    }
    .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      font-family: Georgia, Times New Roman, serif;
    }
    .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      font-family: Monaco, Courier New, monospace;
    }
    .ql-bubble .ql-picker.ql-size {
      width: 98px;
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-label::before,
    .ql-bubble .ql-picker.ql-size .ql-picker-item::before {
      content: 'Normal';
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      content: 'Small';
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      content: 'Large';
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      content: 'Huge';
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      font-size: 10px;
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      font-size: 18px;
    }
    .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      font-size: 32px;
    }
    .ql-bubble .ql-color-picker.ql-background .ql-picker-item {
      background-color: #fff;
    }
    .ql-bubble .ql-color-picker.ql-color .ql-picker-item {
      background-color: #000;
    }
    .ql-bubble .ql-toolbar .ql-formats {
      margin: 8px 12px 8px 0px;
    }
    .ql-bubble .ql-toolbar .ql-formats:first-child {
      margin-left: 12px;
    }
    .ql-bubble .ql-color-picker svg {
      margin: 1px;
    }
    .ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
    .ql-bubble .ql-color-picker .ql-picker-item:hover {
      border-color: #fff;
    }
    .ql-bubble .ql-tooltip {
      background-color: #444;
      border-radius: 25px;
      color: #fff;
    }
    .ql-bubble .ql-tooltip-arrow {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      content: " ";
      display: block;
      left: 50%;
      margin-left: -6px;
      position: absolute;
    }
    .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
      border-bottom: 6px solid #444;
      top: -6px;
    }
    .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
      border-top: 6px solid #444;
      bottom: -6px;
    }
    .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
      display: block;
    }
    .ql-bubble .ql-tooltip.ql-editing .ql-formats {
      visibility: hidden;
    }
    .ql-bubble .ql-tooltip-editor {
      display: none;
    }
    .ql-bubble .ql-tooltip-editor input[type=text] {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 13px;
      height: 100%;
      outline: none;
      padding: 10px 20px;
      position: absolute;
      width: 100%;
    }
    .ql-bubble .ql-tooltip-editor a {
      top: 10px;
      position: absolute;
      right: 20px;
    }
    .ql-bubble .ql-tooltip-editor a:before {
      color: #ccc;
      content: "\D7";
      font-size: 16px;
      font-weight: bold;
    }
    .ql-container.ql-bubble:not(.ql-disabled) a {
      position: relative;
      white-space: nowrap;
    }
    .ql-container.ql-bubble:not(.ql-disabled) a::before {
      background-color: #444;
      border-radius: 15px;
      top: -5px;
      font-size: 12px;
      color: #fff;
      content: attr(href);
      font-weight: normal;
      overflow: hidden;
      padding: 5px 15px;
      text-decoration: none;
      z-index: 1;
    }
    .ql-container.ql-bubble:not(.ql-disabled) a::after {
      border-top: 6px solid #444;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      top: 0;
      content: " ";
      height: 0;
      width: 0;
    }
    .ql-container.ql-bubble:not(.ql-disabled) a::before,
    .ql-container.ql-bubble:not(.ql-disabled) a::after {
      left: 0;
      margin-left: 50%;
      position: absolute;
      transform: translate(-50%, -100%);
      transition: visibility 0s ease 200ms;
      visibility: hidden;
    }
    .ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
    .ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
      visibility: visible;
    }
    
    

    quill.core.css源代码

    /*!
     * Quill Editor v1.3.6
     * https://quilljs.com/
     * Copyright (c) 2014, Jason Chen
     * Copyright (c) 2013, salesforce.com
     */
    .ql-container {
      box-sizing: border-box;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 13px;
      height: 100%;
      margin: 0px;
      position: relative;
    }
    .ql-container.ql-disabled .ql-tooltip {
      visibility: hidden;
    }
    .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
      pointer-events: none;
    }
    .ql-clipboard {
      left: -100000px;
      height: 1px;
      overflow-y: hidden;
      position: absolute;
      top: 50%;
    }
    .ql-clipboard p {
      margin: 0;
      padding: 0;
    }
    .ql-editor {
      box-sizing: border-box;
      line-height: 1.42;
      height: 100%;
      outline: none;
      overflow-y: auto;
      padding: 12px 15px;
      tab-size: 4;
      -moz-tab-size: 4;
      text-align: left;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .ql-editor > * {
      cursor: text;
    }
    .ql-editor p,
    .ql-editor ol,
    .ql-editor ul,
    .ql-editor pre,
    .ql-editor blockquote,
    .ql-editor h1,
    .ql-editor h2,
    .ql-editor h3,
    .ql-editor h4,
    .ql-editor h5,
    .ql-editor h6 {
      margin: 0;
      padding: 0;
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol,
    .ql-editor ul {
      padding-left: 1.5em;
    }
    .ql-editor ol > li,
    .ql-editor ul > li {
      list-style-type: none;
    }
    .ql-editor ul > li::before {
      content: '\2022';
    }
    .ql-editor ul[data-checked=true],
    .ql-editor ul[data-checked=false] {
      pointer-events: none;
    }
    .ql-editor ul[data-checked=true] > li *,
    .ql-editor ul[data-checked=false] > li * {
      pointer-events: all;
    }
    .ql-editor ul[data-checked=true] > li::before,
    .ql-editor ul[data-checked=false] > li::before {
      color: #777;
      cursor: pointer;
      pointer-events: all;
    }
    .ql-editor ul[data-checked=true] > li::before {
      content: '\2611';
    }
    .ql-editor ul[data-checked=false] > li::before {
      content: '\2610';
    }
    .ql-editor li::before {
      display: inline-block;
      white-space: nowrap;
      width: 1.2em;
    }
    .ql-editor li:not(.ql-direction-rtl)::before {
      margin-left: -1.5em;
      margin-right: 0.3em;
      text-align: right;
    }
    .ql-editor li.ql-direction-rtl::before {
      margin-left: 0.3em;
      margin-right: -1.5em;
    }
    .ql-editor ol li:not(.ql-direction-rtl),
    .ql-editor ul li:not(.ql-direction-rtl) {
      padding-left: 1.5em;
    }
    .ql-editor ol li.ql-direction-rtl,
    .ql-editor ul li.ql-direction-rtl {
      padding-right: 1.5em;
    }
    .ql-editor ol li {
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
      counter-increment: list-0;
    }
    .ql-editor ol li:before {
      content: counter(list-0, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-1 {
      counter-increment: list-1;
    }
    .ql-editor ol li.ql-indent-1:before {
      content: counter(list-1, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-1 {
      counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-2 {
      counter-increment: list-2;
    }
    .ql-editor ol li.ql-indent-2:before {
      content: counter(list-2, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-2 {
      counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-3 {
      counter-increment: list-3;
    }
    .ql-editor ol li.ql-indent-3:before {
      content: counter(list-3, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-3 {
      counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-4 {
      counter-increment: list-4;
    }
    .ql-editor ol li.ql-indent-4:before {
      content: counter(list-4, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-4 {
      counter-reset: list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-5 {
      counter-increment: list-5;
    }
    .ql-editor ol li.ql-indent-5:before {
      content: counter(list-5, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-5 {
      counter-reset: list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-6 {
      counter-increment: list-6;
    }
    .ql-editor ol li.ql-indent-6:before {
      content: counter(list-6, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-6 {
      counter-reset: list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-7 {
      counter-increment: list-7;
    }
    .ql-editor ol li.ql-indent-7:before {
      content: counter(list-7, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-7 {
      counter-reset: list-8 list-9;
    }
    .ql-editor ol li.ql-indent-8 {
      counter-increment: list-8;
    }
    .ql-editor ol li.ql-indent-8:before {
      content: counter(list-8, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-8 {
      counter-reset: list-9;
    }
    .ql-editor ol li.ql-indent-9 {
      counter-increment: list-9;
    }
    .ql-editor ol li.ql-indent-9:before {
      content: counter(list-9, decimal) '. ';
    }
    .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 3em;
    }
    .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 4.5em;
    }
    .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 3em;
    }
    .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 4.5em;
    }
    .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 6em;
    }
    .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 7.5em;
    }
    .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 6em;
    }
    .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 7.5em;
    }
    .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 9em;
    }
    .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 10.5em;
    }
    .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 9em;
    }
    .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 10.5em;
    }
    .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 12em;
    }
    .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 13.5em;
    }
    .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 12em;
    }
    .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 13.5em;
    }
    .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 15em;
    }
    .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 16.5em;
    }
    .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 15em;
    }
    .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 16.5em;
    }
    .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 18em;
    }
    .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 19.5em;
    }
    .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 18em;
    }
    .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 19.5em;
    }
    .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 21em;
    }
    .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 22.5em;
    }
    .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 21em;
    }
    .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 22.5em;
    }
    .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 24em;
    }
    .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 25.5em;
    }
    .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 24em;
    }
    .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 25.5em;
    }
    .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 27em;
    }
    .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 28.5em;
    }
    .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 27em;
    }
    .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 28.5em;
    }
    .ql-editor .ql-video {
      display: block;
      max-width: 100%;
    }
    .ql-editor .ql-video.ql-align-center {
      margin: 0 auto;
    }
    .ql-editor .ql-video.ql-align-right {
      margin: 0 0 0 auto;
    }
    .ql-editor .ql-bg-black {
      background-color: #000;
    }
    .ql-editor .ql-bg-red {
      background-color: #e60000;
    }
    .ql-editor .ql-bg-orange {
      background-color: #f90;
    }
    .ql-editor .ql-bg-yellow {
      background-color: #ff0;
    }
    .ql-editor .ql-bg-green {
      background-color: #008a00;
    }
    .ql-editor .ql-bg-blue {
      background-color: #06c;
    }
    .ql-editor .ql-bg-purple {
      background-color: #93f;
    }
    .ql-editor .ql-color-white {
      color: #fff;
    }
    .ql-editor .ql-color-red {
      color: #e60000;
    }
    .ql-editor .ql-color-orange {
      color: #f90;
    }
    .ql-editor .ql-color-yellow {
      color: #ff0;
    }
    .ql-editor .ql-color-green {
      color: #008a00;
    }
    .ql-editor .ql-color-blue {
      color: #06c;
    }
    .ql-editor .ql-color-purple {
      color: #93f;
    }
    .ql-editor .ql-font-serif {
      font-family: Georgia, Times New Roman, serif;
    }
    .ql-editor .ql-font-monospace {
      font-family: Monaco, Courier New, monospace;
    }
    .ql-editor .ql-size-small {
      font-size: 0.75em;
    }
    .ql-editor .ql-size-large {
      font-size: 1.5em;
    }
    .ql-editor .ql-size-huge {
      font-size: 2.5em;
    }
    .ql-editor .ql-direction-rtl {
      direction: rtl;
      text-align: inherit;
    }
    .ql-editor .ql-align-center {
      text-align: center;
    }
    .ql-editor .ql-align-justify {
      text-align: justify;
    }
    .ql-editor .ql-align-right {
      text-align: right;
    }
    .ql-editor.ql-blank::before {
      color: rgba(0,0,0,0.6);
      content: attr(data-placeholder);
      font-style: italic;
      left: 15px;
      pointer-events: none;
      position: absolute;
      right: 15px;
    }
    
    

    quill.snow.css源代码

    /*!
     * Quill Editor v1.3.6
     * https://quilljs.com/
     * Copyright (c) 2014, Jason Chen
     * Copyright (c) 2013, salesforce.com
     */
    .ql-container {
      box-sizing: border-box;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 13px;
      height: 100%;
      margin: 0px;
      position: relative;
    }
    .ql-container.ql-disabled .ql-tooltip {
      visibility: hidden;
    }
    .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
      pointer-events: none;
    }
    .ql-clipboard {
      left: -100000px;
      height: 1px;
      overflow-y: hidden;
      position: absolute;
      top: 50%;
    }
    .ql-clipboard p {
      margin: 0;
      padding: 0;
    }
    .ql-editor {
      box-sizing: border-box;
      line-height: 1.42;
      height: 100%;
      outline: none;
      overflow-y: auto;
      padding: 12px 15px;
      tab-size: 4;
      -moz-tab-size: 4;
      text-align: left;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .ql-editor > * {
      cursor: text;
    }
    .ql-editor p,
    .ql-editor ol,
    .ql-editor ul,
    .ql-editor pre,
    .ql-editor blockquote,
    .ql-editor h1,
    .ql-editor h2,
    .ql-editor h3,
    .ql-editor h4,
    .ql-editor h5,
    .ql-editor h6 {
      margin: 0;
      padding: 0;
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol,
    .ql-editor ul {
      padding-left: 1.5em;
    }
    .ql-editor ol > li,
    .ql-editor ul > li {
      list-style-type: none;
    }
    .ql-editor ul > li::before {
      content: '\2022';
    }
    .ql-editor ul[data-checked=true],
    .ql-editor ul[data-checked=false] {
      pointer-events: none;
    }
    .ql-editor ul[data-checked=true] > li *,
    .ql-editor ul[data-checked=false] > li * {
      pointer-events: all;
    }
    .ql-editor ul[data-checked=true] > li::before,
    .ql-editor ul[data-checked=false] > li::before {
      color: #777;
      cursor: pointer;
      pointer-events: all;
    }
    .ql-editor ul[data-checked=true] > li::before {
      content: '\2611';
    }
    .ql-editor ul[data-checked=false] > li::before {
      content: '\2610';
    }
    .ql-editor li::before {
      display: inline-block;
      white-space: nowrap;
      width: 1.2em;
    }
    .ql-editor li:not(.ql-direction-rtl)::before {
      margin-left: -1.5em;
      margin-right: 0.3em;
      text-align: right;
    }
    .ql-editor li.ql-direction-rtl::before {
      margin-left: 0.3em;
      margin-right: -1.5em;
    }
    .ql-editor ol li:not(.ql-direction-rtl),
    .ql-editor ul li:not(.ql-direction-rtl) {
      padding-left: 1.5em;
    }
    .ql-editor ol li.ql-direction-rtl,
    .ql-editor ul li.ql-direction-rtl {
      padding-right: 1.5em;
    }
    .ql-editor ol li {
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
      counter-increment: list-0;
    }
    .ql-editor ol li:before {
      content: counter(list-0, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-1 {
      counter-increment: list-1;
    }
    .ql-editor ol li.ql-indent-1:before {
      content: counter(list-1, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-1 {
      counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-2 {
      counter-increment: list-2;
    }
    .ql-editor ol li.ql-indent-2:before {
      content: counter(list-2, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-2 {
      counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-3 {
      counter-increment: list-3;
    }
    .ql-editor ol li.ql-indent-3:before {
      content: counter(list-3, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-3 {
      counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-4 {
      counter-increment: list-4;
    }
    .ql-editor ol li.ql-indent-4:before {
      content: counter(list-4, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-4 {
      counter-reset: list-5 list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-5 {
      counter-increment: list-5;
    }
    .ql-editor ol li.ql-indent-5:before {
      content: counter(list-5, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-5 {
      counter-reset: list-6 list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-6 {
      counter-increment: list-6;
    }
    .ql-editor ol li.ql-indent-6:before {
      content: counter(list-6, decimal) '. ';
    }
    .ql-editor ol li.ql-indent-6 {
      counter-reset: list-7 list-8 list-9;
    }
    .ql-editor ol li.ql-indent-7 {
      counter-increment: list-7;
    }
    .ql-editor ol li.ql-indent-7:before {
      content: counter(list-7, lower-alpha) '. ';
    }
    .ql-editor ol li.ql-indent-7 {
      counter-reset: list-8 list-9;
    }
    .ql-editor ol li.ql-indent-8 {
      counter-increment: list-8;
    }
    .ql-editor ol li.ql-indent-8:before {
      content: counter(list-8, lower-roman) '. ';
    }
    .ql-editor ol li.ql-indent-8 {
      counter-reset: list-9;
    }
    .ql-editor ol li.ql-indent-9 {
      counter-increment: list-9;
    }
    .ql-editor ol li.ql-indent-9:before {
      content: counter(list-9, decimal) '. ';
    }
    .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 3em;
    }
    .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
      padding-left: 4.5em;
    }
    .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 3em;
    }
    .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
      padding-right: 4.5em;
    }
    .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 6em;
    }
    .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
      padding-left: 7.5em;
    }
    .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 6em;
    }
    .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
      padding-right: 7.5em;
    }
    .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 9em;
    }
    .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
      padding-left: 10.5em;
    }
    .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 9em;
    }
    .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
      padding-right: 10.5em;
    }
    .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 12em;
    }
    .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
      padding-left: 13.5em;
    }
    .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 12em;
    }
    .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
      padding-right: 13.5em;
    }
    .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 15em;
    }
    .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
      padding-left: 16.5em;
    }
    .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 15em;
    }
    .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
      padding-right: 16.5em;
    }
    .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 18em;
    }
    .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
      padding-left: 19.5em;
    }
    .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 18em;
    }
    .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
      padding-right: 19.5em;
    }
    .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 21em;
    }
    .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
      padding-left: 22.5em;
    }
    .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 21em;
    }
    .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
      padding-right: 22.5em;
    }
    .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 24em;
    }
    .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
      padding-left: 25.5em;
    }
    .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 24em;
    }
    .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
      padding-right: 25.5em;
    }
    .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 27em;
    }
    .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
      padding-left: 28.5em;
    }
    .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 27em;
    }
    .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
      padding-right: 28.5em;
    }
    .ql-editor .ql-video {
      display: block;
      max-width: 100%;
    }
    .ql-editor .ql-video.ql-align-center {
      margin: 0 auto;
    }
    .ql-editor .ql-video.ql-align-right {
      margin: 0 0 0 auto;
    }
    .ql-editor .ql-bg-black {
      background-color: #000;
    }
    .ql-editor .ql-bg-red {
      background-color: #e60000;
    }
    .ql-editor .ql-bg-orange {
      background-color: #f90;
    }
    .ql-editor .ql-bg-yellow {
      background-color: #ff0;
    }
    .ql-editor .ql-bg-green {
      background-color: #008a00;
    }
    .ql-editor .ql-bg-blue {
      background-color: #06c;
    }
    .ql-editor .ql-bg-purple {
      background-color: #93f;
    }
    .ql-editor .ql-color-white {
      color: #fff;
    }
    .ql-editor .ql-color-red {
      color: #e60000;
    }
    .ql-editor .ql-color-orange {
      color: #f90;
    }
    .ql-editor .ql-color-yellow {
      color: #ff0;
    }
    .ql-editor .ql-color-green {
      color: #008a00;
    }
    .ql-editor .ql-color-blue {
      color: #06c;
    }
    .ql-editor .ql-color-purple {
      color: #93f;
    }
    .ql-editor .ql-font-serif {
      font-family: Georgia, Times New Roman, serif;
    }
    .ql-editor .ql-font-monospace {
      font-family: Monaco, Courier New, monospace;
    }
    .ql-editor .ql-size-small {
      font-size: 0.75em;
    }
    .ql-editor .ql-size-large {
      font-size: 1.5em;
    }
    .ql-editor .ql-size-huge {
      font-size: 2.5em;
    }
    .ql-editor .ql-direction-rtl {
      direction: rtl;
      text-align: inherit;
    }
    .ql-editor .ql-align-center {
      text-align: center;
    }
    .ql-editor .ql-align-justify {
      text-align: justify;
    }
    .ql-editor .ql-align-right {
      text-align: right;
    }
    .ql-editor.ql-blank::before {
      color: rgba(0,0,0,0.6);
      content: attr(data-placeholder);
      font-style: italic;
      left: 15px;
      pointer-events: none;
      position: absolute;
      right: 15px;
    }
    .ql-snow.ql-toolbar:after,
    .ql-snow .ql-toolbar:after {
      clear: both;
      content: '';
      display: table;
    }
    .ql-snow.ql-toolbar button,
    .ql-snow .ql-toolbar button {
      background: none;
      border: none;
      cursor: pointer;
      display: inline-block;
      float: left;
      height: 24px;
      padding: 3px 5px;
      width: 28px;
    }
    .ql-snow.ql-toolbar button svg,
    .ql-snow .ql-toolbar button svg {
      float: left;
      height: 100%;
    }
    .ql-snow.ql-toolbar button:active:hover,
    .ql-snow .ql-toolbar button:active:hover {
      outline: none;
    }
    .ql-snow.ql-toolbar input.ql-image[type=file],
    .ql-snow .ql-toolbar input.ql-image[type=file] {
      display: none;
    }
    .ql-snow.ql-toolbar button:hover,
    .ql-snow .ql-toolbar button:hover,
    .ql-snow.ql-toolbar button:focus,
    .ql-snow .ql-toolbar button:focus,
    .ql-snow.ql-toolbar button.ql-active,
    .ql-snow .ql-toolbar button.ql-active,
    .ql-snow.ql-toolbar .ql-picker-label:hover,
    .ql-snow .ql-toolbar .ql-picker-label:hover,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active,
    .ql-snow.ql-toolbar .ql-picker-item:hover,
    .ql-snow .ql-toolbar .ql-picker-item:hover,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
      color: #06c;
    }
    .ql-snow.ql-toolbar button:hover .ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
      fill: #06c;
    }
    .ql-snow.ql-toolbar button:hover .ql-stroke,
    .ql-snow .ql-toolbar button:hover .ql-stroke,
    .ql-snow.ql-toolbar button:focus .ql-stroke,
    .ql-snow .ql-toolbar button:focus .ql-stroke,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
      stroke: #06c;
    }
    @media (pointer: coarse) {
      .ql-snow.ql-toolbar button:hover:not(.ql-active),
      .ql-snow .ql-toolbar button:hover:not(.ql-active) {
        color: #444;
      }
      .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
      .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
      .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
      .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
        fill: #444;
      }
      .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
      .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
      .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
      .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
        stroke: #444;
      }
    }
    .ql-snow {
      box-sizing: border-box;
    }
    .ql-snow * {
      box-sizing: border-box;
    }
    .ql-snow .ql-hidden {
      display: none;
    }
    .ql-snow .ql-out-bottom,
    .ql-snow .ql-out-top {
      visibility: hidden;
    }
    .ql-snow .ql-tooltip {
      position: absolute;
      transform: translateY(10px);
    }
    .ql-snow .ql-tooltip a {
      cursor: pointer;
      text-decoration: none;
    }
    .ql-snow .ql-tooltip.ql-flip {
      transform: translateY(-10px);
    }
    .ql-snow .ql-formats {
      display: inline-block;
      vertical-align: middle;
    }
    .ql-snow .ql-formats:after {
      clear: both;
      content: '';
      display: table;
    }
    .ql-snow .ql-stroke {
      fill: none;
      stroke: #444;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
    .ql-snow .ql-stroke-miter {
      fill: none;
      stroke: #444;
      stroke-miterlimit: 10;
      stroke-width: 2;
    }
    .ql-snow .ql-fill,
    .ql-snow .ql-stroke.ql-fill {
      fill: #444;
    }
    .ql-snow .ql-empty {
      fill: none;
    }
    .ql-snow .ql-even {
      fill-rule: evenodd;
    }
    .ql-snow .ql-thin,
    .ql-snow .ql-stroke.ql-thin {
      stroke-width: 1;
    }
    .ql-snow .ql-transparent {
      opacity: 0.4;
    }
    .ql-snow .ql-direction svg:last-child {
      display: none;
    }
    .ql-snow .ql-direction.ql-active svg:last-child {
      display: inline;
    }
    .ql-snow .ql-direction.ql-active svg:first-child {
      display: none;
    }
    .ql-snow .ql-editor h1 {
      font-size: 2em;
    }
    .ql-snow .ql-editor h2 {
      font-size: 1.5em;
    }
    .ql-snow .ql-editor h3 {
      font-size: 1.17em;
    }
    .ql-snow .ql-editor h4 {
      font-size: 1em;
    }
    .ql-snow .ql-editor h5 {
      font-size: 0.83em;
    }
    .ql-snow .ql-editor h6 {
      font-size: 0.67em;
    }
    .ql-snow .ql-editor a {
      text-decoration: underline;
    }
    .ql-snow .ql-editor blockquote {
      border-left: 4px solid #ccc;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-left: 16px;
    }
    .ql-snow .ql-editor code,
    .ql-snow .ql-editor pre {
      background-color: #f0f0f0;
      border-radius: 3px;
    }
    .ql-snow .ql-editor pre {
      white-space: pre-wrap;
      margin-bottom: 5px;
      margin-top: 5px;
      padding: 5px 10px;
    }
    .ql-snow .ql-editor code {
      font-size: 85%;
      padding: 2px 4px;
    }
    .ql-snow .ql-editor pre.ql-syntax {
      background-color: #23241f;
      color: #f8f8f2;
      overflow: visible;
    }
    .ql-snow .ql-editor img {
      max-width: 100%;
    }
    .ql-snow .ql-picker {
      color: #444;
      display: inline-block;
      float: left;
      font-size: 14px;
      font-weight: 500;
      height: 24px;
      position: relative;
      vertical-align: middle;
    }
    .ql-snow .ql-picker-label {
      cursor: pointer;
      display: inline-block;
      height: 100%;
      padding-left: 8px;
      padding-right: 2px;
      position: relative;
      width: 100%;
    }
    .ql-snow .ql-picker-label::before {
      display: inline-block;
      line-height: 22px;
    }
    .ql-snow .ql-picker-options {
      background-color: #fff;
      display: none;
      min-width: 100%;
      padding: 4px 8px;
      position: absolute;
      white-space: nowrap;
    }
    .ql-snow .ql-picker-options .ql-picker-item {
      cursor: pointer;
      display: block;
      padding-bottom: 5px;
      padding-top: 5px;
    }
    .ql-snow .ql-picker.ql-expanded .ql-picker-label {
      color: #ccc;
      z-index: 2;
    }
    .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
      fill: #ccc;
    }
    .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
      stroke: #ccc;
    }
    .ql-snow .ql-picker.ql-expanded .ql-picker-options {
      display: block;
      margin-top: -1px;
      top: 100%;
      z-index: 1;
    }
    .ql-snow .ql-color-picker,
    .ql-snow .ql-icon-picker {
      width: 28px;
    }
    .ql-snow .ql-color-picker .ql-picker-label,
    .ql-snow .ql-icon-picker .ql-picker-label {
      padding: 2px 4px;
    }
    .ql-snow .ql-color-picker .ql-picker-label svg,
    .ql-snow .ql-icon-picker .ql-picker-label svg {
      right: 4px;
    }
    .ql-snow .ql-icon-picker .ql-picker-options {
      padding: 4px 0px;
    }
    .ql-snow .ql-icon-picker .ql-picker-item {
      height: 24px;
      width: 24px;
      padding: 2px 4px;
    }
    .ql-snow .ql-color-picker .ql-picker-options {
      padding: 3px 5px;
      width: 152px;
    }
    .ql-snow .ql-color-picker .ql-picker-item {
      border: 1px solid transparent;
      float: left;
      height: 16px;
      margin: 2px;
      padding: 0px;
      width: 16px;
    }
    .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
      position: absolute;
      margin-top: -9px;
      right: 0;
      top: 50%;
      width: 18px;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
      content: attr(data-label);
    }
    .ql-snow .ql-picker.ql-header {
      width: 98px;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: 'Normal';
    }
    .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: 'Heading 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: 'Heading 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: 'Heading 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: 'Heading 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: 'Heading 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: 'Heading 6';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      font-size: 2em;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      font-size: 1.5em;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      font-size: 1.17em;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      font-size: 1em;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      font-size: 0.83em;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      font-size: 0.67em;
    }
    .ql-snow .ql-picker.ql-font {
      width: 108px;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: 'Sans Serif';
    }
    .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: 'Serif';
    }
    .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: 'Monospace';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      font-family: Georgia, Times New Roman, serif;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      font-family: Monaco, Courier New, monospace;
    }
    .ql-snow .ql-picker.ql-size {
      width: 98px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: 'Normal';
    }
    .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: 'Small';
    }
    .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: 'Large';
    }
    .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: 'Huge';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      font-size: 10px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      font-size: 32px;
    }
    .ql-snow .ql-color-picker.ql-background .ql-picker-item {
      background-color: #fff;
    }
    .ql-snow .ql-color-picker.ql-color .ql-picker-item {
      background-color: #000;
    }
    .ql-toolbar.ql-snow {
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      padding: 8px;
    }
    .ql-toolbar.ql-snow .ql-formats {
      margin-right: 15px;
    }
    .ql-toolbar.ql-snow .ql-picker-label {
      border: 1px solid transparent;
    }
    .ql-toolbar.ql-snow .ql-picker-options {
      border: 1px solid transparent;
      box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
    }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
      border-color: #ccc;
    }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
      border-color: #ccc;
    }
    .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
    .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
      border-color: #000;
    }
    .ql-toolbar.ql-snow + .ql-container.ql-snow {
      border-top: 0px;
    }
    .ql-snow .ql-tooltip {
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 5px #ddd;
      color: #444;
      padding: 5px 12px;
      white-space: nowrap;
    }
    .ql-snow .ql-tooltip::before {
      content: "Visit URL:";
      line-height: 26px;
      margin-right: 8px;
    }
    .ql-snow .ql-tooltip input[type=text] {
      display: none;
      border: 1px solid #ccc;
      font-size: 13px;
      height: 26px;
      margin: 0px;
      padding: 3px 5px;
      width: 170px;
    }
    .ql-snow .ql-tooltip a.ql-preview {
      display: inline-block;
      max-width: 200px;
      overflow-x: hidden;
      text-overflow: ellipsis;
      vertical-align: top;
    }
    .ql-snow .ql-tooltip a.ql-action::after {
      border-right: 1px solid #ccc;
      content: 'Edit';
      margin-left: 16px;
      padding-right: 8px;
    }
    .ql-snow .ql-tooltip a.ql-remove::before {
      content: 'Remove';
      margin-left: 8px;
    }
    .ql-snow .ql-tooltip a {
      line-height: 26px;
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-preview,
    .ql-snow .ql-tooltip.ql-editing a.ql-remove {
      display: none;
    }
    .ql-snow .ql-tooltip.ql-editing input[type=text] {
      display: inline-block;
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: 'Save';
      padding-right: 0px;
    }
    .ql-snow .ql-tooltip[data-mode=link]::before {
      content: "Enter link:";
    }
    .ql-snow .ql-tooltip[data-mode=formula]::before {
      content: "Enter formula:";
    }
    .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "Enter video:";
    }
    .ql-snow a {
      color: #06c;
    }
    .ql-container.ql-snow {
      border: 1px solid #ccc;
    }
    
    
    展开全文
  • vue中使用富文本插入小程序卡片

    千次阅读 2021-03-26 11:29:43
    vue中使用富文本插入小程序卡片 首先新建mp.js文件夹 import mp from '@/utils/mp' Quill.register(mp, true) import { Quill } from 'vue-quill-editor' const BlockEmbed = Quill.import('blots/block/embed') ...

    vue中使用富文本插入小程序卡片

    首先新建mp.js文件夹

    import mp from '@/utils/mp'
    Quill.register(mp, true)
    
    import { Quill } from 'vue-quill-editor'
    
    const BlockEmbed = Quill.import('blots/block/embed')
    const Link = Quill.import('formats/link')
    
    class mp extends BlockEmbed {
        static create(value) {
            const node = super.create(value)
            node.setAttribute('data-miniprogram-appid', value.appid)
            node.setAttribute('data-miniprogram-path', value.path)
            node.setAttribute('data-miniprogram-title', value.title)
            node.setAttribute('data-miniprogram-imageurl', value.imageurl)
            return node
        }
        static sanitize(url) {
            return Link.sanitize(url)
        }
    	//防止再次编辑数据丢失
        static value(domNode) {
            return {
                appid: domNode.getAttribute('data-miniprogram-appid'),
                path: domNode.getAttribute('data-miniprogram-path'),
                title: domNode.getAttribute('data-miniprogram-title'),
                imageurl: domNode.getAttribute('data-miniprogram-imageurl')
            }
        }
    }
    mp.blotName = 'link'
    mp.tagName = 'mp-miniprogram'
    export default mp
    
    展开全文
  • 因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用。分享记录一下。 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容如下 <template lang="html"> <div ...
  • vue中使用富文本插件

    千次阅读 2021-01-01 21:34:13
    效果如下 下载element-tiptap npm install --save element-tiptap 在main.js引入该插件 import Vue from 'vue'; import ElementUI from 'element-ui'; import { ElementTiptapPlugin } from .
  • 主要介绍了Vue中Quill富文本编辑器的使用教程,包括自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小等使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue中使用富文本插件wangeditor

    千次阅读 2018-09-10 14:31:34
    -- editor.vue --&gt; &lt;template&gt; &lt;div&gt; &lt;div ref="editor" style="text-align:left"&gt; &lt;/div&gt; &lt;/div&gt; &lt
  • Vue中使用富文本编辑器(wangeditor) 安转 :npm i wangeditor --save 在需要的文件下引入:import Editor from “wangeditor” 实现文字的样式和图片的上传并显示在文本编辑器中 <template> <div id=...
  • Vue-Quill-Editor再vue使用 首先我们先nmp安装Vue-Quill-Editor npm install vue-quill-editor -S 下载好之后我们就可以再main.js引入 / 导入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // ...
  • 基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费 http://www.wangeditor.com/index.html (1)、安装 npm install wangeditor 2、封装公用组件 editor.vue <template lang="html"> ...
  • vue中使用tinymce项目中使用tinymcetinymce富文本编辑器说明及效果示例安装tinymce代码实现页面引入tinymce及需要使用的组件![在这里插入图片描述]...
  • 1. 首先就是引入我们的富文本组件了 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor, Quill } from 'vue-quill-editor' // ...
  • 主要介绍了vue中使用ueditor富文本编辑器的相关资料,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,589
精华内容 4,635
关键字:

vue中使用富文本选择

vue 订阅