关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异步上传图片的效果。下面我们就来聊一聊相关的部署细节:
1、kindeditor编辑器的图片上传有两种途径:本地图片上传和网络图片添加;
2、首先我们页面内需要放置一个文本框用于存放图片路径;
1.
<input
type=
"text"
id=
"url"
value=
""
/>
3、其次我们需要放置一个触发弹出图片上传框的按钮;
1.
<input
type=
"button"
id=
"image"
value=
"选择图片"
/>
4、为了我们能够触发按钮弹出图片上传框,所以我们需要在页面内的head内引入相关的js文件
1.
<script
src=
"../kindeditor.js"
></script>
2.
<script
src=
"../lang/zh_CN.js"
></script>
第一个js文件是kindeditor编辑器核心js文件,必须有;第二个是汉化包,没有也可以,无非是英文界面和菜单不会影响操作。
5、页面初始的时候给按钮绑定click事件
01.
KindEditor.ready(
function
(K)
{
02.
var
editor
= K.editor({
03.
allowFileManager
:
true
04.
});
05.
06.
K(
'#image'
).click(
function
()
{
07.
alert(
"你点我了!"
);
08.
});
09.
});
这样当我们运行页面后,点击“选择图片”的按钮就会弹出“你点我了!"的弹出消息提示,说明按钮事件监听已经ok。
6、接下来我们就是要在按钮触发后如何才能够弹出框呢?我们需要调用kindeditor编辑器的一些相应的方法和给予一些初始化的参数即可:
01.
K(
'#image'
).click(
function
()
{
02.
editor.loadPlugin(
'image'
,
function
()
{
03.
04.
editor.plugin.imageDialog({
05.
imageUrl
: K(
'#url'
).val(),
06.
07.
clickFn
:
function
(url,
title, width, height, border, align) {
08.
K(
'#url'
).val(url);
09.
editor.hideDialog();
10.
}
11.
});
12.
});
13.
});
这里我们将会看到弹窗的窗体内可以进行本体图片和网络图片上传。
如果我们只允许本地图片上传,我们可以在初始化弹窗的是配置一个参数:
1.
editor.loadPlugin(
'image'
,
function
()
{
2.
editor.plugin.imageDialog({
3.
showRemote
:
false
,
为什么这里不配置开启本地图片上传呢?因为默认情况下就是开启的。如果只允许进行网络图片添加,那么可以配置这个参数:
1.
editor.loadPlugin(
'image'
,
function
()
{
2.
editor.plugin.imageDialog({
3.
showLocal
:
false
,
7、如何将kindeditor编辑器和单独的图片上传页面上进行分开但是配置进行同一融合呢?
这个问题其实不难,只要你了解了上面的一些配置,能够保证两者相互独立即可,这里提供一个完整的示例代码:
01.
var
editor;
02.
KindEditor.ready(
function
(K)
{
03.
04.
editor
= K.create(
'textarea[name="content"]'
,
{
05.
resizeType:
1,
06.
fullscreenMode:
0,
07.
designMode:
1,
08.
allowPreviewEmoticons:
false
,
09.
allowImageUpload:
true
,
10.
allowFileManager:
true
11.
});
12.
13.
K(
'#image'
).click(
function
()
{
14.
editor.loadPlugin(
'image'
,
function
()
{
15.
editor.plugin.imageDialog({
16.
imageUrl:
K(
'#url'
).val(),
17.
clickFn:
function
(url,
title, width, height, border, align) {
18.
K(
'#url'
).val(url);
19.
editor.hideDialog();
20.
}
21.
});
22.
});
23.
});
24.
});
页面配置为:
1.
<p>
2.
<input
type=
"text"
id=
"url"
value=
""
/>
3.
<input
type=
"button"
id=
"image"
value=
"选择图片"
/>(网络图片
+ 本地上传)
4.
</p>
5.
<!--编辑器容器-->
6.
<textarea
name=
"content"
style=
"width:
700px; height: 200px; "
></textarea>
分享到:
相关推荐
个人项目,公司项目都使用的是这个编辑器, 个人觉得还不错,使用也很方便简单,功能比较全, 有兴趣的自己可以二次开发,不会使用的也可以扣我,
优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘贴时自动上传网络图片,粘贴时自动上传截图,地图宽度可设置百分比显示...
kindEditor4.1版修改上传图片宽高(图片自适应)
kindEditor编辑器表情图片修改代码 kindEditor编辑器表情图片修改代码
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
1、 解决kindeditor编辑器无法保存 2、 解决kindeditor上传文件框IE11 看不见或者位置不对问题
优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘贴时自动上传网络图片,粘贴时自动上传截图,地图宽度可设置百分比显示...
基于kindeditor编辑器的上传文件类,内有demo.html 实例,配置的时候,请仔细看一下kindeditor/php/upload_json.php 文件,然后结合自己的网站调用。
兼顾新浪编辑器和kindeditor编辑的图片上传整合 测试地址:edit/edit/editor.php 上传类:upload_cgi/upload.php 在线演示地址:http://www.ykisp.com/pliuy/user/editor.php
JSP版的完善KindEditor在线编辑器(带附件上传与图片按日期分类管理功能) 1.集合了日期、时间、在线预览和特殊字符插件,采用3.0皮肤; 2.将图片上传与管理的JSP页面改写成SERVLET,同时去除JSON包; 3.添加图片压缩...
kindeditor极容易在.net里面配置,本方法介绍上传文件盒图片,十分简单,通过测试,假如您觉得好的话,请给五分哦!
kindeditor本地上传图片支持token字段,kindeditor本身图片上传并无token参数,本资源利用原生ajax改造上传代码。
kindeditor 编辑器php 版 支持附件上传功能! kindeditor 编辑器php 版 支持附件上传功能!kindeditor 编辑器php 版 支持附件上传功能!kindeditor 编辑器php 版 支持附件上传功能!kindeditor 编辑器php 版 支持...
声明一下 关于asp中KindEditor编辑器无法获得提交的数据问题,折腾了两天才搞定的,真不容易,kindeditor编辑器很棒,兼容各种浏览器,是web开发者不错的选择。
kindeditor文本编辑器(asp.net中使用) 源代码都在
kindeditor编辑器在asp.net 中使用介绍 编辑器功能强大,实现了文本格式,包含图片,视频以及flash以及动态地图的上传实现。上传部分自己总结的常用方法的封装,有不足和不完美之处,希望大家指出来,愿意一起
kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法。
kindeditor--4.1.12 解决flash批量上传图片按钮不显示与支持video视频
kindeditor分页,kindeditor图片上传完整代码 kindeditor分页,kindeditor图片上传完整代码
phpcms V9 原版fckeditor编辑器 切换为 kindeditor 编辑器。 下载附件,解压后,覆盖即可。