如何给存在数据库中的文本数据添加颜色样式
需求：
将给定的文档内容存入数据库（用的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=event.target.innerHtml”，将item.content 改为 item.content1，意思就是将修改后的内容赋值给另一个变量，具体也不太清楚····这样就解决了前面的坑
2.前段数据传值问题：
（1）最开始，前端数据直接传到后端，在后端对数据进行转json字符串处理，问题是，文本中的span标签被转义，导致再查询到前端时，解析报错
（2）解决方式：前端将最终的数据转为json字符串格式，然后传到后台，直接赋值就行，后端再查询时，在前端进行转json处理
前端文本中的被span标签包括的内容添加颜色？
这步就好实现了，直接在css中设置该div下span标签的颜色即可！
总结
最开始拿到这个需求还以为实现不了，且之前没有做过这样的需求，好在通过问同事都解决了！好记性不如烂笔头，发表出来，怕以后自己忘记.。哈哈哈
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
