kindeditor学习中的那些坑

关键词：

Kindeditor富文本编辑器还算比较好上手的一款插件吧，下面记录一下我在学习和实践中遇到的那些坑。

编辑器初始化方法和参数网上一搜一大把，不想搜的点这里，文档上各个参数已经写得很清楚了，直接拿过来用就OK

开始说一些实际用到时的一些需求。

1、插入链接时增加链接标题的输入框

初始化的Kindeditor插入链接时是这样的

只能输入链接地址，不能输入链接文字，其实Kindeditor默认做法是，如果你在编辑其中没有选中内容，他就默认把链接地址设为链接文本，有选中的内容则自动提取选中内容为链接文本，其实这样做也是挺方便的，可是不是所有的用户都很聪明，根据产品经理的意思，为了获取更好的用户体验，必须要在弹出框中让用户自己填写链接文本，好吧，我改！

然后开始了各种摆渡，终于找到了一遍文章。具体操作方法如下：

修改方法如下：
第一步：修改lang/zh-cn.js，大约114行处增加
‘link.linkTitle‘ : ‘链接标题‘,
第二步：修改plugins/link/link.js，增加红色处内容：
第1处：
html = ‘<div style="padding:20px;">‘ +
//title
 ‘<div class="ke-dialog-row">‘ +
‘<label for="keTitle" style="width:60px;">‘ + lang.linkTitle + ‘</lable>‘ +
 ‘<input class="ke-input-text" type="text" id="keTitle" name="title" value="" style="width:260px;" /></div>‘ +
//url
 第2处：
yesBtn: {
            name: self.lang(‘yes‘),
            click: function (e) {
                var title = K.trim(titleBox.val());
                var url = K.trim(urlBox.val());
                if (url == ‘http://‘ || K.invalidUrl(url)) {
                    alert(self.lang(‘invalidUrl‘));
                    urlBox[0].focus();
                    return;
                }
                self.exec(‘createlink‘, title, url, typeBox.val()).hideDialog().focus();
            }
        }
第3处：
div = dialog.div,
titleBox = K(‘input[name="title"]‘, div),
urlBox = K(‘input[name="url"]‘, div),
第4处：
if (a) {
                self.cmd.range.selectNode(a[0]);
                self.cmd.select();
                titleBox.val(a.attr(‘title‘));
                urlBox.val(a.attr(‘data-ke-src‘));
                typeBox.val(a.attr(‘target‘));
}
第三步：修改kindeditor.js
第1处：
找到 createlink: function (title, url, type) { //其中title参数是另加的
第2处：
var html = ‘<a href="‘ + _escape(url) + ‘" data-ke-src="‘ + _escape(url) + ‘" title="‘ + _escape(title) + ‘"‘;
第3处：
if (range.collapsed) {
                html += ‘>‘ + _escape(title) + ‘</a>‘; // 原先是_escape(url)
                return self.inserthtml(html);
}
第4处：
K(‘a[href="__kindeditor_temp_url__"]‘, doc).each(function () {
                K(this).attr(‘href‘, url).attr(‘data-ke-src‘, url).attr(‘title‘, title); //增加处
                if (type) {
                    K(this).attr(‘target‘, type);
                } else {
                    K(this).removeAttr(‘target‘);
                }
            });
 
到此完成

修改过后是这样的

原文地址

ok，完美，到此修改完成，但是要注意的是如果你页面引用的是压缩后的js文件，那么你就必须重新压缩一下修改过的all.js替换一下就ok了。

2、设置宽度width好像不好使（反正我没弄出好的来）

一开始查文档，文档上写的很清楚

可是，我整半天都没整出来，然后又去翻看文档了，有重大发现

哈哈，自己都想打自己了，看来还是要好好看文档，这家伙藏太深一时没注意，修改了minWidth之后就ok了。

3、应产品经理要求，页面编辑器不要出现滚动条

这个开始想的可以啊，实践之后，心中就有一句妈卖批不知当讲不当讲

想让编辑器横向不出现滚动条可以，so easy，文章中有参数可以设置

把resizeType:0或者1都可以实现，可是竖向滚动条这么弄，文档中没有发现相关设置，又去去网上查资料了，还好，功夫不负有心人，直接看代码吧

通过整理，添加autoHeightMode这个参数，并设置为true，然后在输入文件事件中时刻获取编辑器内文档的高度，并设置到编辑的高度就ok了。

4、限制编辑器内图片的显示大小

由于业务需要，用户上传的图片宽度可能会大过编辑器的宽度，可是想要图片在编辑器中显示的宽度不能超过编辑器的宽度，怎么整？再次研究文档发现cssData这个参数可以设置编辑器内文档页面的样式，哦哦，瞬间有想法了

那我只要只设置编辑器整个文档内图片的最大宽度就ok了

5、无法设置编辑器内默认提示文字

怎么办，怎么办，自己加吧。

最先初始化时不能再afterCreate这个回调函数中设置，必须在  window.onload方法中设置，整理之后的完整代码如下：

  KindEditor.ready(function (K) {
            window.editor = K.create(‘#editor_id‘, {
                width: ‘432px‘,
                minWidth: ‘100‘,
                minHeight: ‘200‘
                , items: [‘fontsize‘, ‘forecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘image‘, ‘link‘, ‘unlink‘]
                , newlineTag: "br"//换行符
                , pasteType: 1//纯文本粘贴
                , resizeType: 0
                , fixToolBar: true
                , fillDescAfterUploadImage: false
                , uploadJson: "UserUploadImg.aspx?uploadimg=yes"
                , allowImageRemote: false
                , afterUpload: function (url) {
                    if (editor.html() == "在此编辑文章内容") {
                        editor.html("");
                    }
                }
                , afterBlur: function () {
                    blurfunction();
                    if (editor.html().length == 0) {
                        window.editor.html("在此编辑文章内容");
                    }
                }
                , afterFocus: function () {
                    if (editor.html() == "在此编辑文章内容") {
                        editor.html("");
                    }
                }
                , autoHeightMode: true //启用编辑区自动高度
                , afterChange: function () {  //输入文字事件
                    var autoheight = K.IE ? this.edit.doc.body.scrollHeight : this.edit.doc.body.offsetHeight;  //判断是否是IE，并获取内容高度。
                    this.edit.setHeight(autoheight);   //设置高度
                    this.loadPlugin(‘autoheight‘); //加载时同步编辑区自动高度
                }
                , cssData: "body img{ max-width:400px}"
            });
        });
        window.onload = function () {
          window.editor.html("在此编辑文章内容");
        }

canvas中的那些坑

年前做了一个合成图片的小工具，需求大体为：用户输入要在一整张大图片显示的文字、图片及它们所在大图的坐标，合成一张大图用来干啥干啥。做法当然是用canvas做的。canvas就不细说了，来说说他的坑吧。坑之一：输入的文... 查看详情

关于并发的那些坑儿

...不到并发，更何况是编程了；但是，只要你有心并且耐心学习下去，你就会发现，并发编程也不是遥不可及的！我在学习并发相关的知识之前，也觉得这些知识好深奥，肯定玩不来的！现在也不这么过来了么，至少面对它不会无... 查看详情

那些年踩过的深度学习坑一维度问题(代码片段)

报错：ValueError:axesdon'tmatcharrayValueError:轴与数组不匹配问题，下面是报错：报错行代码经常为：image=np.transpose(image,(2,0,1))这行代码的作用是调换整图像的shape顺序[width,height,channels]（2，0 查看详情

ionic打包中的那些坑

经过不断的尝试，终于打包好了(Windows)首先是开发环境的搭建，参考的http://www.jianshu.com/p/b9757a5bcb07，就不用多说了。环境搭建好了，就可以创建一个demo进行测试打开终端，创建一个名为myapp的项目执行ionicstartmyapptabs等待创建完... 查看详情

golang中的那些坑之迭代器中的指针使用(代码片段)

今天在编写代码的时候，遇到了一个莫名其妙的错误,debug了半天，发现这是一个非常典型且易犯的错误．记之示例代码：packagemainimport"fmt"typeaastructx,yinttypebbstructmemberaafuncmain()m:=[]*aapool:=[]bbmember:aax:1,y:1,,,member:aax:2,y:2,,, 查看详情

javascript操作dom的那些坑

...它们进行刷新，动态刷新不影响文档的静态内容。PS：IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。Node接口特性/方法类型/返回类型说明nodeNameString节点的 查看详情

工作中的那些坑——语法解析器

工作项目里用到线性回归算法，用于计算账户的分值，表明某账户是否是有风险的账户。其中参数都配好了，代码里直接用逆波兰表达式解析即可。本来事情到这里已经结束，突然来了新的需求：账户算出来的分数较为无序，于... 查看详情

想入行ai，别让那些技术培训坑了你...

...展迅速，各种新名词此起彼伏。身处这样一个热点行业，学习是必须的。不打算成为终身学习者的程序员，失业就在明天。可是，怎么学呢？都已经毕业了，每天要上班，不能像以前读书的时候，整天只是学习，学什么都有老师... 查看详情

surfaceshader中的那些坑-finalcolor覆盖雾化

前天美术同事让我调一个Tree的Shader，起因是因为他在另外一个游戏里看到的树亮部很亮，暗部很暗，反差很大，而一般的shader做不到，而且每棵树也没有对应的高光贴图。于是找到Unity内置的一个Shader，一... 查看详情

unity-touch的那些坑

...记录手指的状态信息，当有一个手指退出屏幕，那么数组中的位置产生一个空缺，当有新手指加入时候，新手指将替代刚刚退出的手指在数组中的位置。记得在手指退出 查看详情

使用jdk的同步容器时，应该避免那些坑？

摘要：在使用JDK中的同步容器时，应该尽量避免哪些坑本文分享自华为云社区《​​【高并发】亿级流量高并发秒杀系统商品“超卖”了，只因使用的JDK同步容器中存在这两个巨大的坑！！（踩坑实录)​​》，作者：冰河。同... 查看详情

项目中的那些事---踩过的数据库坑

今天来说一下我在做项目时踩到的postgresql数据库的坑.......数据库：postgresql工具：Navicat诱因：设置数据库表的主键为自动增长之前做项目时数据库是别人设计的，我只操作数据库表。今天在navicat工具中创建数据表时想让主键(id)... 查看详情

安装vmwaretools的步骤和那些坑

...ols在ubuntu中是及其不稳定的，也就是说，当你点击菜单栏中的installvmwaretools后，在CD中可能看不到相应的.tar.gz的包，当然也是有可能看到的。下面的解决办法也就是在能看到.tar.gz的包的情况下的：可以先把.tar.gz的包拷贝到Desktop... 查看详情

那些年踩过的深度学习坑一维度问题(代码片段)

报错：ValueError:axesdon'tmatcharrayValueError:轴与数组不匹配问题，下面是报错：报错行代码经常为：image=np.transpose(image,(2,0,1))这行代码的作用是调换整图像的shape顺序[width,height,channels]（2，0，1）即... 查看详情

关于苹果内购（iap）的一些问题以及那些坑

...在研究苹果内购功能，所以，在网上找了一些资料，进行学习。但是，内购功能在实现的过程中，有很多坑，笔者算是真的遇到了好多啊，下面也是自己对内购的一些心得与体会吧！我这里说的可能不太详尽，所以，我先把再网... 查看详情

pytorch：train模式与eval模式的那些坑(代码片段)

...orm的数学原理。1.train模式与eval模式  使用过pytorch深度学习 查看详情

androidframework之priv-app，系统特权app权限那些坑(代码片段)

csdn在线学习课程，课程咨询答疑和新课信息：QQ交流群：422901085进行课程讨论android跨进程通信实战视频课程（加群获取优惠）hi,大家好！在做framework开发过程中相信很多朋友会有一些关于系统应用的一些... 查看详情

tensorflow开发者出道计划关于tensorflow入坑那些事儿

...儿📢声明：1）本文有参考网上的大牛和机器学习专家无私奉献的资料，仅供学术交流，非商用。2）博主才疏学浅，文中如有不当之处，请各位指出，共同进步，谢谢。3）此属于第一版... 查看详情