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 //启用编辑区自动高度, cssData: "body img{ max-width:400px}"});});window.onload = function () {window.editor.html("在此编辑文章内容");}

 6、编辑器获取焦点或者添加图片,粘贴时总是返回顶部

其实发生这个错误是应为 newlineTag: "br" 这个参数,不知道什么原因插件没有处理好,好吧自己改吧

 1  pos: function () {
 2             var self = this, node = self[0], x = 0, y = 0;
 3             if (node) {
 4                 if (node.getBoundingClientRect) {
 5                     var box = node.getBoundingClientRect(),
 6                         pos = _getScrollPos(self.doc);
 7                     x = box.left + pos.x;
 8                     //y = box.top + pos.y;
 9                     y = (parseInt(box.top) < 0 ? 0 : box.top) + pos.y;
10                 } else {
11                     while (node) {
12                         x += node.offsetLeft;
13                         y += node.offsetTop;
14                         node = node.offsetParent;
15                     }
16                 }
17             }
18             return { x: _round(x), y: _round(y) };
19         }

在all.js文件中找到并替换就ok了。

转载于:https://www.cnblogs.com/zhhwDavidblog/p/7560637.html

Kindeditor学习中的那些坑相关推荐

  1. 对Python参数类型详解以及学习中遇到的坑

    由于之前遇到过几次有关于参数类型的坑,以及经常容易把一些参数类型搞混淆,现在做一下有关参数类型的总结记录以及对之前踩坑经历的分析. 参数类型 首先我们列举一下有关于Python的参数类型,以及实际上的 ...

  2. #0 scrapy爬虫学习中遇到的坑记录

    python 基础学习中对于scrapy的使用遇到了一些问题. 首先进行的是对Amazon.cn的检索结果页进行爬取,很顺利,无碍. 下一个目标是对baidu的搜索结果进行爬取 1,反爬虫 1.1 我 ...

  3. spring cloud整合mybatis学习中遇到的坑

    1.使用通用mapper时 实体类的mapper接口(即普通的dao接口)继承了通用mapper接口后, 在依赖注入实体类的mapper接口时候,使用@Autowired注解报错 替换成@Resour ...

  4. 【学习react中遇到的坑:内存泄漏报错】

    学习react中遇到的坑:内存泄漏报错 对就是这个错误 Can't perform a React state update on an unmounted component. This is a ...

  5. AI部署:聊一聊深度学习中的模型权重

    点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 作者丨Oldpan 来源丨Oldpan博客 编辑丨极市平台 导读 本文简要介绍了模型权重的统计方法,以 ...

  6. 公众号python训练营真的假的_python中的这些坑,早看早避免。

    python中的这些坑,早看早避免. 说一说python中遇到的坑,躲坑看这一篇就够了 传递参数时候不要使用列表 def foo(num,age=[]): age.append(num) print( ...

  7. 详解深度学习中的Normalization,不只是BN(1)

    " 深度神经网络模型训练之难众所周知,其中一个重要的现象就是 Internal Covariate Shift. Batch Normalization 大法自 2015 年由Google ...

  8. 深度学习中的Normalization模型(附实例公式)

    来源:运筹OR帷幄 本文约14000字,建议阅读20分钟. 本文以非常宏大和透彻的视角分析了深度学习中的多种Normalization模型,从一个新的数学视角分析了BN算法为什么有效. [ 导读 ]不 ...

  9. 深度学习 训练吃显卡_在深度学习中喂饱GPU

    原标题:在深度学习中喂饱GPU 新智元推荐 来源:知乎专栏 作者:风车车 [新智元导读]深度学习模型训练是不是大力出奇迹,显卡越多越好?非也,没有512张显卡,也可以通过一些小技巧优化模型训练.本文作 ...

最新文章

  1. 收藏 | 深度学习在计算机视觉领域的应用总结
  2. C#未来新特性:静态委托和函数指针
  3. jQuery与CSS3的选择器
  4. 获取iOS任意线程调用堆栈(四)符号化实战
  5. Sencha Architect 2 的使用
  6. 深度学习《EBGAN》
  7. Intel® Nehalem/Westmere架构/微架构/流水线 (8) - 重复字符串指令增强
  8. flutter 刷脸_支付宝刷脸认证 - osc_bkdv2it5的个人空间 - OSCHINA - 中文开源技术交流社区...
  9. php 查询 判断 语句,关于php的判断语句
  10. Matplotlib常用绘图示例
  11. 云存储20181101-16讲
  12. Nmap命令:-sP和-sN的区别
  13. matlab画图数据分析,Matlab绘图教程(大量经典实例)解析.ppt
  14. 图像处理的空间频率(波数)、角波数与空间波长
  15. 旷视科技完成4.6亿美元C轮融资,再破AI融资记录 | 聚焦
  16. png转bmp,png批量转成bmp
  17. 执念斩长河专栏总目录
  18. idea html设置字体大小,intellij idea设置(字体大小、背景)
  19. Charles抓包遇到Not allowed POST https://xxxxxxxxxxx/xxxxxxxxxx connection dropped
  20. pdf转图片的两种方式(java)

热门文章

  1. 提高PHP运行速度的小技巧
  2. 下载备忘:甘特图实现的代码
  3. Framework 4.0 新关键字dynamic 之我见(二)
  4. 区块链简史:解读这场技术革命的前世今生
  5. 导入语句 python_Python导入语句说明
  6. 低版本jdbc连接高版本oracle,转:oracle11g的JDBC连接 URL和之前的版本有一定的区别...
  7. 复杂SELECT语句执行过程
  8. Java新手会遇到的三大误区,一定要避免!
  9. java字符串统计英文字符用什么不同_JAVA程序。输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。...
  10. SignalR网页实时推送