如何给存在数据库中的文本数据添加颜色样式
需求:
将给定的文档内容存入数据库(用的orcale),查询到的数据在页面展示时,实现原标红字体样式,页面展示时同样显示,且内容可编辑。
一、数据如何存到数据库中?
因文本内容较多,将该字段定义为CLOB类型
存入,示例:
取出,示例:
因为要遍历的内容要区分标题和内容、且方便存取,字段中数据格式定义为json数组类型,例如:
[
{
“bigTitle”:“第一章”,
“data”:[
{ “smalTitle”:“第一条”, “content”:""},
{ “smalTitle”:“第一条”, “content”:"",
“other”:[{“title”:"",“content”:""}]
}
]
},
{
“bigTitle”:“第二章”,
content:""
},
{
“bigTitle”:“第三章”,
content:""
}
]
二、前端页面如何实现?
1.页面如何实现文本可编辑,且内容中可包含span标签
第一次尝试的方法是:使用textarea,使用双向绑定可以实现文本可编辑,可是因为文本中含有span标签,所以报错
第二次尝试的方法是:使用div,因为div中可以允许有span标签,且contenteditable = “true”,可以将div变成文本样式,可以进行内容编辑
2.踩到的坑。。。
1.最开始没有添加(input)中的内容,且innerHtml为双向绑定,但是在页面上进行修改后,内容并没有改变,所以加上了(input) = “item.content= e v e n t . t a r g e t . i n n e r H t m l ” , 注 意 : 此 时 这 里 使 用 的 是 i t e m . c o n t e n t , 然 后 出 现 了 另 一 个 坑 页 面 内 容 可 以 进 行 改 变 了 , 修 改 一 次 后 光 标 自 动 定 位 到 文 段 的 最 开 始 原 因 : 内 容 修 改 后 会 影 响 ( i n n e r H t m l ) 中 的 内 容 , 使 光 标 位 置 修 改 解 决 方 式 : ( i n p u t ) = “ i t e m . c o n t e n t 1 = event.target.innerHtml”,注意:此时这里使用的是item.content,然后出现了另一个坑 页面内容可以进行改变了,修改一次后光标自动定位到文段的最开始 原因:内容修改后会影响(innerHtml)中的内容,使光标位置修改 解决方式:(input) = “item.content1= event.target.innerHtml”,注意:此时这里使用的是item.content,然后出现了另一个坑页面内容可以进行改变了,修改一次后光标自动定位到文段的最开始原因:内容修改后会影响(innerHtml)中的内容,使光标位置修改解决方式:(input)=“item.content1=event.target.innerHtml”,将item.content 改为 item.content1,意思就是将修改后的内容赋值给另一个变量,具体也不太清楚····这样就解决了前面的坑
2.前段数据传值问题:
(1)最开始,前端数据直接传到后端,在后端对数据进行转json字符串处理,问题是,文本中的span标签被转义,导致再查询到前端时,解析报错
(2)解决方式:前端将最终的数据转为json字符串格式,然后传到后台,直接赋值就行,后端再查询时,在前端进行转json处理
前端文本中的被span标签包括的内容添加颜色?
这步就好实现了,直接在css中设置该div下span标签的颜色即可!
总结
最开始拿到这个需求还以为实现不了,且之前没有做过这样的需求,好在通过问同事都解决了!好记性不如烂笔头,发表出来,怕以后自己忘记.。哈哈哈