(1)关于ueditor运用的实践
1.首先进入ueditor文件夹中找到ueditor.config.js. 更改 服务器统一请求接口路径为:
serverUrl: URL + “php/controller.php”。
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
/**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL + "php/controller.php"
2.在使用ueditor的html页面中引入js
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
3.form表单中添加ueditor的字段为:
<label>
<textarea name="editorValue" id="editorValue">{$change.editorValue}</textarea>//form表单中的字段。
</label>
4.最后不要忘记在js中使用工厂方法getEditor创建和引用编辑器。’editorValue’为表单中的name.
UE.getEditor('editorValue',{initialFrameWidth:820,initialFrameHeight:400,});
5,完整的form表单为:
<form class="form form-horizontal" name="myform" method="post">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="{$change.title}" placeholder="" id="articletitle" name="title">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>简略标题:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="{$change.ltitle}" placeholder="" id="articletitle2" name="ltitle">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章类型</label>
<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
<select name="status" class="select">
<option value="0">原创</option>
<option value="1">转载</option>
</select>
</span> </div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">排序值:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="{$change.paixuzhi}" placeholder="" id="articlesort" name="paixuzhi">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>关键词:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="{$change.keywords}" placeholder="" id="keywords" name="keywords">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章摘要:</label>
<div class="formControls col-xs-8 col-sm-9">
<textarea name="abstract" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空!" >{$change.abstract}</textarea>
<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章作者:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="{$change.author}" placeholder="" id="author" name="author">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">文章来源:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="{$change.sources}" placeholder="" id="sources" name="sources">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章内容:</label>
<div class="formControls col-xs-8 col-sm-9">
<label>
<textarea name="editorValue" id="editorValue">{$change.editorValue}</textarea>//form表单中的字段。
</label>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
<button onClick="return check();" class="btn btn-primary radius" type="button" > 保存并提交审核</button>
<button onClick="return back();" type="button" class="btn btn-primary radius" > 返回</button>
</div>
</div>
</form>
本表单采用ajax异步传输,所以如何获取ueditor编辑器的内容成为一个关键。所以采用UE内置的方法getContent()取得编辑器中的内容。注意:UE.getEditor(‘editorValue’)括号中的名称为你form表单中的name.
var editorValue=UE.getEditor('editorValue').getContent();
6,完整js
<script type="text/javascript">
function back(){
dialog.confirm('确定要返回吗?',"{:url('classily/lst')}");
}
function check(){
if (myform.title.value=="") {
dialog.error('请输入标题');
myform.title.focus();
return false;
}
if (myform.ltitle.value=="") {
dialog.error('请输入简略标题');
myform.ltitle.focus();return false;
}if (myform.keywords.value=="") {
dialog.error('请输入关键词');
myform.keywords.focus();return false;
}
if (myform.abstract.value=="") {
dialog.error('请输入摘要');
myform.abstract.focus();return false;
}
if (myform.author.value=="") {
dialog.error('请输入作者');
myform.author.focus();return false;
}
var editorValue=UE.getEditor('editorValue').getContent();
if (editorValue=="") {
dialog.error('请输入内容');
myform.author.focus();return false;
}
var title = $('input[name="title"]').val();
var ltitle = $('input[name="ltitle"]').val();
var keywords = $('input[name="keywords"]').val();
var abstract = $('input[name="abstract"]').val();
var author = $('input[name="author"]').val();
var url = "{:url('artical/save')}";
var data = {'title':title,'ltitle':ltitle,'keywords':keywords,'abstract':abstract,'author':author,'editorValue':editorValue};
// 执行异步请求 $.post
/*$.ajax(
{
url: "{:url('artical/save')}",
data:data,
type: 'post',
dataType: 'json',
success: function (result) {
//alert(result);
if (result.status == 0) {
alert(result);
return dialog.error(result.message);
//return dialog.error(result.message);
}
if (result.status == 1) {
return dialog.success(result.message, "{:url('artical/_list')}");
}
},
error: function () {
alert('异常!!!')
}
});*/
$.post(url,data,function(result){
if(result.status == 0) {
return dialog.error(result.message);
}
if(result.status == 1) {
return dialog.success(result.message, "{:url('artical/_list')}");
}
},'JSON');
}
UE.getEditor('editorValue',{initialFrameWidth:820,initialFrameHeight:400,});
</script>
7.