【Ckeditor】编辑器光标位置保存及赋值，解决空格编码替换问题

最新推荐文章于 2024-05-01 15:24:56 发布

学敲代码的Stars

最新推荐文章于 2024-05-01 15:24:56 发布

阅读量654

点赞数

分类专栏：前端文章标签：编辑器 javascript 开发语言

本文链接：https://blog.csdn.net/xx20010124/article/details/128583028

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章描述了一段关于CKEditor的配置代码，包括高度设置、额外插件及读-only模式。它关注onChange事件处理函数，该函数处理HTML内容的变化，特别是涉及到空格替换和光标位置的维护。当内容包含特定字符时，它会更新表单字段并恢复光标位置。

摘要由CSDN通过智能技术生成

<CKEditor
  id="CKEditor1"
  config={{
    height: 300,
    extraPlugins: 'multiimg,word2html,html5video',
  }}
  readOnly={disabled}
  onChange={this.onChangeContent}
/>

onChangeContent = (html, selection) => {
 const {getFieldValue, setFieldsValue} = this.props.form;
 const oldHtml = getFieldValue('content');
 if (html.replace(/ /g, '&emsp;').replace(/&nbsp;/g, '&emsp;') === oldHtml) {
   // 已经进行过赋值
   return;
 }
 if (html.includes(' ') || html.includes('&nbsp;')) {
   const bookmarks = selection.createBookmarks2(true);//当前光标
   setTimeout(()=>{
     setFieldsValue({content: html.replace(/ /g, '&emsp;').replace(/&nbsp;/g, '&emsp;')}, () => {
       selection.selectBookmarks(bookmarks);//还原光标位置
     });
   }, 100)
 } else {
   setFieldsValue({content: html});
 }
};