关于UEditor插件的使用以及UEditor数据回显问题，数据库存储标签代码前台页面如何解析问题小结

亦凉 2022-06-02 08:55 488阅读 0赞

我们就直入主题，今天介绍的是百度的UEditor富文本编辑器的一些基本使用介绍：

1.项目当中导入插件（个人愚见：选择那个基于原生js开发的插件，避免和自己项目的jquery起冲突，当然实在不想找，可以**加入下面的学习群**，里面有一些**插件文件**）

![SouthEast][]

2.页面当中uediter的渲染主要是靠带有id属性的div

<**div****id=****"editor"****type=****"text/plain"**></**div**>

3.页面js代码如下：  
**$**(**document**).ready(**function**() \{   
***UE***.delEditor(**'editor'**);//初始化之前删除这个id下的富文本  
**var**ue =***UE***.getEditor(**'editor'**,\{   
**toolbars**: \[\[//自定义富文本编辑器的工具栏（在核心配置js里面ueditor.config.js）  
*//'fontfamily', //字体*  
*//'fontsize', //字号*  
**'bold'**,*//加粗*  
**'italic'**,*//斜体*  
**'underline'**,*//下划线*  
**'forecolor'***//字体颜色*  
\]\],  
*//focus时自动清空初始化时的内容*  
**autoClearinitialContent**:**true**,  
*//关闭字数统计*  
**wordCount**:**false**,  
*//关闭elementPath*  
**elementPathEnabled**:**false**,  
*//默认的编辑区域高度*  
**initialFrameHeight**:300

*//更多其他参数，请参考ueditor.config.js中的配置项*  
\});

4.直接打开页面就渲染出一个‘漂亮的’富文本编辑器，如何获取输入内容呢，ueditor自带很多种方法

![SouthEast 1][]

5.我选择的是“获取内容”这个按钮，因为这样存储的数据带有字体颜色，加粗等样式我是通过表单提交把获取的输入内容作为隐藏域的值传递到后台（回显数据的话就把**数据返回到页面的隐藏域**当中，**先初始化富文本编辑器**然后通过**ue.setContent(值)**把数据填充到编辑器里面）

<input type="hidden" id="answer" name="answer"/>
    var va = UE.getEditor('editor').getContent();
    $("#answer").val(va);

6.如果你从数据库把这些数据查询出来再页面展示的时候会发现没有一点样式，而且带有标签都没有解析，破解方法是你依然吧值先传到一个隐藏域当中，然后在页面想要展示的地方写一个div ，通过这个div的id 在js中为这个div的**.html()**方法填充隐藏域里面的值即可。或者用**标签拼接**隐藏域的值在放到页面当中即可。

return '<div style="width:100%;height:100%;">'+row.answer+'</div>';

**如有披露或问题欢迎留言或者入群探讨**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70][]

[SouthEast]: /images/20220602/90a25f35852843e7977706a0dbe6342b.png
[SouthEast 1]: /images/20220602/6534bb6771a74bf9b5af3e68ab531d20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70]: /images/20220602/1aa7dcb26da94e09b9671195585cd4ef.png