tinymce变化后onchange光标变化问题(React)

文章描述了在使用AntDesignPro封装的TinyMCE编辑器中遇到的光标自动跳到最前面的问题,以及尝试通过选择器定位到尾部和保存编辑位置的解决方案。最终,作者发现通过使用useState保持初始化值不变可以避免组件重新渲染导致的光标移动问题。
摘要由CSDN通过智能技术生成

关于tinymce富文内容变化后,光标会自动跳到最前面的问题。比如回车、复制粘贴,都会跳到最前面。

由于我是ant design pro包了一层,它给分配的value和onchange,不用的话,确实也不会有这问题,但那样form提交表单时,虽然编辑器里已经变化,但获取不到变化值。

于是我开始搜这问题的解决方式,很多人都是直接定位到最尾部,用:

editor.selection.select(editor.getBody(),true);
editor.selection.collapse(false);

但这样的体验很不好,于是我又找到一个方法,让它定位到最后编辑的位置:

<Editor
      tinymceScriptSrc="/tinymce/tinymce.min.js" //tinymce主要文件js入口
      inline={false}
      initialValue={value}
      onChange={(e) => {
        const target = e.target;
        // 获取光标最后的位置
        const p = target.selection.getBookmark(2);
        onChange(target.getContent());
        setTimeout(() => {
          // 定位最后的位置
          target.selection.moveToBookmark(p);
        }, 1);
      }}
      init={{
        base_url: "/tinymce/",//告知tinymce,所有插件、主题走我这个入口
        language: "zh-Hans",//设置中文语言
        language_url: "/tinymce/langs/zh-Hans.js",//中文语言引入地址
        height: 500,
        menubar: false,
        statusbar: false,
        plugins: ['code', 'image'],
        toolbar: ['formatselect fontfamily fontsize | bold italic backcolor | undo redo',
          'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | removeformat code'],
        font_family_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        images_upload_handler: example_image_upload_handler,
      }}
    />

但这样又会出现新问题……就是编辑几个字之后,再点击一下才会触发onchange,也就是说点到别的地方光标会先跳回来一次,再点击一次才正常……

最后想了想它为什么会这么跳的原理,是因为onchange之后,改变了value值,导致组件又重新渲染了内容,所以只要value值不变,其实就不会有这问题。

于是只要简单加一个钩子:const [init] = useState(value);

把init替代value传到initialValue={value},就完美解决问题了!

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值