网页前端设计

一、概述：

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

二、解决方案

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'); //切换到【设计】视图
}

关于queryCommandState、execCommand属性请移步到传送门。

三、总结：

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

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