<style>
  .toolbarNoborder {
    border-bottom: none !important;
    padding: 0 !important;
  }

</style>

<template>
  <div>
    <!-- 图片上传组件辅助-->

    <el-upload :id="myImageUploader" :http-request="UploadAttachment" :show-file-list="false" action="" v-if="toolbar.image">
    </el-upload>
    <quill-editor :options="editorOption" :ref="myQuillEditor" @change="onEditorChange($event)" v-model="quillValue"
      class="_quill_editor">
      <div :id="myToolbar" slot="toolbar" :class="{'toolbarNoborder':toolbar.showToolBar==false}">
        <!-- You can also add your own -->
        <span class="ql-formats" v-if="toolbar.bold||toolbar.italic||toolbar.underline||toolbar.strike">
          <button type="button" class="ql-bold" v-if="toolbar.bold">
            <svg viewbox="0 0 18 18">
              <path class="ql-stroke"
                d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
              <path class="ql-stroke"
                d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
            </svg>
          </button>
          <button type="button" class="ql-italic" v-if="toolbar.italic">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke" x1="7" x2="13" y1="4" y2="4"></line>
              <line class="ql-stroke" x1="5" x2="11" y1="14" y2="14"></line>
              <line class="ql-stroke" x1="8" x2="10" y1="14" y2="4"></line>
            </svg>
          </button>
          <button type="button" class="ql-underline" v-if="toolbar.underline">
            <svg viewbox="0 0 18 18">
              <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path>
              <rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="12" x="3" y="15"></rect>
            </svg>
          </button>
          <button type="button" class="ql-strike" v-if="toolbar.strike">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke ql-thin" x1="15.5" x2="2.5" y1="8.5" y2="9.5"></line>
              <path class="ql-fill"
                d="M9.007,8C6.542,7.791,6,7.519,6,6.5,6,5.792,7.283,5,9,5c1.571,0,2.765.679,2.969,1.309a1,1,0,0,0,1.9-.617C13.356,4.106,11.354,3,9,3,6.2,3,4,4.538,4,6.5a3.2,3.2,0,0,0,.5,1.843Z">
              </path>
              <path class="ql-fill"
                d="M8.984,10C11.457,10.208,12,10.479,12,11.5c0,0.708-1.283,1.5-3,1.5-1.571,0-2.765-.679-2.969-1.309a1,1,0,1,0-1.9.617C4.644,13.894,6.646,15,9,15c2.8,0,5-1.538,5-3.5a3.2,3.2,0,0,0-.5-1.843Z">
              </path>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.blockquote||toolbar.block">
          <button type="button" class="ql-blockquote" v-if="toolbar.blockquote">
            <svg viewbox="0 0 18 18">
              <rect class="ql-fill ql-stroke" height="3" width="3" x="4" y="5"></rect>
              <rect class="ql-fill ql-stroke" height="3" width="3" x="11" y="5"></rect>
              <path class="ql-even ql-fill ql-stroke" d="M7,8c0,4.031-3,5-3,5"></path>
              <path class="ql-even ql-fill ql-stroke" d="M14,8c0,4.031-3,5-3,5"></path>
            </svg>
          </button>
          <button type="button" class="ql-code-block" v-if="toolbar.block">
            <svg viewbox="0 0 18 18">
              <polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline>
              <polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline>
              <line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.header1||toolbar.header2">
          <button type="button" class="ql-header" value="1" v-if="toolbar.header1">
            <svg viewbox="0 0 18 18">
              <path class="ql-fill"
                d="M10,4V14a1,1,0,0,1-2,0V10H3v4a1,1,0,0,1-2,0V4A1,1,0,0,1,3,4V8H8V4a1,1,0,0,1,2,0Zm6.06787,9.209H14.98975V7.59863a.54085.54085,0,0,0-.605-.60547h-.62744a1.01119,1.01119,0,0,0-.748.29688L11.645,8.56641a.5435.5435,0,0,0-.022.8584l.28613.30762a.53861.53861,0,0,0,.84717.0332l.09912-.08789a1.2137,1.2137,0,0,0,.2417-.35254h.02246s-.01123.30859-.01123.60547V13.209H12.041a.54085.54085,0,0,0-.605.60547v.43945a.54085.54085,0,0,0,.605.60547h4.02686a.54085.54085,0,0,0,.605-.60547v-.43945A.54085.54085,0,0,0,16.06787,13.209Z">
              </path>
            </svg>
          </button>
          <button type="button" class="ql-header" value="2" v-if="toolbar.header2">
            <svg viewbox="0 0 18 18">
              <path class="ql-fill"
                d="M16.73975,13.81445v.43945a.54085.54085,0,0,1-.605.60547H11.855a.58392.58392,0,0,1-.64893-.60547V14.0127c0-2.90527,3.39941-3.42187,3.39941-4.55469a.77675.77675,0,0,0-.84717-.78125,1.17684,1.17684,0,0,0-.83594.38477c-.2749.26367-.561.374-.85791.13184l-.4292-.34082c-.30811-.24219-.38525-.51758-.1543-.81445a2.97155,2.97155,0,0,1,2.45361-1.17676,2.45393,2.45393,0,0,1,2.68408,2.40918c0,2.45312-3.1792,2.92676-3.27832,3.93848h2.79443A.54085.54085,0,0,1,16.73975,13.81445ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z">
              </path>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.listOrdered||toolbar.listDot">
          <button type="button" class="ql-list" value="ordered" v-if="toolbar.listOrdered">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line>
              <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line>
              <line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line>
              <line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line>
              <path class="ql-fill"
                d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z">
              </path>
              <path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156">
              </path>
              <path class="ql-stroke ql-thin"
                d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109">
              </path>
            </svg>
          </button>
          <button type="button" class="ql-list" value="bullet" v-if="toolbar.listDot">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line>
              <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line>
              <line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line>
              <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line>
              <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line>
              <line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.scriptSub||toolbar.scriptSuper">
          <button type="button" class="ql-script" value="sub" v-if="toolbar.scriptSub">
            <svg viewbox="0 0 18 18">
              <path class="ql-fill"
                d="M15.5,15H13.861a3.858,3.858,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.921,1.921,0,0,0,12.021,11.7a0.50013,0.50013,0,1,0,.957.291h0a0.914,0.914,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.076-1.16971,1.86982-1.93971,2.43082A1.45639,1.45639,0,0,0,12,15.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,15Z">
              </path>
              <path class="ql-fill"
                d="M9.65,5.241a1,1,0,0,0-1.409.108L6,7.964,3.759,5.349A1,1,0,0,0,2.192,6.59178Q2.21541,6.6213,2.241,6.649L4.684,9.5,2.241,12.35A1,1,0,0,0,3.71,13.70722q0.02557-.02768.049-0.05722L6,11.036,8.241,13.65a1,1,0,1,0,1.567-1.24277Q9.78459,12.3777,9.759,12.35L7.316,9.5,9.759,6.651A1,1,0,0,0,9.65,5.241Z">
              </path>
            </svg>
          </button>
          <button type="button" class="ql-script" value="super" v-if="toolbar.scriptSuper">
            <svg viewbox="0 0 18 18">
              <path class="ql-fill"
                d="M15.5,7H13.861a4.015,4.015,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.922,1.922,0,0,0,12.021,3.7a0.5,0.5,0,1,0,.957.291,0.917,0.917,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.077-1.164,1.925-1.934,2.486A1.423,1.423,0,0,0,12,7.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,7Z">
              </path>
              <path class="ql-fill"
                d="M9.651,5.241a1,1,0,0,0-1.41.108L6,7.964,3.759,5.349a1,1,0,1,0-1.519,1.3L4.683,9.5,2.241,12.35a1,1,0,1,0,1.519,1.3L6,11.036,8.241,13.65a1,1,0,0,0,1.519-1.3L7.317,9.5,9.759,6.651A1,1,0,0,0,9.651,5.241Z">
              </path>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.leftIndent||toolbar.rightIndent">
          <button type="button" class="ql-indent" value="-1" v-if="toolbar.leftIndent">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke" x1="3" x2="15" y1="14" y2="14"></line>
              <line class="ql-stroke" x1="3" x2="15" y1="4" y2="4"></line>
              <line class="ql-stroke" x1="9" x2="15" y1="9" y2="9"></line>
              <polyline class="ql-stroke" points="5 7 5 11 3 9 5 7"></polyline>
            </svg>
          </button>
          <button type="button" class="ql-indent" value="+1" v-if="toolbar.rightIndent">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke" x1="3" x2="15" y1="14" y2="14"></line>
              <line class="ql-stroke" x1="3" x2="15" y1="4" y2="4"></line>
              <line class="ql-stroke" x1="9" x2="15" y1="9" y2="9"></line>
              <polyline class="ql-fill ql-stroke" points="3 7 3 11 5 9 3 7"></polyline>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.direction">
          <button type="button" class="ql-direction" value="rtl">
            <svg viewbox="0 0 18 18">
              <polygon class="ql-stroke ql-fill" points="3 11 5 9 3 7 3 11"></polygon>
              <line class="ql-stroke ql-fill" x1="15" x2="11" y1="4" y2="4"></line>
              <path class="ql-fill" d="M11,3a3,3,0,0,0,0,6h1V3H11Z"></path>
              <rect class="ql-fill" height="11" width="1" x="11" y="4"></rect>
              <rect class="ql-fill" height="11" width="1" x="13" y="4"></rect>
            </svg>
            <svg viewbox="0 0 18 18">
              <polygon class="ql-stroke ql-fill" points="15 12 13 10 15 8 15 12"></polygon>
              <line class="ql-stroke ql-fill" x1="9" x2="5" y1="4" y2="4"></line>
              <path class="ql-fill" d="M5,3A3,3,0,0,0,5,9H6V3H5Z"></path>
              <rect class="ql-fill" height="11" width="1" x="5" y="4"></rect>
              <rect class="ql-fill" height="11" width="1" x="7" y="4"></rect>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.downPicker">
          <span class="ql-size ql-picker">
            <span class="ql-picker-label" tabindex="0" role="button" aria-expanded="false"
              aria-controls="ql-picker-options-33">
              <svg viewbox="0 0 18 18">
                <polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon>
                <polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon>
              </svg>
            </span>
            <span class="ql-picker-options" aria-hidden="true" tabindex="-1" id="ql-picker-options-33">
              <span tabindex="0" role="button" class="ql-picker-item" data-value="small">
              </span>
              <span tabindex="0" role="button" class="ql-picker-item ql-selected">
              </span>
              <span tabindex="0" role="button" class="ql-picker-item" data-value="large">
              </span>
              <span tabindex="0" role="button" class="ql-picker-item" data-value="huge">
              </span>
            </span>
          </span>
          <select class="ql-size" style="display: none;">
            <option value="small"></option>
            <option selected="selected"></option>
            <option value="large"></option>
            <option value="huge"></option>
          </select>
        </span>
        <span class="ql-formats" v-if="toolbar.headSize">
          <span class="ql-header ql-picker">
            <span class="ql-picker-label" tabindex="0" role="button" aria-expanded="false"
              aria-controls="ql-picker-options-34">
              <svg viewbox="0 0 18 18">
                <polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon>
                <polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon>
              </svg>
            </span><span class="ql-picker-options" aria-hidden="true" tabindex="-1" id="ql-picker-options-34"><span
                tabindex="0" role="button" class="ql-picker-item" data-value="1"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="2"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="3"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="4"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="5"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="6"></span><span tabindex="0" role="button" class="ql-picker-item ql-selected"></span></span>
          </span><select class="ql-header" style="display: none;">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option selected="selected"></option>
          </select>
        </span>
        <span class="ql-formats" v-if="toolbar.fontColor||toolbar.fontBackgroundColor">
          <span class="ql-color ql-picker ql-color-picker" v-if="toolbar.fontColor" style="display:none">
            <span class="ql-picker-label" tabindex="0" role="button" aria-expanded="false"
              aria-controls="ql-picker-options-35">
              <svg viewbox="0 0 18 18">
                <line class="ql-color-label ql-stroke ql-transparent" x1="3" x2="15" y1="15" y2="15"></line>
                <polyline class="ql-stroke" points="5.5 11 9 3 12.5 11"></polyline>
                <line class="ql-stroke" x1="11.63" x2="6.38" y1="9" y2="9"></line>
              </svg>
            </span><span class="ql-picker-options" aria-hidden="true" tabindex="-1" id="ql-picker-options-35"><span
                tabindex="0" role="button" class="ql-picker-item ql-primary ql-selected"></span><span tabindex="0"
                role="button" class="ql-picker-item ql-primary" data-value="#e60000"
                style="background-color: rgb(230, 0, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#ff9900"
                style="background-color: rgb(255, 153, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#ffff00"
                style="background-color: rgb(255, 255, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#008a00"
                style="background-color: rgb(0, 138, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#0066cc"
                style="background-color: rgb(0, 102, 204);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#9933ff"
                style="background-color: rgb(153, 51, 255);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#ffffff" style="background-color: rgb(255, 255, 255);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#facccc"
                style="background-color: rgb(250, 204, 204);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#ffebcc" style="background-color: rgb(255, 235, 204);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#ffffcc"
                style="background-color: rgb(255, 255, 204);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#cce8cc" style="background-color: rgb(204, 232, 204);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#cce0f5"
                style="background-color: rgb(204, 224, 245);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#ebd6ff" style="background-color: rgb(235, 214, 255);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#bbbbbb"
                style="background-color: rgb(187, 187, 187);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#f06666" style="background-color: rgb(240, 102, 102);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#ffc266"
                style="background-color: rgb(255, 194, 102);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#ffff66" style="background-color: rgb(255, 255, 102);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#66b966"
                style="background-color: rgb(102, 185, 102);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#66a3e0" style="background-color: rgb(102, 163, 224);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#c285ff"
                style="background-color: rgb(194, 133, 255);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#888888" style="background-color: rgb(136, 136, 136);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#a10000"
                style="background-color: rgb(161, 0, 0);"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="#b26b00" style="background-color: rgb(178, 107, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#b2b200" style="background-color: rgb(178, 178, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#006100"
                style="background-color: rgb(0, 97, 0);"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="#0047b2" style="background-color: rgb(0, 71, 178);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#6b24b2" style="background-color: rgb(107, 36, 178);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#444444"
                style="background-color: rgb(68, 68, 68);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#5c0000" style="background-color: rgb(92, 0, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#663d00"
                style="background-color: rgb(102, 61, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#666600" style="background-color: rgb(102, 102, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#003700"
                style="background-color: rgb(0, 55, 0);"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="#002966" style="background-color: rgb(0, 41, 102);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#3d1466" style="background-color: rgb(61, 20, 102);"></span></span>
          </span>
          <select class="ql-color" v-if="toolbar.fontColor">
            <option selected="selected"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option value="#ffffff"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select>
          <span class="ql-background ql-picker ql-color-picker" v-if="toolbar.fontBackgroundColor"
            style="display:none;">
            <span class="ql-picker-label" tabindex="0" role="button" aria-expanded="false"
              aria-controls="ql-picker-options-36">
              <svg viewbox="0 0 18 18">
                <g class="ql-fill ql-color-label">
                  <polygon points="6 6.868 6 6 5 6 5 7 5.942 7 6 6.868"></polygon>
                  <rect height="1" width="1" x="4" y="4"></rect>
                  <polygon points="6.817 5 6 5 6 6 6.38 6 6.817 5"></polygon>
                  <rect height="1" width="1" x="2" y="6"></rect>
                  <rect height="1" width="1" x="3" y="5"></rect>
                  <rect height="1" width="1" x="4" y="7"></rect>
                  <polygon points="4 11.439 4 11 3 11 3 12 3.755 12 4 11.439"></polygon>
                  <rect height="1" width="1" x="2" y="12"></rect>
                  <rect height="1" width="1" x="2" y="9"></rect>
                  <rect height="1" width="1" x="2" y="15"></rect>
                  <polygon points="4.63 10 4 10 4 11 4.192 11 4.63 10"></polygon>
                  <rect height="1" width="1" x="3" y="8"></rect>
                  <path d="M10.832,4.2L11,4.582V4H10.708A1.948,1.948,0,0,1,10.832,4.2Z"></path>
                  <path d="M7,4.582L7.168,4.2A1.929,1.929,0,0,1,7.292,4H7V4.582Z"></path>
                  <path d="M8,13H7.683l-0.351.8a1.933,1.933,0,0,1-.124.2H8V13Z"></path>
                  <rect height="1" width="1" x="12" y="2"></rect>
                  <rect height="1" width="1" x="11" y="3"></rect>
                  <path d="M9,3H8V3.282A1.985,1.985,0,0,1,9,3Z"></path>
                  <rect height="1" width="1" x="2" y="3"></rect>
                  <rect height="1" width="1" x="6" y="2"></rect>
                  <rect height="1" width="1" x="3" y="2"></rect>
                  <rect height="1" width="1" x="5" y="3"></rect>
                  <rect height="1" width="1" x="9" y="2"></rect>
                  <rect height="1" width="1" x="15" y="14"></rect>
                  <polygon
                    points="13.447 10.174 13.469 10.225 13.472 10.232 13.808 11 14 11 14 10 13.37 10 13.447 10.174">
                  </polygon>
                  <rect height="1" width="1" x="13" y="7"></rect>
                  <rect height="1" width="1" x="15" y="5"></rect>
                  <rect height="1" width="1" x="14" y="6"></rect>
                  <rect height="1" width="1" x="15" y="8"></rect>
                  <rect height="1" width="1" x="14" y="9"></rect>
                  <path d="M3.775,14H3v1H4V14.314A1.97,1.97,0,0,1,3.775,14Z"></path>
                  <rect height="1" width="1" x="14" y="3"></rect>
                  <polygon points="12 6.868 12 6 11.62 6 12 6.868"></polygon>
                  <rect height="1" width="1" x="15" y="2"></rect>
                  <rect height="1" width="1" x="12" y="5"></rect>
                  <rect height="1" width="1" x="13" y="4"></rect>
                  <polygon points="12.933 9 13 9 13 8 12.495 8 12.933 9"></polygon>
                  <rect height="1" width="1" x="9" y="14"></rect>
                  <rect height="1" width="1" x="8" y="15"></rect>
                  <path d="M6,14.926V15H7V14.316A1.993,1.993,0,0,1,6,14.926Z"></path>
                  <rect height="1" width="1" x="5" y="15"></rect>
                  <path d="M10.668,13.8L10.317,13H10v1h0.792A1.947,1.947,0,0,1,10.668,13.8Z"></path>
                  <rect height="1" width="1" x="11" y="15"></rect>
                  <path d="M14.332,12.2a1.99,1.99,0,0,1,.166.8H15V12H14.245Z"></path>
                  <rect height="1" width="1" x="14" y="15"></rect>
                  <rect height="1" width="1" x="15" y="11"></rect>
                </g>
                <polyline class="ql-stroke" points="5.5 13 9 5 12.5 13"></polyline>
                <line class="ql-stroke" x1="11.63" x2="6.38" y1="11" y2="11"></line>
              </svg>
            </span><span class="ql-picker-options" aria-hidden="true" tabindex="-1" id="ql-picker-options-36"><span
                tabindex="0" role="button" class="ql-picker-item ql-primary" data-value="#000000"
                style="background-color: rgb(0, 0, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#e60000"
                style="background-color: rgb(230, 0, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#ff9900"
                style="background-color: rgb(255, 153, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#ffff00"
                style="background-color: rgb(255, 255, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#008a00"
                style="background-color: rgb(0, 138, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#0066cc"
                style="background-color: rgb(0, 102, 204);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-primary" data-value="#9933ff"
                style="background-color: rgb(153, 51, 255);"></span><span tabindex="0" role="button"
                class="ql-picker-item ql-selected"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="#facccc" style="background-color: rgb(250, 204, 204);"></span><span tabindex="0"
                role="button" class="ql-picker-item" data-value="#ffebcc"
                style="background-color: rgb(255, 235, 204);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#ffffcc" style="background-color: rgb(255, 255, 204);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#cce8cc"
                style="background-color: rgb(204, 232, 204);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#cce0f5" style="background-color: rgb(204, 224, 245);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#ebd6ff"
                style="background-color: rgb(235, 214, 255);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#bbbbbb" style="background-color: rgb(187, 187, 187);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#f06666"
                style="background-color: rgb(240, 102, 102);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#ffc266" style="background-color: rgb(255, 194, 102);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#ffff66"
                style="background-color: rgb(255, 255, 102);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#66b966" style="background-color: rgb(102, 185, 102);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#66a3e0"
                style="background-color: rgb(102, 163, 224);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#c285ff" style="background-color: rgb(194, 133, 255);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#888888"
                style="background-color: rgb(136, 136, 136);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#a10000" style="background-color: rgb(161, 0, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#b26b00"
                style="background-color: rgb(178, 107, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#b2b200" style="background-color: rgb(178, 178, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#006100"
                style="background-color: rgb(0, 97, 0);"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="#0047b2" style="background-color: rgb(0, 71, 178);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#6b24b2" style="background-color: rgb(107, 36, 178);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#444444"
                style="background-color: rgb(68, 68, 68);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#5c0000" style="background-color: rgb(92, 0, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#663d00"
                style="background-color: rgb(102, 61, 0);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#666600" style="background-color: rgb(102, 102, 0);"></span><span
                tabindex="0" role="button" class="ql-picker-item" data-value="#003700"
                style="background-color: rgb(0, 55, 0);"></span><span tabindex="0" role="button" class="ql-picker-item"
                data-value="#002966" style="background-color: rgb(0, 41, 102);"></span><span tabindex="0" role="button"
                class="ql-picker-item" data-value="#3d1466" style="background-color: rgb(61, 20, 102);"></span></span>
          </span>
          <select class="ql-background" v-if="toolbar.fontBackgroundColor">
            <option value="#000000"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option selected="selected"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select>
        </span>
        <span class="ql-formats" v-if="toolbar.font">
          <select class="ql-font">
            <option selected="selected"></option>
            <option :value="item" v-for="item in fonts"></option>
          </select>
        </span>
        <span class="ql-formats" v-if="toolbar.align">
          <span class="ql-align ql-picker ql-icon-picker">
            <span class="ql-picker-label" tabindex="0" role="button" aria-expanded="false"
              aria-controls="ql-picker-options-38">
              <svg viewbox="0 0 18 18">
                <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
                <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
                <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
              </svg>
            </span><span class="ql-picker-options" aria-hidden="true" tabindex="-1" id="ql-picker-options-38">
              <span tabindex="0" role="button" class="ql-picker-item ql-selected">
                <svg viewbox="0 0 18 18">
                  <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
                  <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
                  <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
                </svg>
              </span><span tabindex="0" role="button" class="ql-picker-item" data-value="center">
                <svg viewbox="0 0 18 18">
                  <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
                  <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
                  <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
                </svg>
              </span><span tabindex="0" role="button" class="ql-picker-item" data-value="right">
                <svg viewbox="0 0 18 18">
                  <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
                  <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
                  <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
                </svg>
              </span><span tabindex="0" role="button" class="ql-picker-item" data-value="justify">
                <svg viewbox="0 0 18 18">
                  <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
                  <line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line>
                  <line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line>
                </svg>
              </span>
            </span>
          </span><select class="ql-align" style="display: none;">
            <option selected="selected"></option>
            <option value="center"></option>
            <option value="right"></option>
            <option value="justify"></option>
          </select>
        </span>
        <span class="ql-formats" v-if="toolbar.clean">
          <button type="button" class="ql-clean">
            <svg class="" viewbox="0 0 18 18">
              <line class="ql-stroke" x1="5" x2="13" y1="3" y2="3"></line>
              <line class="ql-stroke" x1="6" x2="9.35" y1="12" y2="3"></line>
              <line class="ql-stroke" x1="11" x2="15" y1="11" y2="15"></line>
              <line class="ql-stroke" x1="15" x2="11" y1="11" y2="15"></line>
              <rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="7" x="2" y="14"></rect>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.link||toolbar.image||toolbar.video">
          <button type="button" class="ql-link" v-if="toolbar.link">
            <svg viewbox="0 0 18 18">
              <line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line>
              <path class="ql-even ql-stroke"
                d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z">
              </path>
              <path class="ql-even ql-stroke"
                d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z">
              </path>
            </svg>
          </button>
          <button type="button" @click="imgClick" v-if="toolbar.image">
            <svg viewbox="0 0 18 18">
              <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
              <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
              <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
            </svg>
          </button>
          <button type="button" class="ql-video" v-if="toolbar.video">
            <svg viewbox="0 0 18 18">
              <rect class="ql-stroke" height="12" width="12" x="3" y="3"></rect>
              <rect class="ql-fill" height="12" width="1" x="5" y="3"></rect>
              <rect class="ql-fill" height="12" width="1" x="12" y="3"></rect>
              <rect class="ql-fill" height="2" width="8" x="5" y="8"></rect>
              <rect class="ql-fill" height="1" width="3" x="3" y="5"></rect>
              <rect class="ql-fill" height="1" width="3" x="3" y="7"></rect>
              <rect class="ql-fill" height="1" width="3" x="3" y="10"></rect>
              <rect class="ql-fill" height="1" width="3" x="3" y="12"></rect>
              <rect class="ql-fill" height="1" width="3" x="12" y="5"></rect>
              <rect class="ql-fill" height="1" width="3" x="12" y="7"></rect>
              <rect class="ql-fill" height="1" width="3" x="12" y="10"></rect>
              <rect class="ql-fill" height="1" width="3" x="12" y="12"></rect>
            </svg>
          </button>
        </span>
        <span class="ql-formats" v-if="toolbar.narrative">
          <span class="clearReffen" @click="clearEditor"><i class="iconfont icon-img_delete_small"></i></span>
          <el-popover placement="bottom" width="250" popper-class='AccountCla' v-model="popvisible" trigger="click">
            <div class="TNcontent" v-if="referenceList.length>0">
              <div class="AccountList" v-for="item in referenceList" v-if="item" :key="item.subCode">
                <div v-html="item" class="reLeftContent"></div>
                <button class="normalBtn TNreference" @click="sendRefernce(item),popvisible=false">引用</button>
              </div>
            </div>
            <div class="TNcontent" v-else>
              <div class="EtNodata">{{$t('system.content_noData')}}</div>
            </div>
            <span class="defaultAccount" slot="reference" v-if="defaultA">默认叙述</span>
          </el-popover>
        </span>
      </div>
    </quill-editor>
  </div>
</template>
<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import * as Quill from "quill"; //引入编辑器
  //quill编辑器的字体
  var fonts = [
    "SimSun",
    "SimHei",
    "Microsoft-YaHei",
    "KaiTi",
    "FangSong",
    "Arial",
    "Times-New-Roman",
    "sans-serif"
  ];
  var Font = Quill.import("formats/font");
  Font.whitelist = fonts; //将字体加入到白名单
  Quill.register(Font, true);
  export default {
    name: 'edit',
    props: ["editValue", "toolbarShow", "referenceList", "placeholder", "defaultAccount"],
    data() {
      return {
        myToolbar: '',
        myQuillEditor: '',
        myImageUploader: '',
        quillValue: this.editValue,
        popvisible: false,
        defaultA: true,
        //字体样式
        fonts: [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
          "Arial",
          "Times-New-Roman",
          "sans-serif"
        ],
        editorOption: {
          modules: {
            toolbar: "#toolbar"
          },
          placeholder: '',
        },
        toolbar: {
          "showToolBar": true, //显示toolbar
          "bold": false, //加粗
          "italic": false, //斜体
          "underline": false, //下划线
          "strike": false, //删除线
          "blockquote": false, //引用q
          "block": false, //块
          "header1": false, //H1
          "header2": false, //H2
          "listOrdered": false, //顺序列表
          "listDot": false, //圆点列表
          "scriptSub": false, //X2
          "scriptSuper": false, //X2
          "leftIndent": false, //左缩进
          "rightIndent": false, //右缩进
          "direction": false, //方向（靠左/右）
          "downPicker": false, //下移选择器
          "headSize": false, //标题大小
          "fontColor": false, //字体颜色
          "fontBackgroundColor": false, //背景颜色
          "font": false, //字体
          "align": false, //对齐
          "clean": false, //清除样式
          "link": false, //超链接
          "image": false, //图片
          "video": false, //视频
          "narrative": false //叙述
        }
      }
    },
    created() {
      if (this.defaultAccount == undefined) {
        this.defaultA = true;
      } else {
        this.defaultA = this.defaultAccount;
      }
      this.myToolbar = "toolbar_" + this.guid();
      this.editorOption.placeholder = this.placeholder;
      this.myQuillEditor = "editer_" + this.guid();
      this.myImageUploader = "imageUploader_" + this.guid();
      this.editorOption.modules.toolbar = "#" + this.myToolbar;
      if (this.toolbarShow != null) {
        for (let key in this.toolbarShow) {
          this.toolbar[key] = this.toolbarShow[key];
        }
      }
    },
    watch: {
      editValue: {
        handler: function (val, oldVal) {
          if (val != oldVal) {
            this.quillValue = val
          }
        },
        deep: true
      },
    },
    methods: {
      onEditorChange({
        editor,
        html,
        text
      }) {
        this.$emit('edit-value', html);
      },
      guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
      },
      sendRefernce(item) {
        this.$refs[this.myQuillEditor].quill.root.innerHTML = item;
        this.$emit('edit-value', item);
      },
      clearEditor() {
        this.$refs[this.myQuillEditor].quill.root.innerHTML = '';
        this.$emit('edit-value', '');
      },
      //上传图片
      UploadAttachment(file) {
        if ((file.file.type).indexOf("image/") == -1) {
          this.$message.error('图片格式不对!');
          return;
        }
        // 获取富文本组件实例
        let quill = this.$refs[this.myQuillEditor].quill
        try {
          quill.getSelection().index;
        } catch (err) {
          this.$message.error('无法获取光标插入位置!');
          return;
        }
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        let myDate = new Date();
        let path = "/Upload/Editor/" + myDate.getFullYear() + "/" + (myDate.getMonth() + 1) + "/";
        this.UploadSelfFileT(path, newArr, x => {
          let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
          // 如果上传成功
          if (url != null && url.length > 0) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            quill.insertEmbed(length, 'image', url)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else {
            this.$message.error('图片插入失败')
          }
        });
      },
      imgClick(value) {
        if (value) {
          // 触发input框选择图片文件
          let key = '#' + this.myImageUploader + ' input';
          document.querySelector(key).click()
        } else {
          this.quill.format('image', false);
        }
      }
    }
  }

</script>
