文本编辑器的使用和七牛图片上传

html 代码

<form class="form-horizontal" id="inputForm" role="form" method="POST">

   <label for="imageUrl" class="control-label">xxx：</label> <small class="text-muted">图片要求：完整的 URL 地址，可以上传图片，也可以手动输入 (200px*200px,JPEG/PNG格式，不超过200kb)</small>
   <div class="input-group">
    <div>
    <button id="pickfiles" class="btn btn-primary" type="button" title="xxx"><i class="fa fa-upload"></i></button>
    <img   src="$schoolIntro.imageUrl"  width="200px" height="200px">
    </div>
   
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="url" name="imageUrl" maxlength="250" value="$!{schoolnews.imageUrl}"  width="230px"  placeholder="请输入完整的图片地址"/>


</div>
        





<input id="newsId" name="newsId" type="hidden" value="$!{schoolIntro.id}" />

<div class="form-group">
<label for="content" class="control-label"><b>内容</b> :</label> 
<textarea id="contentEditor" name="school_intro" class="form-control" style="width:100%; height: 200px;" >$!esc.html($schoolIntro.school_intro)</textarea>
<input id="contentText" name="contentText" type="hidden" value="$!esc.html($schoolIntro.contentText)" />
</div>


<div class="form-group form-footer">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary">提交</button>
        <button type="reset" class="btn btn-default">重置</button>
        </div>
  </div>

     </form>

js 代码:  初始化编辑器

<script charset="utf-8" src="#CTX/include/libs/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="#CTX/include/libs/kindeditor/lang/zh_CN.js"></script>
<link rel="stylesheet" href="#CTX/include/libs/kindeditor/themes/default/default.css">
<link rel="stylesheet" href="#CTX/include/libs/kindeditor/themes/simple/simple.css">

<script type="text/javascript">
require(['jquery','alertify','avatar','validate','uichoose','datetimepicker','qiniu','parsley'],function(jq,alertify,avatar) {
window.backToList = function () {
window.location.href = "#bbCTX/leg_manager/schoolintro/edit";
};
#if($!{msgtype}=="succeed")
alertify.success("$!{message}");
#elseif($!{msgtype}=="error")
alertify.error("$!{message}");
#end

// 初始化 KindEditor
var uploadJsonUrl = window.CTX + "/api/fs/image/ke/upload";
var fileManagerJsonUrl = window.CTX + "/api/fs/image/ke/list?uploadType=news";
var editor = KindEditor.create('textarea[name="school_intro"]', {
themeType: 'simple',
resizeType: 1,
items: [
'preview', 'removeformat', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright',
'insertorderedlist', 'insertunorderedlist', '|', 'table', 'image', 'link'
],
uploadJson: uploadJsonUrl,
extraFileUploadParams: {
uploadType: 'news'
},
fileManagerJson: fileManagerJsonUrl,
allowFileManager: true
});


// 校验成功之后，提交表单之前触发
jq(".form-horizontal").parsley().on('form:submit', function () {

var formInstance = this;
formInstance.submitEvent.preventDefault();

editor.sync(); // kindeditor 会自己在onformsubmit里调用此方法，但是以防万一这里再同步一次
jq("#contentText").val(editor.text());
if (editor.count('text') < 1) {
alertify.error("内容简介必须包含文字！");
} else {
// 自定义数据提交
var formData = jq(".form-horizontal").serializeArray();
//alert(formData);
jq.ajax({
url:"#CTX/leg_manager/schoolintro/save",
type: 'POST',
data: formData,
success: function(result) {
alertify.success("保存成功！");
javascript:window.location.reload();
},
error: function() {
alertify.error("保存出错");
}
});
}
return false;
});


// 七牛图片上传
var vUpTokenUrl = window.CTX + '/api/fs/image/uptoken?pathPrefix=schoolIntro/';
jq.get(vUpTokenUrl, function(data){
// 先从服务器获取凭证，然后初始化组件
var _token = data.uptoken;
var _path = data.path;
var _domain = data.domain;
  var _btnId =$(this).attr("id");
  var uploader = Qiniu.uploader({
runtimes: 'html5,html4',
browse_button: "pickfiles",  // 上传选择的点选按钮，**必需**
uptoken: _token,
domain: _domain,
max_file_size: '200kb',
max_retries: 3,
auto_start: true,
multi_selection: false,//单文件
filters : [ {title : "图片上传", extensions : "png,jpeg"} ], //文件过滤
init: {
'FileUploaded': function(up, file, info) {
var domain = up.getOption('domain');
var res = jq.parseJSON(info);
var sourceLink = domain + res.key;
jq("input[name='imageUrl").val(sourceLink);
},
'Error': function(up, err, errTip) {
if(err.message=="File extension error."){//格式不正确
alertify.error("文件格式不正确(格式为：png,jpeg)！");
}
if(err.message=="File size error."){//大小超过
alertify.error("文件大小不能超过200kb！");
}
},
'Key': function(up, file) {
return _path;
}
}
});
}, 'json');

// 预览图片
jq("#previewImg").on("click", function(){
var imageUrl = jq("input[name='imageUrl']").val();
if (imageUrl) {
window.open(imageUrl, "_blank");
}
});
});
</script>