编辑器、论坛、评论列表图文混排的一些思路

news2024/11/27 10:43:16

好久没写帖子了，今天写一个吧
众所众知从用户那里拿到的数据直接innerHtml插入有被xss攻击的风险，所以一般会转义,拿csdn编辑文章的来举个例子
通过前端转义 ‘>’后,传给后台；这里title没有用innerHtml而是文本所以不需要转义。
在这里插入图片描述
前端请求展示时，后台原封不动的返回；

在这里插入图片描述

比如上面这种比较复杂的论坛帖，评论列表，如果做前后端分离，每个楼层用户都能发图片，文字，视频，音乐和表情包等；并且有管理员功能。比如图片或者文字有审核状态。删除状态，仅本人可见状态等，都需要前端做复杂的交互。
而且把所有楼层数据以html标签传递。后台压测估计过不了；前端做懒加载，分页，虚拟列表等的性能优化都需要图片的宽高，楼层宽高。这个背景下。前端就要把数据分开传给后台。后台分开传给前端。

假设这是后台传给前端的数据

{

content：{
	<div>这里是xxx，[[::img id='123456'::]]这里是图文混排[[::img id='123456'::]] 
	<P >DDDDDD</P>[[::video id='123456'::]]
	<div>

}
image：[
//图片的信息，审核状态等
		{id:'123456',url:'xxxxx',width:300,height:400, state:2},
		{id:'123456',url:'xxxxx',width:300,height:400, state:0}
		]
video：{...}
}

前端拿到数据后，content 可以为图文的排序位置。然后通过正则替换相应的html。
如果是js 直接替换代码。如果是vue组件，里面有各种功能。这个时候有两种方式，一种是比较简单粗暴。把组件放在容器外部隐藏起来，起一个id，等页面挂载后组件也渲染好了。直接用js替换到相应的容器中；第二种就是new vue()去手动挂载。

//举例vue手动挂载吧；

//假设这这是一段被处理过后得到的代码
const content=`<div>这里是xxx，
			<imgAdmi :fid='${id}' :w='${width}' :h='${height}' :url='${url}' :state='${state}' ></imgAdmi>这里是图文混排
			<imgAdmi :fid='${id}' :w='${width}' :h='${height}' :url='${url}' :state='${state}' >
			<P>DDDDDD</P>
			<videoAdmi  :fid='${id}' :w='${width}' :h='${height}' :url='${url}' ></videoAdmi >
          </div>
`
//假设这是一个楼层的显示容器
<div  v-myh='content'></div>

//假设这是一个指令
Vue.directive("myh", {
    inserted: function (el, binding) {
      // el 代表使用了此指令的 DOM 元素
      // binding 获取使用了此指令的绑定值 
        var vm = new Vue({
         template:binding
	    	....
	    }).$mount(el)
     
       ....
    }
  });