blur失效问题 - Githubissues

huangyunlong commented 7 years ago

blur失效一般是什么问题，导致了想点击改变字体大小出问题，因为点击normal是focuse而不是blur,麻烦作者看一下

surmon-china commented 7 years ago

SSR or SPA?
贴出你的代码

huangyunlong commented 7 years ago

spa,你要哪部分代码

huangyunlong commented 7 years ago

onEditorBlur事件失效，我也不太清楚是什么导致了它失效

surmon-china commented 7 years ago

你的组件代码，包括组件模板和Javascript逻辑

huangyunlong commented 7 years ago

<el-dialog title="RichEditor" style="top:0;" :close-on-click-modal='false' :close-on-press-escape='false' class="title" ref="textDailog" size="small" >
            <div id="toolbar">
                <!-- Add a bold button -->
                <button class="ql-bold" title='粗体'>Bold</button>
                <button class="ql-italic" title='斜体'>Italic</button>
                <button class='ql-underline' title='下划线'></button>
                <button class="ql-strike" title='删除线'></button>
                <button class="ql-blockquote" title='引用'></button>
                <button class="ql-code-block" title='添加黑色背景'></button>
                <button class='ql-header' value='1' title='H1字体'></button>
                <button class='ql-header' value='2' title='H2字体'></button>
                <button class='ql-list' value='ordered' title='有序列表'></button>
                <button class='ql-list' value='bullet' title='无序列表'></button>
                <button class='ql-indent' value='-1' title='向左缩进'></button>
                <button class='ql-indent' value='+1' title='向右缩进'></button>
                <!--<button class='ql-direction' value='rt2' title='左右对齐切换'></button>-->
                <!-- Add font size dropdown -->
                <select class="ql-size">
                        <option value="small" ></option>
                        <!-- Note a missing, thus falsy value, is used to reset to default -->
                        <option selected></option>
                        <option value="large"></option>
                        <option value="huge"></option>
                </select>
                <select class="ql-header">
                        <option value="1"></option>
                        <!-- Note a missing, thus falsy value, is used to reset to default -->
                        <option value='2'></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                        <option value="6"></option>
                        <option value="Normal" selected></option>
                </select>
                <select class="ql-color"><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>
                <select class="ql-background"><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>
                <select class="ql-font"><option selected="selected"></option><option value="serif"></option><option value="monospace"></option></select>
                <!-- Add subscript and superscript buttons -->
                <button class="ql-script" value="sub" title='下标'></button>
                <button class="ql-script" value="super" title='上标'></button>
                <select class="ql-align"><option selected="selected"></option><option value="center"></option><option value="right"></option><option value="justify"></option></select>
                <button class='ql-clean' title='返回上一步操作,需要选中'></button>
                <button class='ql-link' title="超链接"></button>
                <button class='ql-image' title='导入图像'></button>
            </div>
            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)" @change='onEditorChange' style="height:25.57rem;">
            </quill-editor>
            <button slot="footer" class="dialog-footer">
                    <el-button @click="cancleTextDialog">取 消</el-button>
                    <el-button type="primary" @click="saveTextDialog">确定添加</el-button>
            </button>
        </el-dialog>

huangyunlong commented 7 years ago

export default {
    name: 'name',
    components: {
        quillEditor
    },
    data() {
        return {
            content: '',
            editorContent: '',
            ajaxContent: '',
            // editorOption: {},
            richTextid: '',
            editorOption: {
                modules: {
                    toolbar: '#toolbar'
                    // history: {
                    //     delay: 1000,
                    //     maxStack: 50,
                    //     userOnly: false
                    // },
                    // imageImport: true,
                    // imageResize: {
                    //     displaySize: true
                    // }
                }
            }
        }
    },
    methods: {
        onEditorBlur(editor) {
            console.log('editor blur!', editor);
        },
        onEditorFocus(editor) {
            console.log('editor focus!');
            // this.editorContent = editor.container.innerText;
        },
        onEditorReady(editor) {
            console.log('editor ready!', editor);
        },
        onEditorChange({
            editor,
            html,
            text
        }) {
            // console.log('editor change!', editor, html, text);
            this.editorContent = text;
        },
        // 打开的时候传递过来id
        openDialog(richTextid) {
            this.$refs['textDailog'].open();
            this.$refs['textDailog'].$nextTick(function () {
                $('.ql-picker-item').eq(0).attr('title', '小字体');
                $('.ql-picker-item').eq(1).attr('title', '正常字体');
                $('.ql-picker-item').eq(2).attr('title', '大字体');
                $('.ql-picker-item').eq(3).attr('title', '超大字体');
                $('.ql-picker-item').eq(4).attr('title', '一级标题字体');
                $('.ql-picker-item').eq(5).attr('title', '二级标题字体');
                $('.ql-picker-item').eq(6).attr('title', '三级标题字体');
                $('.ql-picker-item').eq(7).attr('title', '四级标题字体');
                $('.ql-picker-item').eq(8).attr('title', '五级标题字体');
                $('.ql-picker-item').eq(9).attr('title', '六级标题字体');
                $('.ql-picker-item').eq(10).attr('title', '正常标题字体');

                $('.ql-picker-label').eq(2).attr('title', '字体颜色');
                $('.ql-picker-label').eq(3).attr('title', '背景颜色');
                $('.ql-font.ql-picker .ql-picker-label').attr('title', '字体样式');
                $('.ql-align .ql-picker-label').attr('title', '对其方式');
                $('.ql-align .ql-picker-options .ql-picker-item').eq(0).attr('title', '左对齐');
                $('.ql-align .ql-picker-options .ql-picker-item').eq(1).attr('title', '居中对齐');
                $('.ql-align .ql-picker-options .ql-picker-item').eq(2).attr('title', '右对齐');
                $('.ql-align .ql-picker-options .ql-picker-item').eq(3).attr('title', '左对齐');
            });
            let vm = this;
            vm.richTextid = richTextid;
            $.ajax({
                type: 'get',
                url: '/api/textcontent',
                async: true,
                data: {
                    richTextid: richTextid
                },
                dataType: 'json',
                success: function (response) {
                    console.dir(response)
                    vm.content = response.data.richData;
                    vm.ajaxContent = response.data.richData
                }
            });
        },
        // 取消时候的事件
        cancleTextDialog() {
            // 输入框改变的时候去掉多余的空格
            let editorContenta = this.editorContent.replace(/\s/g, '');
            // 后台数据去掉多余的空格
            let ajaxContent = this.ajaxContent.replace(/<.*?>/ig, '').replace(/\s/g, '');
            // 当和后台获得数据不相等的时候就问用户
            if (editorContenta !== ajaxContent) {
                let content = confirm('你确定放弃你所编辑的内容');
                if (content) {
                    this.$refs['textDailog'].close();
                }
            } else {
                this.$refs['textDailog'].close();
            }
        },

surmon-china commented 7 years ago

能认真些吗？针对你的代码排版

huangyunlong commented 7 years ago

复制到这上面就这样了，我的编辑器是好的，不好意思呀

huangyunlong commented 7 years ago

建议您将图标弄一个title属性，我为了这个多写很多代码

surmon-china commented 7 years ago

<div id="toolbar">是可以完全自定义的，quill本身是开放的，一切都是开放的，各种第三方功能也是需要自行扩展的，组件做任何一点点小的封装就等于将组件的开放限制了；鉴于你上面的问题，在toolbar中自定义按钮覆盖本身的就可以工作了，切记不要去操作DOM； ready、change、focus这三个事件可以正常工作吗？

huangyunlong commented 7 years ago

可以的，这些可以正常操作，就是不能用blur属性，不操作dom，对于select下的option加不了title属性，因为我的需求中有title属性的要求

huangyunlong commented 7 years ago

是不是我的<div id='toolbar'>没有写入<quill-editor>标签中的问题，因为我将<div id='toolbar' slot=‘’>这样就不能显示图标了，所以我没写slot，放入<quill-editor>标签的外面

surmon-china commented 7 years ago

不能确定，我这里没有element-ui环境，你可以先测试下，按照这里的方式：https://github.com/surmon-china/vue-quill-editor/blob/master/examples/03-example.vue#L19

surmon-china commented 7 years ago

把Markdown语法好好学习下，你发的代码自己都看不到，我一直在帮你修改，知道吗

huangyunlong commented 7 years ago

好的谢啦辛苦了，我再自己查查

surmon-china commented 7 years ago

我这里本地实测，blur事件是可用的，无论toolbar在内在外，所以会不会是因为你的弹窗组件引起的？

huangyunlong commented 7 years ago

不会，我检测了，就是在例外一个文件我都检测了，都是好的，不知道是哪一条代码导致的，辛苦你了

surmon-china commented 7 years ago

@huangyunlong 我在我本地的element-ui项目中测试你的代码，没有异常，blur事件可以正常响应，

关于自定义属性的问题，可以参考这里： https://github.com/quilljs/quill/issues/1084

huangyunlong commented 7 years ago

您给我的自定义属性，我测试是不起作用的呀，html中会出现value=[object,object],然后什么也没有出现

huangyunlong commented 7 years ago

跟你说一个奇怪的现象，当我把smal改成huge的时候，当我输入内容后直接触发blur,正是奇怪了

surmon-china commented 7 years ago

@huangyunlong 我给你的链接重点是quill作者对建议的反馈，反馈建议的代码不是生产代码。从现在开始我不会再回答你的问题，直到你拥有独立解决问题的能力为止。

surmon-china commented 7 years ago

关于你的问题的可以工作的示例代码：

<template>
    <div class="documentation">
        <el-dialog title="RichEditor" 
                             style="top:0" 
                             :close-on-click-modal="false"
                             :close-on-press-escape="false" 
                             class="title" 
                             ref="textDailog" 
                             size="small">
      <quill-editor ref="myTextEditor" 
                                v-model="content" 
                                :options="editorOption" 
                                @blur="onEditorBlur($event)" 
                                @focus="onEditorFocus($event)"
                                @ready="onEditorReady($event)" 
                                @change='onEditorChange' 
                                style="height:25.57rem;">
        <div id="toolbar" slot="toolbar">
          <!-- Add a bold button -->
          <button class="ql-bold" title='粗体'>Bold</button>
          <button class="ql-italic" title='斜体'>Italic</button>
          <button class='ql-underline' title='下划线'></button>
          <button class="ql-strike" title='删除线'></button>
          <button class="ql-blockquote" title='引用'></button>
          <button class="ql-code-block" title='添加黑色背景'></button>
          <button class='ql-header' value='1' title='H1字体'></button>
          <button class='ql-header' value='2' title='H2字体'></button>
          <button class='ql-list' value='ordered' title='有序列表'></button>
          <button class='ql-list' value='bullet' title='无序列表'></button>
          <button class='ql-indent' value='-1' title='向左缩进'></button>
          <button class='ql-indent' value='+1' title='向右缩进'></button>
          <!--<button class='ql-direction' value='rt2' title='左右对齐切换'></button>-->
          <!-- Add font size dropdown -->
          <select class="ql-size">
            <option value="small" title="小字体"></option>
            <!-- Note a missing, thus falsy value, is used to reset to default -->
            <option selected></option>
            <option value="large"></option>
            <option value="huge"></option>
          </select>
          <select class="ql-header">
            <option value="1" title="一级标题字体"></option>
            <!-- Note a missing, thus falsy value, is used to reset to default -->
            <option value='2'></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option value="Normal" selected></option>
          </select>
          <select class="ql-color">
            <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>
          <select class="ql-background">
            <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>
          <select class="ql-font">
            <option selected="selected"></option>
            <option value="serif"></option>
            <option value="monospace"></option>
          </select>
          <!-- Add subscript and superscript buttons -->
          <button class="ql-script" value="sub" title='下标'></button>
          <button class="ql-script" value="super" title='上标'></button>
          <select class="ql-align">
            <option selected="selected"></option>
            <option value="center"></option>
            <option value="right"></option>
            <option value="justify"></option>
          </select>
          <button class='ql-clean' title='返回上一步操作,需要选中'></button>
          <button class='ql-link' title="超链接"></button>
          <button class='ql-image' title='导入图像'></button>
        </div>
      </quill-editor>
      <button slot="footer" class="dialog-footer">
        <el-button @click="cancleTextDialog">取 消</el-button>
        <el-button type="primary">确定添加</el-button>
      </button>
    </el-dialog>
        <div class="panel panel-default">
            <div class="panel-body">
                <h4 class="text-center">我是接口说明</h4>
                <hr>
                <p>量化平台接口使用说明</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'documentation',
    mounted() {
        this.openDialog()
    },
    data() {
      return {
        content: '',
        editorContent: '',
        ajaxContent: '',
        richTextid: '',
        editorOption: {
          modules: {
            toolbar: '#toolbar'
            // history: {
            //     delay: 1000,
            //     maxStack: 50,
            //     userOnly: false
            // },
            // imageImport: true,
            // imageResize: {
            //     displaySize: true
            // }
          }
        }
      }
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor);
      },
      onEditorFocus(editor) {
        console.log('editor focus!');
        // this.editorContent = editor.container.innerText;
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor);
      },
      onEditorChange({
        editor,
        html,
        text
      }) {
        // console.log('editor change!', editor, html, text);
        this.editorContent = text;
      },
      // 打开的时候传递过来id
      openDialog(richTextid) {
        this.$refs['textDailog'].open();
        this.$refs['textDailog'].$nextTick(function () {
            console.log('进行一堆Dom操作')
        });
        this.content = '<p>hello world!</p>'
        this.ajaxContent = '<p>hello world!</p>'
      },
      // 取消时候的事件
      cancleTextDialog() {
        // 输入框改变的时候去掉多余的空格
        let editorContenta = this.editorContent.replace(/\s/g, '');
        // 后台数据去掉多余的空格
        let ajaxContent = this.ajaxContent.replace(/<.*?>/ig, '').replace(/\s/g, '');
        // 当和后台获得数据不相等的时候就问用户
        if (editorContenta !== ajaxContent) {
          let content = confirm('你确定放弃你所编辑的内容');
          if (content) {
            this.$refs['textDailog'].close();
          }
        } else {
            this.$refs['textDailog'].close();
        }
      },
    }
    }
</script>

<style lang="scss" scoped>
    @import '~assets/sass/variables.scss';
</style>

huangyunlong commented 7 years ago

你指导的是，我自己想想吧

surmon-china / vue-quill-editor

blur失效问题 #41