以上两篇,我们主要记录了wangEditor编辑器的基础使用方法,以及上传图片部分。如果对前两篇有兴趣的,可以参考链接:
http://blog.csdn/LJFPHP/article/details/78858596
http://blog.csdn/LJFPHP/article/details/78858797
这里主要是记录一下wangEditor编辑器显示存储的html代码问题。
一、数据库存储的html代码显示问题
1、碰到的问题
这就很不友好了,本来我们用富文本编辑器也是为了能够带有一定的样式,html标签的换行,显示蹄片都是必须的。结果这里却显示不出来,有点无语。
2、哪里出错了
(1)打开F12,在浏览器上查案元素,看看为什么会出不来
(2)
这里可以发现,我们的html代码都成字符串了,也难怪不解析html代码。
3、解决方案
(1)在JS中,有一种方法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
也就是说,我们可以利用这个属性,把字符串转换为html代码,这样就可以被解析了。
(2)其次,我们是需要在页面加载完成后,直接就能在编辑器上看到图文信息。因此必须要使用js的页面加载函数onload()。OK,分析到这里就很明朗了。
(3)代码:
在页面的底部加上以下代码:
<script type="text/javascript">
window.onload=function()
{
//第一步是先获取服务器传过来的图文信息值
var info1 = document.getElementById("content1").value;
//把图文信息的值通过innerHTML赋值给编辑器
document.getElementById("info2").innerHTML=info1;
}
</script>
解释:
1)这里的第一步,是从一个隐藏的input框中获取服务器传过来的值,然后相当于做一个转换。
2)下面贴出html的代码。
//这里最外围的info1是编辑器
//info2是通过js赋值的部分。这里不能直接把数据库的值通过innerHTML赋值给编辑器,不然的话,编辑器会显示不出来,所以这里就新建了一个空的div,用来存放解析数据库的html代码
<div id="info1" class="text" > <!--可使用 min-height 实现编辑区域自动增加高度-->
<div id="info2">
</div>
</div>
//这是我规定的一个隐藏域。用来获取服务器传过来的数据,并且通过js,把服务器传过来的数据显示在页面上
<input class="input-xlarge focused" style="float:left;" name="content" type="hidden" id="content1" value="{{$arr->content}}" >
(4)正常的解析
二、修改图文内容,并提交表单
1、在编辑器重新编辑之后,需要把编辑的内容提交到表单
//这里的edit是表单提交的按钮
document.getElementById('edit').addEventListener('click', function () {
// 读取 html
var info = editor1.txt.html();
document.getElementById("content1").value=info;
}, false);
这部分的意思是,当点击按钮提交表单的时候,JS会获取编辑器中的html代码,并且把这个值赋值给隐藏的input选项框。 然后提交的时候就通过隐藏的input把新修改的内容提交到表单了。
这里写的有点乱。最主要的还是通过 JS来获取编辑器中的内容,以及通过JS的innerHTML解析图文信息。还有就是input的隐藏域,这个东东真的很好用。默默的做了很多事情,深藏功与名。
end
更多推荐
wangEditor编辑器中解析html图文信息问题(三)
发布评论