关于tinymce内容改变后，编辑器光标位置重置的问题

  • Z时代
  • 2024-02-09
  • 分类：IT

在vue2的项目中，将tinymce封装成组件，通过v-model接收修改内容。
流程：通过watch props的value，调用tinymce的setContent()，这一步会将内容的光标重置，回到开始位置。

问：如何在内容变化后，光标保持原来的位置？

关于tinymce内容改变后，编辑器光标位置重置的问题

watch部分

...
        value(val) {
            console.log(val, this.hasChange, this.hasInit)
            // if (!this.hasChange && this.hasInit) {
            if (this.hasInit) {
                this.$nextTick(() =>
                    this.setContent(val || ''))
            }
        },
        language() {
            this.destroyTinymce()
            this.$nextTick(() => this.initTinymce())
        }
    },

methods

...
initTinymce() {
            const _this = this
            window.tinymce.init({
                language: this.language,
                selector: `#${this.tinymceId}`,
                height: this.height,
                body_class: 'panel-body ',
                object_resizing: false,
                toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
                menubar: this.menubar,
                plugins: plugins,
                end_container_on_empty_block: true,
                powerpaste_word_import: 'clean',
                code_dialog_height: 450,
                code_dialog_width: 1000,
                advlist_bullet_styles: 'square',
                advlist_number_styles: 'default',
                imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
                default_link_target: '_blank',
                link_title: false,
                fontsize_formats: '10px 12px 14px 16px 18px 20px 24px 36px 48px',
                nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
                init_instance_callback: editor => {
                    if (_this.value) {
                        editor.setContent(_this.value)
                    }
                    _this.hasInit = true
                    editor.on('NodeChange Change KeyUp SetContent', () => {
                        this.hasChange = true
                        this.$emit('input', editor.getContent())
                    })
                },
                setup(editor) {
                    editor.on('FullscreenStateChanged', (e) => {
                        _this.fullscreen = e.state
                    })
                }
            })
        },

设置内容

...
setContent(value) {
            window.tinymce.get(this.tinymceId).setContent(value)
            // 让光标定位到未尾
            //window.tinymce.activeEditor.selection.select(window.tinymce.activeEditor.getBody(), true)
            //window.tinymce.activeEditor.selection.collapse(false)
        },

回答：

window.tinymce.get(this.tinymceId).insertContent(value)

回答：

原因

这个问题出现的原因是在vue场景下才有的：传入的数据会进行一次格式整理，并触发Changed更新组件外部的数据，然后会再触发一次数据传入。

比如，首次传入组件的数据是富文本正文，组件再传入tinymce后会被格式化为<p>富文本正文</p>，并触发tinymce的change事件，接下来组件emit通知更新外部数据来源，然后传入组件的原始数据会被改为<p>富文本正文</p>。数据再次传入组件后，两份数据没有变化才停止了更新至tinymce。

正是这个过程光标会重置。

解决思路

保存在内容变更前的光标位置，在变更后再将光标位置复位。

具体可以看我写的插件源码作为参考：lpreterite/vue-tinymce

记录光标的具体代码： https://github.com/lpreterite...
复位光标的具体代码：https://github.com/lpreterite...

以上是 关于tinymce内容改变后，编辑器光标位置重置的问题 的全部内容， 来源链接： utcz.com/p/937512.html

回到顶部