百度UEditor编译器中获取HTML和添加HTML问题
2017-11-04 14:19
323 查看
今天项目中需要获取[b]百度UEditor编译器中的内容存入数据库,然后又需要将数据库中查询出来的html添加到编译器中,在网上找了到了些方法,但是不是很理想,最后自己查官网API才解决;[/b]
1、先说获取[b]百度UEditor编译器中的HTML内容:[/b]
之前看帖子有人说用
editor.getPlainTxt();方法,发现取到的内容,前后的<p></p>标签都没有了,属于单纯的文本文件,后来看了官网说明,才发现这是取文本文件的方法,要想获取直接可以用的html,只有另外两种:
//编辑器html内容:<p>1<strong>2<em>34</em>5</strong>6</p>
var content = editor.getContent(); //返回值:<p>1<strong>2<em>34</em>5</strong>6</p>和
官网链接:http://ueditor.baidu.com/doc/#UE.Editor:getContent()
2、再说下添加HTML内容到百度UEditor编译器中:
先找了个方法:
http://blog.csdn.net/askycat/article/details/61206818
首先非常尊重作者的提点,查阅了百度[b]UEditor的API,execCommand方法确实很强大,[/b]
[b][b]execCommand方法的[/b]官网链接:[/b]
http://ueditor.baidu.com/doc/#UE.Editor:execCommand(String)
[b]作者的这句话:[/b]UE.getEditor('editor').execCommand('insertHtml', '${queryArtid.aContent }');其中“insertHtml”参数是添加 hmtl 的命令,后面的时添加内容;
[b]具体命令API官网上也有说明:[/b]
[b]http://ueditor.baidu.com/doc/#COMMAND.LIST[/b]
接下来说下个人发现的问题:
我按照作者的思路,在jsp中添加了<code>标签
<script id="editor" type="text/plain" style="width: 100%; height: 50%;"></script>
<code id="content" style="display:none;">
${content}
</code>
然后js中这样写:
var editor = new UE.ui.Editor();
editor.render('editor');
var content_old = $('#content').html();
editor.execCommand('insertHtml', content_old);就遇到了像作者一样的延迟赋值问题,主要原因就是因为UEditor没有加载完成,execCommand方法没有执行。
作者采用的办法是添加1秒后的延时操作,但这种方案个人尝试后发现页面会出现闪屏,效果不好。
查阅官网API,发现了ready事件,专门可以针对[b]UEditor加载完成后的处理;[/b]
http://ueditor.baidu.com/doc/#UE.Editor:ready
官网上有两种ready的事件的处理方法:
第一种是ready监听:
editor.addListener( 'ready', function( editor ) {
editor.execCommand( 'focus' ); //编辑器家在完成后,让编辑器拿到焦点
} );第二种类似于jquery的$(document).ready{}一样,也是初始完成之后执行:
这两种的效果是一样的。
最后我的js代码改成:
//百度UEditor
var editor = new UE.ui.Editor();
editor.render('editor');
editor.addListener( 'ready', function(edt) {
var content_old = $('#content').html();
if(content_old!=''){
editor.execCommand('insertHtml', content_old);
}
});注意:上述两种方法,官网上的demo有个错误,就是function(editor)中的editor不是Editor()对象,而下方
editor.execCommand('insertHtml', content_old);
editor应该是Editor()对象,否则会报“无效属性execCommand”的错误!
所以,我这里把function(editor)改为了function(edt),这样就不会出现变量名冲突;
进过实践,完美解决问题
1、先说获取[b]百度UEditor编译器中的HTML内容:[/b]
之前看帖子有人说用
editor.getPlainTxt();方法,发现取到的内容,前后的<p></p>标签都没有了,属于单纯的文本文件,后来看了官网说明,才发现这是取文本文件的方法,要想获取直接可以用的html,只有另外两种:
//编辑器html内容:<p>1<strong>2<em>34</em>5</strong>6</p>
var content = editor.getContent(); //返回值:<p>1<strong>2<em>34</em>5</strong>6</p>和
//编辑器html内容:<p>1<strong>2<em>34</em>5</strong>6</p> var content = editor.getAllHtml(); //返回值:<p>1<strong>2<em>34</em>5</strong>6</p>这两种只是前一种会剔除前后空格,包括</br>这种,推荐用第一种,减少数据库的存储空间。
官网链接:http://ueditor.baidu.com/doc/#UE.Editor:getContent()
2、再说下添加HTML内容到百度UEditor编译器中:
先找了个方法:
http://blog.csdn.net/askycat/article/details/61206818
首先非常尊重作者的提点,查阅了百度[b]UEditor的API,execCommand方法确实很强大,[/b]
[b][b]execCommand方法的[/b]官网链接:[/b]
http://ueditor.baidu.com/doc/#UE.Editor:execCommand(String)
[b]作者的这句话:[/b]UE.getEditor('editor').execCommand('insertHtml', '${queryArtid.aContent }');其中“insertHtml”参数是添加 hmtl 的命令,后面的时添加内容;
[b]具体命令API官网上也有说明:[/b]
[b]http://ueditor.baidu.com/doc/#COMMAND.LIST[/b]
接下来说下个人发现的问题:
我按照作者的思路,在jsp中添加了<code>标签
<script id="editor" type="text/plain" style="width: 100%; height: 50%;"></script>
<code id="content" style="display:none;">
${content}
</code>
然后js中这样写:
var editor = new UE.ui.Editor();
editor.render('editor');
var content_old = $('#content').html();
editor.execCommand('insertHtml', content_old);就遇到了像作者一样的延迟赋值问题,主要原因就是因为UEditor没有加载完成,execCommand方法没有执行。
作者采用的办法是添加1秒后的延时操作,但这种方案个人尝试后发现页面会出现闪屏,效果不好。
查阅官网API,发现了ready事件,专门可以针对[b]UEditor加载完成后的处理;[/b]
http://ueditor.baidu.com/doc/#UE.Editor:ready
官网上有两种ready的事件的处理方法:
第一种是ready监听:
editor.addListener( 'ready', function( editor ) {
editor.execCommand( 'focus' ); //编辑器家在完成后,让编辑器拿到焦点
} );第二种类似于jquery的$(document).ready{}一样,也是初始完成之后执行:
editor.ready( function( editor ) { editor.setContent('初始化完毕'); } );
这两种的效果是一样的。
最后我的js代码改成:
//百度UEditor
var editor = new UE.ui.Editor();
editor.render('editor');
editor.addListener( 'ready', function(edt) {
var content_old = $('#content').html();
if(content_old!=''){
editor.execCommand('insertHtml', content_old);
}
});注意:上述两种方法,官网上的demo有个错误,就是function(editor)中的editor不是Editor()对象,而下方
editor.execCommand('insertHtml', content_old);
editor应该是Editor()对象,否则会报“无效属性execCommand”的错误!
所以,我这里把function(editor)改为了function(edt),这样就不会出现变量名冲突;
进过实践,完美解决问题
相关文章推荐
- 百度UEditor编译器中添加HTML最快捷的办法
- 在asp.net mvc中使用百度UEditor初始化内容遇到自数据库中读取的html字符串在UEditor中始终是html编码的问题
- 使用百度富文本编辑器UEditor碰到的问题
- 百度UEditor添加视频 增加支持“通用代码”功能,支持微信
- 通过html()的方法获取文本内容, form表单组件显示的值与获取到的值不一致的问题
- 百度编辑器 多图片批量上传 顺序混乱问题 ueditor
- opera浏览器添加百度搜索乱码问题
- JS对HTML标签select的获取、添加、删除操作
- html dom节点操作(获取/修改/添加或删除)
- 一个发邮件的类,带验证功能,可以发html内容,可以添加附件,并解决附件乱码问题。
- JS document 获取 html对象的问题
- HTML表单上传文件时遇到PHP无法获取文件的问题
- 记录一下使用百度Ueditor副编辑器的过程及碰到的问题
- html添加keyword,description帮助百度收录处理方法,jsp去除空白行方法
- mybatis 添加事物后 无法获取自增主键的问题
- ASP.NET百度Ueditor编辑器实现上传图片添加水印效果
- WEB基础之innerHTML添加标签后class触发js的问题
- 水滴石穿之getElementsByName()、IFRAME背景开关、HTML控件获取焦点问题
- python获取html编码GB2312中文乱码的问题
- 百度 地图 slidingmenu 黑边 使用截图的方式解决黑边问题,步骤: 1.slidingMenu打开的时候调用BaiduMap的snapshot方法截图获取Bitmap对象; 2.使用