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>

转载于:https://www.cnblogs.com/moqiang02/p/4061295.html

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

php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
kindeditor上传图片php,Kindeditor编辑器添加图片上传水印功能（php代码）
KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PH ...
springboot 整合文本编辑器（图片上传）
Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...
mavon-editor编辑器与图片上传
mavon-editor编辑器与图片上传图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器--mavon-editor的图片上传功能. 一.安装与引入 1. 首先在命令行安装 ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
KindEditor实现多图片上传
KindEditor的文件上传插件: KindEditor 4.x 文档 http://kindeditor.net/doc.php 具体实现步骤demo: 1.创建demo.jsp文件,引入kind ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...

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

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

最新文章

热门文章