编辑器内置把所有元素包裹在p标签中，请教下如何修改源码，可以把默认用p标签换成div标签

[maotingyuan]

问题描述

使用了wangeditor 4版本，该版本没有对HTML的内容做严格限制，我们的项目是PC和移动端兼容的，但是移动端新建的内容默认用的是div标签进行包裹，在 4 版本中没有问题；但是现在PC端省级到wangeditor 5版本，对HTML内容做了严格限制，移动端使用div标签创建的内容，在PC端无法正常解析，导致两端出现严重的兼容问题，而且可能影响之前用户在移动端的数据。因此想把目前wangeditor 5版本默认用p标签包裹，修改源码改成用div进行包裹，保证两端的兼容性。

wangEditor 版本

@wangeditor/editor 5.1.23 @wangeditor/editor-for-vue 1.0.2

是否查阅了文档 ？

是

最小成本的复现步骤

在demo网站中可以看到所有内容都是用p标签包裹的，除了待办使用div包裹的

[jswxwxf]

同问

[Vinsea]

这个库基于slatejs，所以你应该去看slate文档，很多定制化需求都可以实现。 你这个思路就是重写insertBreak，把p替换一下。大概代码：

import { SlateTransforms, SlateElement } from '@wangeditor/editor'

const withCustomElements = (editor) => {
  const { insertBreak } = editor;

  editor.insertBreak = () => {
    const [match] = Editor.nodes(editor, {
      match: (n) => SlateElement.isElement(n) && n.type === 'paragraph',
    });

    if (match) {
      const [paragraph] = match;
      if (Editor.isEmpty(editor, paragraph)) {
        SlateTransforms.setNodes(editor, { type: 'div' });
        return;
      }
    }

    insertBreak();
  };

  return editor;
};