如何给存在数据库中的文本数据添加颜色样式

如何给存在数据库中的文本数据添加颜色样式

需求：

将给定的文档内容存入数据库（用的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，然后出现了另一个坑页面内容可以进行改变了，修改一次后光标自动定位到文段的最开始原因：内容修改后会影响（innerHtml）中的内容，使光标位置修改解决方式：（input）=“item.content1=$event.target.innerHtml”，将item.content 改为 item.content1，意思就是将修改后的内容赋值给另一个变量，具体也不太清楚····这样就解决了前面的坑

2.前段数据传值问题：
（1）最开始，前端数据直接传到后端，在后端对数据进行转json字符串处理，问题是，文本中的span标签被转义，导致再查询到前端时，解析报错
（2）解决方式：前端将最终的数据转为json字符串格式，然后传到后台，直接赋值就行，后端再查询时，在前端进行转json处理

前端文本中的被span标签包括的内容添加颜色？

这步就好实现了，直接在css中设置该div下span标签的颜色即可！

总结

最开始拿到这个需求还以为实现不了，且之前没有做过这样的需求，好在通过问同事都解决了！好记性不如烂笔头，发表出来，怕以后自己忘记.。哈哈哈