如何从PlateJS获取文本值？实现编辑器值转HTML字符串

直接使用内置序列化API #

PlateJS和反序列化功能对应，自带了HTML序列化方法，直接调用editor.api.html.serialize()就能把编辑器内容转成纯HTML字符串。

示例代码：

// 假设已获取editor实例
const htmlContent = editor.api.html.serialize();
// 输出结果类似："<p><strong>Hi!</strong> It's me.</p>"

处理onValueChange中的value对象 #

如果是在onValueChange回调里拿到的{value: ValueOf<E>}，可以把value的children属性传入序列化方法：

const handleValueChange = ({ value }) => {
  const htmlContent = editor.api.html.serialize({ nodes: value.children });
  console.log(htmlContent);
};

注意事项 #

• 必须确保编辑器已配置createHtmlPlugin插件，否则editor.api.html这个API不会存在。
• 若需要自定义元素的序列化规则，初始化HTML插件时可以传入serialize参数来扩展逻辑。

内容的提问来源于stack exchange，提问作者Adnan