quill-editor

    1. <el-form-item
    3.                                         class="el-form-item is-required el-form-item--small"
    4.                                         label="商品描述"
    5.                                         prop="serviceDesc"
    6.                                     >
    7.                                         <span style="color: red; font-size: 14px; line-height: 32px"
    8.                                             >(2000个字)</span
    9.                                         >
    10.                                         <div class="el-form-item__content" style="">
    11.                                             <!--<el-input
    12.                                                 type="textarea"
    13.                                                 v-model="addform.serviceDesc"
    14.                                             ></el-input>-->
    15.                                             <quill-editor v-model="addform.serviceDesc" ref="myQuillEditor" style="height: 300px;" :options="editorOption">
    16.                                                 <!-- 自定义toolar -->
    17.         <div id="toolbar" slot="toolbar">
    18.           <!-- Add a bold button -->
    19.           <button class="ql-bold" title="加粗">Bold</button>
    20.           <button class="ql-italic" title="斜体">Italic</button>
    21.           <button class="ql-underline" title="下划线">underline</button>
    22.           <button class="ql-strike" title="删除线">strike</button>
    23.           <button class="ql-blockquote" title="引用"></button>
    24.           <button class="ql-code-block" title="代码"></button>
    25.           <button class="ql-header" value="1" title="标题1"></button>
    26.           <button class="ql-header" value="2" title="标题2"></button>
    27.           <!--Add list -->
    28.           <button class="ql-list" value="ordered" title="有序列表"></button>
    29.           <button class="ql-list" value="bullet" title="无序列表"></button>
    30.           <!-- Add font size dropdown -->
    31.           <select class="ql-header" title="段落格式">
    32.             <option selected>段落</option>
    33.             <option value="1">标题1</option>
    34.             <option value="2">标题2</option>
    35.             <option value="3">标题3</option>
    36.             <option value="4">标题4</option>
    37.             <option value="5">标题5</option>
    38.             <option value="6">标题6</option>
    39.           </select>
    40.           <select class="ql-size" title="字体大小">
    41.             <option value="10px">10px</option>
    42.             <option value="12px">12px</option>
    43.             <option value="14px">14px</option>
    44.             <option value="16px" selected>16px</option>
    45.             <option value="18px">18px</option>
    46.             <option value="20px">20px</option>
    47.           </select>
    48.           <select class="ql-font" title="字体">
    49.             <option value="SimSun">宋体</option>
    50.             <option value="SimHei">黑体</option>
    51.             <option value="Microsoft-YaHei">微软雅黑</option>
    52.             <option value="KaiTi">楷体</option>
    53.             <option value="FangSong">仿宋</option>
    54.             <option value="Arial">Arial</option>
    55.           </select>
    56.           <!-- Add subscript and superscript buttons -->
    57.           <select class="ql-color" value="color" title="字体颜色"></select>
    58.           <select class="ql-background" value="background" title="背景颜色"></select>
    59.           <select class="ql-align" value="align" title="对齐"></select>
    60.           <button class="ql-clean" title="还原"></button>
    61.           <!-- You can also add your own -->
    62.         </div>
    63.       </quill-editor>
    64.                                         </div>
    65.                                     </el-form-item>