wangEditor编辑器中解析html图文信息问题(三)
2017-12-21 16:16
411 查看
以上两篇,我们主要记录了wangEditor编辑器的基础使用方法,以及上传图片部分。如果对前两篇有兴趣的,可以参考链接:
http://blog.csdn.net/LJFPHP/article/details/78858596
http://blog.csdn.net/LJFPHP/article/details/78858797
这里主要是记录一下wangEditor编辑器显示存储的html代码问题。
这就很不友好了,本来我们用富文本编辑器也是为了能够带有一定的样式,html标签的换行,显示蹄片都是必须的。结果这里却显示不出来,有点无语。
2、哪里出错了
(1)打开F12,在浏览器上查案元素,看看为什么会出不来
(2)
这里可以发现,我们的html代码都成字符串了,也难怪不解析html代码。
3、解决方案
(1)在JS中,有一种方法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
也就是说,我们可以利用这个属性,把字符串转换为html代码,这样就可以被解析了。
(2)其次,我们是需要在页面加载完成后,直接就能在编辑器上看到图文信息。因此必须要使用js的页面加载函数onload()。OK,分析到这里就很明朗了。
(3)代码:
在页面的底部加上以下代码:
解释:
1)这里的第一步,是从一个隐藏的input框中获取服务器传过来的值,然后相当于做一个转换。
2)下面贴出html的代码。
(4)正常的解析
这部分的意思是,当点击按钮提交表单的时候,JS会获取编辑器中的html代码,并且把这个值赋值给隐藏的input选项框。 然后提交的时候就通过隐藏的input把新修改的内容提交到表单了。
这里写的有点乱。最主要的还是通过 JS来获取编辑器中的内容,以及通过JS的innerHTML解析图文信息。还有就是input的隐藏域,这个东东真的很好用。默默的做了很多事情,深藏功与名。
end
http://blog.csdn.net/LJFPHP/article/details/78858596
http://blog.csdn.net/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赋值给编辑器 do 4000 cument.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
相关文章推荐
- jsoup 解析HTML信息
- C# 解析html中筛选class的问题
- 数据结构图文解析之:二分查找及与其相关的几个问题解析
- 解析编辑器中的html
- PHP使用DOM LoadHTML()解析的中文乱码问题
- SS vector - 利用浏览器HTML注释解析问题执行javascript(一)
- php 发送邮件(HTML)解析乱码问题(多余叹号!等)
- html内textarea嵌套ckeditor编辑器,文本框无法显示值的问题解决
- 用htmlParser把HTML页面信息解析到文本中
- eclipse failed to create the java virtual machine 问题图文解析
- 解决phpQuery(DOMDocument)解析部分HTML会产生乱码的问题
- eclipse failed to create the java virtual machine 问题图文解析(转)
- 浏览器解析js生成的html出现的样式问题
- 编辑器生成的html代码再显示的样式冲突问题
- 有关html文件中enter键换行被解析成空格的问题
- eclipse failed to create the java virtual machine 问题图文解析
- NekoHTML解析HTML为XML后TagName一直为大写的问题解决
- php 发送邮件(HTML)解析乱码问题(多余叹号!等)
- 解决vim编辑器.html.erb文件语法高亮问题
- nutch源代码--html的头信息解析