编辑器
注意
粘贴html时会自动过滤块级子元素属性,需要改源码
const toolTags = tags.reduce((result, tag) => {
result[tag.toLowerCase()] = true;
// result[tag.toLowerCase()] = {}; 将这一行修改成上边这行
return result;
}, {});
源码文件地址:src/editorjs/components/modules/paste.ts#L569
粘贴figure图片时没有figcaption会无法粘贴
return {
content,
content: (content.tagName === 'FIGURE' && $.isNodeEmpty(n) && content.childNodes.length > 0) ? content.childNodes[0]: content// 修改,
isBlock,
tool,
event,
};
源码文件地址:src/editorjs/components/modules/paste.ts#L582
将iframe设置为单标签
return tag.tagName && [
...
'WBR',
'IFRAME' // 新增
].includes(tag.tagName);
源码文件地址:src/editorjs/components/modules/dom.ts#L13
将\n br 换行转换block换行
nodes = nodes.reduce((res: any, node: any) => {
if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
const div = $.make('div')
div.appendChild(node)
console.log(div.innerHTML, 'div.innerHTML')
const paragraph = div.innerHTML ? div.innerHTML.split(/(\n|<br\/>|<br>)/): []
if (paragraph.length > 0) {
paragraph.map(text => {
const p = $.make('p')
p.innerHTML = text
res.push(p)
})
} else {
res.push(node)
}
} else {
res.push(node)
}
return res
}, [])
源码文件地址:src/editorjs/components/modules/paste.ts#L544
给编辑器增加header样式
if (contentNode.querySelector('h2') || contentNode.querySelector('h3')) {
contentNode.style.marginTop = '22px'
contentNode.style.marginBottom = '8px'
}
源码文件地址:src/editorjs/components/block/index.ts#L688
启动
npm run build
项目中配置 '@editor': require.resolve('项目地址/dist/editor')