关于UEditor插件的使用以及UEditor数据回显问题,数据库存储标签代码前台页面如何解析问题小结
2018-01-09 16:36
816 查看
我们就直入主题,今天介绍的是百度的UEditor富文本编辑器的一些基本使用介绍:
1.项目当中导入插件(个人愚见:选择那个基于原生js开发的插件,避免和自己项目的jquery起冲突,当然实在不想找,可以加入下面的学习群,里面有一些插件文件)
2.页面当中uediter的渲染主要是靠带有id属性的div
<divid="editor"type="text/plain"></div>
3.页面js代码如下:
$(document).ready(function()
{
UE.delEditor('editor');//初始化之前删除这个id下的富文本
varue
=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自带很多种方法
5.我选择的是“获取内容”这个按钮,因为这样存储的数据带有字体颜色,加粗等样式我是通过表单提交把获取的输入内容作为隐藏域的值传递到后台(回显数据的话就把数据返回到页面的隐藏域当中,先初始化富文本编辑器然后通过ue.setContent(值)把数据填充到编辑器里面)
6.如果你从数据库把这些数据查询出来再页面展示的时候会发现没有一点样式,而且带有标签都没有解析,破解方法是你依然吧值先传到一个隐藏域当中,然后在页面想要展示的地方写一个div ,通过这个div的id 在js中为这个div的.html()方法填充隐藏域里面的值即可。或者用标签拼接隐藏域的值在放到页面当中即可。
如果有什么好的建议或者有什么问题欢迎我们一起探讨
1.项目当中导入插件(个人愚见:选择那个基于原生js开发的插件,避免和自己项目的jquery起冲突,当然实在不想找,可以加入下面的学习群,里面有一些插件文件)
2.页面当中uediter的渲染主要是靠带有id属性的div
<divid="editor"type="text/plain"></div>
3.页面js代码如下:
$(document).ready(function()
{
UE.delEditor('editor');//初始化之前删除这个id下的富文本
varue
=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自带很多种方法
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>';
如果有什么好的建议或者有什么问题欢迎我们一起探讨
相关文章推荐
- 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析
- 关于“Asp.net 中后台CS读取数据库数据生成数组传递给前台页面JS使用”
- 你知道吗,如何使用select2插件实现下拉框一次性选多个值、以及数据的回显
- java笔记:关于复杂数据存储的问题--基础篇:数组以及浅拷贝与深拷贝的问题(上)
- java笔记:关于复杂数据存储的问题--基础篇:数组以及浅拷贝与深拷贝的问题(下)
- 计算机内部如何存储数据,关于源码、补码的问题!
- 关于利用opendatasource 读取excel文件中的数据问题以及更新数据库中对应数据的问题
- 如何去掉从数据库中读出的带有html标签的字符串,并是标签起效,显示在前台页面
- 关于使用struts2时子窗体页面跳转后在父窗体打开的问题以及Session过期后的页面跳转问题
- STM32的I2C的使用要注意啦(用来连接EEPROM,存储数据),关于I2C的busyflag以及与FSMC冲突!
- JSP页面中使用JSTL标签出现无法解析问题解决办法
- 关于textarea标签输出数据库数据时出现大量空格导致格式不一致的问题
- 关于使用System.out.println()向控制台输出数据和使用out.println()向页面输出数据效率的问题
- asp.net的服务器控件客户端空件的区别以及如何刷新页面不靠数据库数据停留在页面
- 关于dubbo的理解,使用,常见问题以及如何更好的实施服务化
- 关于复杂数据存储的问题--基础篇:数组以及浅拷贝与深拷贝的问题
- 显示数据(从数据库中得到)中的html标签 用于解决数据在前台显示,样式被数据破坏的问题!!css
- 关于在前台页面插入C#代码的问题,导致页面不完全显示
- 关于复杂数据存储的问题--基础篇:数组以及浅拷贝与深拷贝的问题(下)
- 取从textarea中存到MYSQL的数据以原格式显示问题以及解决MySQL日期处理和标签的使用