wangEditor编辑器中解析html图⽂信息问题（三）
这⾥主要是记录⼀下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">
{
//第⼀步是先获取服务器传过来的图⽂信息值
var info1 = ElementById("content1").value;
//把图⽂信息的值通过innerHTML赋值给编辑器
}
</script>
解释：
1）这⾥的第⼀步，是从⼀个隐藏的input框中获取服务器传过来的值，然后相当于做⼀个转换。
2）下⾯贴出html的代码。
//这⾥最外围的info1是编辑器
//info2是通过js赋值的部分。这⾥不能直接把数据库的值通过innerHTML赋值给编辑器，不然的话，编辑器会显⽰不出来，所以这⾥就新建了⼀个空的div，⽤来<div id="info1"class="text" ><!--可使⽤ min-height 实现编辑区域⾃动增加⾼度-->asp富文本编辑器
<div id="info2">
</div>
</div>
//这是我规定的⼀个隐藏域。⽤来获取服务器传过来的数据，并且通过js，把服务器传过来的数据显⽰在页⾯上
<input class="input-xlarge focused"name="content"type="hidden"id="content1"value="{{$arr->content}}" >
（4）正常的解析
⼆、修改图⽂内容，并提交表单
1、在编辑器重新编辑之后，需要把编辑的内容提交到表单
//这⾥的edit是表单提交的按钮
// 读取 html
var info = html();
}, false);
这部分的意思是，当点击按钮提交表单的时候，JS会获取编辑器中的html代码，并且把这个值赋值给隐藏的input选项框。 然后提交的
时候就通过隐藏的input把新修改的内容提交到表单了。
这⾥写的有点乱。最主要的还是通过 JS来获取编辑器中的内容，以及通过JS的innerHTML解析图⽂信息。还有就是input的隐藏域，
这个东东真的很好⽤。默默的做了很多事情，深藏功与名。
end

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。