网页前端设计

http://www.86y.org

搜索文章

UEditor百度编辑器在html源代码 状态下 无法获取修改后的内容【解决方案】

用声音读出全文关注我吧
 2016/11/23 14:57:50 阅读次数:16349

一、概述:

今天在测试UEditor 编辑器 【HTML代码】模式下修改时又发现了一个问题了,源代码状态下后台无法获取修改后的内容,用它本身的js方法可以获取ue.getContent(),后台获取需要修改成设计视图才能获取。不知道大家有没有碰到过这种问题。不知道是BUG还是UE本身的产品设计,但是对用户体验来说也是很不好的,本方法只是取巧写了一个js方法,使用起来还算方便,不需要修改源代码。

UEditor百度编辑器在html源代码 状态下 无法获取修改后的内容【解决方案】

二、解决方案

1、在.net控件使用代码如下:(其它语言只需要在提交前执行方法即可getContent())

<div><textarea id="myEditor" name="myEditor" runat="server" style="height:240px;width:100%;">这里我可以写一些输入提示1</textarea></div>
<div><asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" OnClientClick="getContent()">LinkButton</asp:LinkButton></div>

2、在提交按钮中添加如下方法:getContent()源代码如下:

//实例化编辑器
UE.getEditor('myEditor', {
    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    //autoHeightEnabled: false,
    toolbars: [['fullscreen', 'source', '|', 'paragraph', 'fontfamily', 'fontsize', 'bold', 'italic', 'forecolor', 'underline', 'strikethrough', '|', 'undo', 'redo', '|', 'insertorderedlist', 'insertunorderedlist', '|', 'indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'pagebreak', 'inserttable', 'link', 'unlink', 'removeformat']],
    //关闭字数统计
    wordCount: false,
    //关闭elementPath
    elementPathEnabled: false
})

//必须在提交前很渲染编辑器;
function getContent() {
    if(UE.getEditor("myEditor").queryCommandState('source')!=0)//判断编辑模式状态:0表示【源代码】HTML视图;1是【设计】视图,即可见即所得;-1表示不可用
        UE.getEditor("myEditor").execCommand('source'); //切换到【设计】视图
}

关于queryCommandStateexecCommand属性请移步到传送门

三、总结:

经过本人实践,此方法可以解决以上问题。关于这个问题我已经发了Email给百度编辑器,反馈了这个问题。希望不需要我们多做这些无谓的操作。但是如果碰到了也只能这么处理。如果有其它更好的办法,可以告诉我。我会更新在此篇文章中,大家可以一起学习。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=814【UEditor百度编辑器在html源代码 状态下 无法获取修改后的内容【解决方案】】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭