CK editor 制作 ”小“plugin
ckeditor 是什么? http://ckeditor.com/
这工具里有大量他人写好的功能(plugin),如果要求不高,会找到的。但是我就是没有找到。。。
需求:
·自己制作一个小功能,可以在ckeditor里触发自己写的功能
开始前奏:
下载好ck后,在plugin的folder里给上timestamp folder ...
- plugins
- timestamp
- icons
- timestamp.png
- plugin.js
- icons
- timestamp
plugin.js 代码
CKEDITOR.plugins.add('timestamp', {
//icon 的名字
icons: 'timestamp',
init: function (editor) {
//给个命令
editor.addCommand('insertTimestamp', {
exec: function (editor) {
editor.insertHtml('<img src="http://emetdu.com.my/images/e.jpg"/>');
}
});
//给ui一个button
editor.ui.addButton('Timestamp', {
label: "Timestamp",
command: 'insertTimestamp',
toolbar: 'clipboard,0'
});
}
});
最后:
<script src="../ckeditor.js"></script>
<script>
//注入
CKEDITOR.config.extraPlugins = 'timestamp';
</script>
调用方式:
在js中声明图片的名字,按钮的属性,和命令的功能。以上的是“exec”。
最后在注入plugin的名字,通过config.extraPlugins
问题与感想:
由于这SDK读起来会要很多时间,每个功能都有自己的属性和方法,写代码时,会需要大量的记忆去使用ck写好的功能,在制作时,只是调用罢了。如果厉害点,就像我一样,找到触发点,剩下自己搞,这样就不用依赖他人的工具。
CK editor 制作 ”小“plugin的更多相关文章
- ireport制作小技巧
ireport制作小技巧 首先ireport中大小写问题: 1.parameter中如果小写,引用也小写 2.$F{},一般都大写 3.子报表中引用父报表中查询出来的值时,只需要小写即可,即在子报表的 ...
- No image!使用border-color属性来制作小三角形
border属性在项目中使用的还是蛮频繁的.例如页签.按钮这样的. border简写属性是按照如下属性设置的: border:border-width/border-style/border-colo ...
- CSSborder制作小三角形
#cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置 ...
- 【iOS】正則表達式抓取网页数据制作小词典
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xn4545945/article/details/37684127 应用程序不一定要自己去提供数据. ...
- CSS制作小旗子与小箭头
CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- CSS-用伪元素制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
随机推荐
- jQuery插件placeholder的使用方法
借助该插件可以轻松实现HTML5中placeholder特效: 实例代码如下: <script type="text/javascript" src="<%= ...
- 1.4.2.3. SETUP(Core Data 应用程序实践指南)
初始化Core Data的三个方法: init,初始化托管对象模型.持久化存储协调器.托管对象上下文 - (id)init { ) { NSLog(@"Running %@ '%@'&quo ...
- 解析 png 图片的十六进制字符流
uses pngimage; {从 png 图片到十六进制字符串} function Png2Hex(png: TPngImage): string; var stream: TMemoryStrea ...
- Heka 编译安装后 运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer
Heka 编译安装后 运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer 解决办法: 1. Start heka ...
- spring mvc上传下载文件
前端jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- Web项目或WCF发布IIS后,如何通过VS2010调试
在做项目的时候,例如WCF服务一般都会将WCF服务承载于控制台应用程序,或者WinForm窗体应用程序,因为这样可以直接在服务代码上打断点,然后就可以调试了.但是项目已经发布了,当然这里我用的本机进行 ...
- Quercus
其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...
- jdbc数据连接池dbcp要导入的jar包
jdbc数据连接池dbcp要导入的jar包 只用导入commons-dbcp-x.y.z.jarcommons-pool-a.b.jar
- 使用Flex构建Web和移动参考应用程序
范例文件 Shopping Cart Sales Dashboard Expense Tracker 需要的其他产品 Android 2.2及更高版本或Android 3.0及更高版本的设备 仅仅在F ...
- 最简单的Linux虚拟机磁盘扩容方法
思路:1.虚拟机增加磁盘容量: 2.将增加的磁盘容量增加到系统分区中: 准备阶段: 下载Gparted软件:https://sourceforge.net/projects/gparted/files ...