销售员做网站,seo优化排名价格,关键词seo技术,创建网站的步骤背景
可视化页面搭建场景#xff0c;需要支持配置富文本内容并在页面中渲染#xff0c;富文本编辑器SDK采用了tinymce/tinymce-react。
问题场景
问题1 #xff1a;文本数据转义
富文本编辑器生成的HTML富文本在服务端存储时会对字符串进行转义#xff0c;比如#xf…背景
可视化页面搭建场景需要支持配置富文本内容并在页面中渲染富文本编辑器SDK采用了tinymce/tinymce-react。
问题场景
问题1 文本数据转义
富文本编辑器生成的HTML富文本在服务端存储时会对字符串进行转义比如
p3245003/p ---- lt;pgt;3245003lt;/pgt;解决方案 利用浏览器默认行为通过innerHTML方法生成dom节点进行转义然后通过DOMParser将html文本转化成dom树 参考https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
const htmlToElement (html) {const parser new DOMParser();const doc parser.parseFromString(html, text/html);return doc.body.firstChild;}
const transformStr (content) {let div document.createElement(div);div.innerHTML content;return htmlToElement(div${div.innerText}/div)
}问题2SSR场景hydrate模式禁用了innerHTML或者dangerouslySetInnerHTML直接渲染
使用最原始的js API
方案1innerHTML
const C props {const {content, isSSR} props;const wrapRef useRefany();useEffect(() {if(wrapRef.current !isSSR) {wrapRef.current.innerHTML content;}}, []);return (div ref{wrapRef} /)
}export default C;方案2appendChild
const C props {const {content, isSSR} props;const wrapRef useRefany();useEffect(() {if (wrapRef.current) {function htmlToElement(html) {const parser new DOMParser();const doc parser.parseFromString(html, text/html);console.log(htmlToElement, doc, doc.body.firstChild);return doc.body.firstChild;}//ts-ignoreif (!isSSR) {let div document.createElement(div);div.innerHTML content;wrapRef.current.appendChild(htmlToElement(div${div.innerText}/div));}}}, []);return (div ref{wrapRef} /)
}问题3生成富文本体积太大
方案1
生成的富文本内容生成文件然后上传至oss富文本编辑器和渲染页面分别通过cdn拉取数据内容进行渲染
方案2
文本简化压缩采用类似html-minifier-terser的库对生成的html文本进行处理压缩删除无用标签、空格等内容减少体积
方案3
成本略高只提供思路小型编译器通过将html内容解析转化成AST分析css样式结构进行优化减少css样式内容分析dom结构减少无用dom和层级
