tinymce 清空后输入仍保持样式

252 阅读1分钟

场景:
使用 tinymce 时,一般情况下我们删除完输入框内带样式的文本后,再次输入的文本样式会恢复回初始的样子。但有时候我们需要的场景是,清除完输入框内样式的文本后,期望再次输入的文本样式还是未删除前的那种。对标案例是:凡科建站中的文本模块,为文本设置样式(比如将其设置成蓝色加粗)后将文本删除干净,再次输入文本,会发现输入的文本是蓝色加粗的。

思路:

  1. 删除时,如果还剩一个文本的话,就将此时的样式保存起来
  2. 当检测到删除后无文本了,则插入一个 p 标签,p 标签包裹着 span 标签,为 span 标签赋予第 1 步保存下来的样式,其中 span 的 innerHTML 内容是 ‌(零宽空格)
  3. 再次输入时,文字就会被自动插入到 span 标签中,则有样式了

代码示例:
code.juejin.cn/pen/7320222…

码上掘金:
点击查看【juejin】