不知道这是BUG还是UE本身的产品设计,但是真的很容易让人造成困扰,所以还是决定改一下,说是改其实也等于取巧在JS中做了一下处理,方便,又不涉及源码。
修改分为两部分:
1)把当前的编辑器form表单提交修改为Javascript方式提交。
<form action="index.php" method="POST" name="myForm">
form表单加入name元素。
<button class="btn2">提交</button>
submit提交改为button方式。
<script type="text/javascript">
function submitForm(){
document.myForm.action = document.myForm.action;
document.myForm.submit();
}
$(".btn2").click(function(){
submitForm();
})
</script>
加入js表单提交事件。
2)通过UEditor API中的editor.execCommand( 'source')方法事件,在源代码状态提交时切换为编辑模式。
<script type="text/javascript">
var ue = UE.getEditor('editor',{
toolbars: [["undo","redo","|","bold","italic","underline","strikethrough","|","fontsize","forecolor","backcolor","|","removeformat","|","selectall","cleardoc","source","|","unlink","link","|","insertimage"]],wordCount:false
});
function submitForm(){
document.myForm.action = document.myForm.action;
document.myForm.submit();
}
$(".btn2").click(function(){
ue.execCommand('source');
submitForm();
})
</script>
var ue = UE.getEditor为UE实例化对象,在btn2点击事件中加入execCommand('source')方法,此方法在submitForm前执行,提交后成功保存所编辑内容。
此次修改不涉及服务端代码,服务端代码可保持原样,依旧post接收表单信息内容。
在使用UEditor API时如出现下面JS加载错误信息:
Uncaught typeerror cannot read property 'xxx' of undefined。
解决方式如下:
1)ueditor.config.js和ueditor.all.min.js加载顺序所致,加载循序要查看当前版本文档。
2)多次实例化或者未定义editor对象,UE.getEditor和new UE.ui.Editor()使用一个即可