kindeditor编辑器和图片上传独立分开的配置细节

关于kindeditor编辑器上传按钮的异步加载最关键的部署问题，它的上传图片的组件都已经封装得很好了的，只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异步上传图片的效果。下面我们就来聊一聊相关的部署细节：

1、kindeditor编辑器的图片上传有两种途径：本地图片上传和网络图片添加；

2、首先我们页面内需要放置一个文本框用于存放图片路径；

view
sourceprint?

1.

<input
type=

"text"

id=

"url"

value=

""

/>

3、其次我们需要放置一个触发弹出图片上传框的按钮；

view
sourceprint?

1.

<input
type=

"button"

id=

"image"

value=

"选择图片"

/>

4、为了我们能够触发按钮弹出图片上传框，所以我们需要在页面内的head内引入相关的js文件

view
sourceprint?

1.

<script
src=

"../kindeditor.js"

></script>

2.

<script
src=

"../lang/zh_CN.js"

></script>

第一个js文件是kindeditor编辑器核心js文件，必须有；第二个是汉化包，没有也可以，无非是英文界面和菜单不会影响操作。

5、页面初始的时候给按钮绑定click事件

view
sourceprint?

01.

KindEditor.ready(

function

(K)
{

02.

var

editor
= K.editor({

03.

allowFileManager
:

true

//允许图片管理
开启后再挑选图片的时候可以直接从图片空间内挑选

04.

});

05.

//给按钮添加click事件

06.

K(

'#image'

).click(

function

()
{

07.

alert(

"你点我了!"

);

08.

});

09.

});

这样当我们运行页面后，点击“选择图片”的按钮就会弹出“你点我了!"的弹出消息提示，说明按钮事件监听已经ok。

6、接下来我们就是要在按钮触发后如何才能够弹出框呢？我们需要调用kindeditor编辑器的一些相应的方法和给予一些初始化的参数即可：

view
sourceprint?

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.

});

这里我们将会看到弹窗的窗体内可以进行本体图片和网络图片上传。

如果我们只允许本地图片上传，我们可以在初始化弹窗的是配置一个参数：

view
sourceprint?

1.

editor.loadPlugin(

'image'

,

function

()
{

2.

editor.plugin.imageDialog({

3.

showRemote
:

false

,

//网络图片不开启

为什么这里不配置开启本地图片上传呢？因为默认情况下就是开启的。如果只允许进行网络图片添加，那么可以配置这个参数：

view
sourceprint?

1.

editor.loadPlugin(

'image'

,

function

()
{

2.

editor.plugin.imageDialog({

3.

showLocal
:

false

,

//不开启本地图片上传

7、如何将kindeditor编辑器和单独的图片上传页面上进行分开但是配置进行同一融合呢？

这个问题其实不难，只要你了解了上面的一些配置，能够保证两者相互独立即可，这里提供一个完整的示例代码：

view
sourceprint?

01.

var

editor;

02.

KindEditor.ready(

function

(K)
{

03.

//这里是kindeditor编辑器的基本初始化配置

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.

});

页面配置为：

view
sourceprint?

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>