surmon-china / vue-quill-editor

@quilljs editor component for @vuejs(2)
https://github.surmon.me/vue-quill-editor
MIT License
7.39k stars 1.03k forks source link

使用的时候失去焦点问题 #371

Open mohuidong opened 5 years ago

mohuidong commented 5 years ago

安装之后使用出现失去焦点的问题,每输入一个字符都会失去焦点

import VueQuillEditor from 'vue-quill-editor';
// import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
            <quill-editor class="editor"
                          ref="myTextEditor"
                          v-model="newProducts.details"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)"
                          @change="onEditorChange($event)">
            </quill-editor>
              editorOption: {
                  modules: {
                      toolbar: [
                          ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                          ["blockquote", "code-block"], // 引用  代码块
                          [{ header: 1 }, { header: 2 }], // 1、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] }], // 标题
                          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                          [{ font: [] }], // 字体种类
                          [{ align: [] }], // 对齐方式
                          ["clean"], // 清除文本格式
                          ["link", "image", "video"] // 链接、图片、视频
                      ], //工具菜单栏配置
                  },
                  placeholder: '请在这里添加产品描述', //提示
                  readyOnly: false, //是否只读
                  theme: 'snow', //主题 snow/bubble
                  syntax: true, //语法检测
              },
            onEditorBlur(editor) {},
            // 获得焦点
            onEditorFocus(editor) {},
            // 开始
            onEditorReady(editor) {},
            // 值发生变化
            onEditorChange(editor) {
                // this.newProducts.details = editor.html;
            },
Chang1ng commented 4 years ago

+1

toujourser commented 3 years ago

+1

wuxianshi commented 3 years ago

请问你们是怎么解决该问题的?

leihuo-mtl3 commented 1 year ago

怎么解决的

leihuo-mtl3 commented 1 year ago

我是添加的时候没有这个问题,一旦编辑就是出现这个问题,最后解决方法就是编辑和添加用同一个富文本编辑器,有同事说加个动态的key,但是不起作用