quill-editor使用方法，图片base64位转为url缩减字符长度，以及显示文字个数，光标位置等

最新推荐文章于 2025-09-10 01:26:47 发布

原创

最新推荐文章于 2025-09-10 01:26:47 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

下载

npm install vue-quill-editor

2.导入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

3.使用

 <!-- 富文本 -->
            <div class="editor-wrapper">
              <!-- 改进quill的图片base64功能，改为上传后拼接url，上传组件隐藏 -->
              <el-upload
                class="quill-upload"
                :action="photoUploadUrl"
                :show-file-list="false"
                :on-success="handleQuillImgSuccess"
                with-credentials
                accept="image/gif, image/jpeg, image/jpg, image/bmp, image/png"
                style="display: none">
                <i id="imgInput" class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <!--  -->
              <quill-editor ref="myQuillEditor" v-model="form.CONTENT" @change="onEditorChange($event)" :disabled="contentModel" :options="editorOption" />
              <span class="size-tip">
                {
  
  {TiLength}}/500
              </span>
            </div>

4.赋值与方法

const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],

        [{
   
    header: 1 }, {
   
    header: 2 }], // custom button values
        [{
   
    list: 'ordered' }, {
   
    list: 'bullet' }],
        [{
   
    script: 'sub' }, {
   
    script: 'super' }], // superscript/subscript
        [{
   
    indent: '-1' }, {
   
    indent: '+1' }], // outdent/indent
        [{
   
    direction: 'rtl' }], // text direction

        [{
   
    size: ['small', false, 'large', 'huge'] }], // custom dropdown
        [{
   
    header: [1, 2, 3, 4, 5, 6, fals

最低0.47元/天解锁文章