Help 我自定义了一个新元素：带有自定义属性的video，但是setHtml（‘<video></video>’）时，编辑器使用getHtml（）获取到的还是编辑器自带的video标签元素

[yuwanchun]

问题描述

我自定义了一个新元素：带有自定义属性的video，但是setHtml（‘’）时，编辑器使用getHtml（）获取到的还是编辑器自带的video标签元素，但是使用editor.insertNode()获取到的html就是正确的

wangEditor 版本

5.6.27

是否查阅了文档 ？

（文档链接 https://cycleccc.github.io/docs/ ）

是

最小成本的复现步骤

（请告诉我们，如何最快的复现该问题？）

• 步骤一
• 步骤二
• 步骤三

[yuwanchun]

`var { Boot, DomEditor } = window.wangEditor;

function widthTest(editor) {
const { isVoid } = editor;
const newEditor = editor;
newEditor.isVoid = elem => {
const type = DomEditor.getNodeType(elem);
if (type == 'videoCustomize') {
return true;
}
return isVoid(elem);
};
return newEditor;
}

function renderTest(elem, children, editor) {
const { id = "", src = "", poster = "", width = "100%" } = elem;
const testVnode = h(
'video',
{
props: {
poster: poster,
src: src,
controls: true,
preload: "none",
},
style: {
borderRadius: '5px',
border: 'solid 3px red',
width: width,
height: '100%'
}
},
[h('source', { props: { src: src, type: 'video/mp4' }})]
);
const vnode = h(
'div',
{},
[testVnode]
);
return vnode;
}

const renderElemConfTest = {
type: "videoCustomize",
renderElem: renderTest
};

function testToHtml(elem, childrenHtml) {
const { id = "", src = "", poster = "", width = "100%" } = elem;
return <video data-w-e-type="videoCustomize" data-w-e-is-void id="${id}" poster="${poster}" src="${src}" width="${width}" class="video-js vjs-default-skin"> <source src="${src}" type="video/mp4"> </video> ;
}

const elemToHtmlConfTest = {
type: "videoCustomize",
elemToHtml: testToHtml
};

function parseTestHtml(domElem, children, editor) {
const id = domElem.getAttribute('id') || '';
const src = domElem.getAttribute('src') || '';
const poster = domElem.getAttribute('poster') || '';
const width = domElem.getAttribute('width') || '';
const testElement = {
type: 'videoCustomize',
id: id,
src: src,
poster: poster,
width: width,
children: [{ text: '' }]
};
return testElement;
}

const parseHtmlConfTest = {
selector: 'video[data-w-e-type="videoCustomize"]',
parseElemHtml: parseTestHtml
};

var videoModule = {
editorPlugin: widthTest,
renderElems: [renderElemConfTest],
elemsToHtml: [elemToHtmlConfTest],
parseElemsHtml: [parseHtmlConfTest]
};

Boot.registerModule(videoModule);

// 不生效
// editor.setHtml(<video data-w-e-type="videoCustomize" data-w-e-is-void id="my-player" poster="https://i0.hippopx.com/photos/965/714/472/tree-sunlight-background-relaxation-thumb.jpg" src="https://files.jin1.com.cn/videos/test/a2d7b65e05ae7182327f31478d835c2.mp4" width="99%"></video>);

// 生效
// var testElement = {
// type: 'videoCustomize',
// id: 'my-player',
// src: 'https://files.jin1.com.cn/videos/test/a2d7b65e05ae7182327f31478d835c2.mp4',
// poster: 'https://i0.hippopx.com/photos/965/714/472/tree-sunlight-background-relaxation-thumb.jpg',
// width: '99%'
// };
// editor.insertNode(testElement);`

[cycleccc]

不要直接使用 video 标签，使用 div 去包裹。

[yuwanchun]

必须要使用div来包裹video标签么？我要兼容之前的数据，之前生成的html中没有用div包裹video，是直接使用的video标签，这种情况下有什么解决方法呢？

[yuwanchun]

借用float-image插件的方式覆盖掉原有video标签可以吗

[cycleccc]

必须要使用div来包裹video标签 是因为原来的video的实现就是用 div 包裹实现的，为了覆盖就得用原来 video 标签一样的格式。
仿照float-image插件的逻辑可以实现覆盖 video 标签添加自己想要的属性。
以前的旧数据就只能写个脚本筛一遍数据了。