1.首先就是下载KindEditor(这里是官网的地址)
2. 部署编辑器
解压 kindeditor-x.x.x.zip 文件,将所有文件上传到您的网站程序目录里,例如:http://您的域名/editor/
Note
您可以根据需求删除以下目录后上传到服务器。
asp – ASP程序
asp.net – ASP.NET程序
php – PHP程序
jsp – JSP程序
examples – 演示文件
3 修改HTML页面
在需要显示编辑器的位置添加textarea输入框。
<textarea id="describe" name="describe" style="width:100%;"></textarea>
Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。
4在该HTML页面添加以下脚本。
<link rel="stylesheet" href="<%=path%>/js/kindeditor-master/themes/default/default.css" />
<script charset="utf-8" src="<%=path%>/js/kindeditor-master/kindeditor-all-min.js"></script>
<script charset="utf-8" src="<%=path%>/js/kindeditor-master/lang/zh-CN.js"></script>
具体的地址更具地址的路径来
5 初始化
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="describe"]', {
minHeight:'350px',
allowFileManager : true,
uploadJson : '<%=path%>/tIg/uploadOK',
afterUpload: function(){
this.sync();}, //图片上传后,将上传内容同步到textarea中
afterBlur: function(){
this.sync();}, 失去焦点时,将上传内容同步到textarea中
})
});
编辑器的内容是可以自己选择的,根据自己的十几需求来,我就是全部需求,不做修改,这里不多做解释
[
‘source’, ‘|’, ‘undo’, ‘redo’, ‘|’, ‘preview’, ‘print’, ‘template’, ‘code’, ‘cut’, ‘copy’, ‘paste’,
‘plainpaste’, ‘wordpaste’, ‘|’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’,
‘justifyfull’, ‘insertorderedlist’, ‘insertunorderedlist’, ‘indent’, ‘outdent’, ‘subscript’,
‘superscript’, ‘clearhtml’, ‘quickformat’, ‘selectall’, ‘|’, ‘fullscreen’, ‘/’,
‘formatblock’, ‘fontname’, ‘fontsize’, ‘|’, ‘forecolor’, ‘hilitecolor’, ‘bold’,
‘italic’, ‘underline’, ‘strikethrough’, ‘lineheight’, ‘removeformat’, ‘|’, ‘image’, ‘multiimage’,
‘flash’, ‘media’, ‘insertfile’, ‘table’, ‘hr’, ‘emoticons’, ‘baidumap’, ‘pagebreak’,
‘anchor’, ‘link’, ‘unlink’, ‘|’, ‘about’
]
6上传图片
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="describe"]', {
minHeight:'350px',
allowFileManager : true,
uploadJson : '<%=path%>/tIg/uploadOK',
afterUpload: function(){
this.sync();}, //图片上传后,将上传内容同步到textarea中
afterBlur: function(){
this.sync();}, 失去焦点时,将上传内容同步到textarea中
})
});
uploadJson 后面就是你在后台处理的地址
@RequestMapping(value="uploadOK")
public @ResponseBody String uploadOK(@RequestParam("imgFile") CommonsMultipartFile[] files, HttpServletRequest request, Map<String, Object> model, HttpServletResponse response){
JSONObject jb=new JSONObject();
jb.put("error", 0);
//文件保存目录路径
//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
//最大文件大小
long maxSize = 1024 * 1024 *2;
if(!ServletFileUpload.isMultipartContent(request)){
jb.put("error", 1);
jb.put("message", "请选择文件");
return jb.toJSONString();
}
String dirName =request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if(!extMap.containsKey(dirName)){
jb.put("error", 1);
jb.put("message", "目录名不正确");
return jb.toJSONString();
}
try {
if (files!=null&&files.length>0) {
for (CommonsMultipartFile commonsMultipartFile : files) {
Map upload = mySftp.upload(commonsMultipartFile);
jb.put("error", 0);
jb.put("message", "上传成功!");
jb.put("url",返回的一定要是绝对的路径);
return jb.toJSONString();
}
}
} catch (Exception e1) {
jb.put("error", 1);
jb.put("message", e1.getMessage());
return jb.toJSONString();
}
return jb.toJSONString();
}
切记返回的一定会是图片的绝对路劲 不然是编辑器里面是显示不出来的 应为他找不到图片在哪里
使用的是sftp上传 贴出代码
public Map upload(MultipartFile oldFile) {
Map<String, String> map = new HashMap<String, String>();
// 验证是否登陆成功
if (!connectLogin()) {
logger.info("sftp服务器登录失败!");
map.put("info", "sftp服务器登录失败!");
return map;
}
String oldName = oldFile.getOriginalFilename();
String type = oldName.substring(oldName.lastIndexOf(".") + 1);// 获取后缀名
if (oldFile != null) {
if (type != null) {
if (("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase())
|| "JPG".equals(type.toUpperCase()) || "JPEG".equals(type.toUpperCase()))) {
String trueName = System.currentTimeMillis()
+ Math.random() * 10 + "." + type; // 随机数作为名称
File file = new File(trueName);
try {
sftp.cd(ftpConfig.getFtpPath());
InputStream inputStream = oldFile.getInputStream();
sftp.put(inputStream, file.getName());
map.put("path", trueName);
map.put("info", "图片添加成功");
return map;
} catch (Exception e) {
e.printStackTrace();
}
}
} else {
map.put("info", "格式不正确");
return map;
}
} else {
map.put("info", "文件夹为空!!!");
return map;
}
return null;
}
ok 上传就可以了
然后是整个form表单的提交,使用的是FormData
$scope.processForm = function(){
var flag = $("#myForm").valid();
var formData = new FormData($("#myForm" )[0]);
if(flag){
$.ajax({
url: '<%=path%>/tIg/tIg_add?oper=1' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
var info = $.parseJSON(data);
var msg = info.msg;
if(msg == "true"){
var curId = window.parent.document.getElementById("curId").value;
var listWin = window.parent.document.getElementById("iframe"+curId);
var scope = listWin.contentWindow.angular.element('#Job_list').scope();
scope.searchList();
top.layer.alert(info.msgInfo, {icon: 6});
$("#btnmysave").addClass(" disabled");
$("#btnmysave").attr("disabled","disabled");
$scope.myreadonly = true;
$scope.myreadonly = true;
}else{
top.layer.alert(info.msgInfo, {icon: 6});
}
}
});
}
}
后台正常的接受就是了 ,编辑器里面的图片都会换成img 标签存放在数据库,下面就是一个样本
<img src="http://api.map.baidu.com/staticimage?center=121.473704%2C31.230393&zoom=11&width=558&height=360&markers=121.473704%2C31.230393&markerStyles=l%2CA" alt="" /><img src="http://localhost:8080/js/kindeditor-master/plugins/emoticons/images/10.gif" border="0" alt="" /><img src="http://localhost:8080/js/kindeditor-master/plugins/emoticons/images/13.gif" border="0" alt="" />3333333333333333333333333333333
最后就是修改页面的照片显示问题了,有的是可以直接显示但是有的因为页面加载的问题不可以显示出来,请先确实页面是否可以取到值,确认可以但是编辑器拿不到值的话 可以这样是试一下(初始化文本编辑器和之前的一样复制过来就可以了)
$scope.url = "<%=path%>/tIg/tIg_edit?oper=1&id="+$scope.id;
$http.post($scope.url).success(function(data){
var msg = data.msg;
if(msg == "true"){
$scope.tIg = data.record;
$scope.tts = data.tIgts;
// 设置HTML内容
editor.html($scope.tIg.describe);
}else if(msg == "norecord"){
alert(data.msgInfo);
}
});
editor.html($scope.tIg.describe);请求获取到数据之后 手动的设置数据
希望帮到大家!!
今天的文章kindle上传图片_pdf编辑器怎么修改图片上的文字分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/71300.html