ckeditor 是什么? http://ckeditor.com/

这工具里有大量他人写好的功能(plugin),如果要求不高,会找到的。但是我就是没有找到。。。

需求:

·自己制作一个小功能,可以在ckeditor里触发自己写的功能

开始前奏:

下载好ck后,在plugin的folder里给上timestamp folder ...

  • plugins

    •   timestamp

      •   icons

        •   timestamp.png
      •   plugin.js

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的更多相关文章

  1. ireport制作小技巧

    ireport制作小技巧 首先ireport中大小写问题: 1.parameter中如果小写,引用也小写 2.$F{},一般都大写 3.子报表中引用父报表中查询出来的值时,只需要小写即可,即在子报表的 ...

  2. No image!使用border-color属性来制作小三角形

    border属性在项目中使用的还是蛮频繁的.例如页签.按钮这样的. border简写属性是按照如下属性设置的: border:border-width/border-style/border-colo ...

  3. CSSborder制作小三角形

    #cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置 ...

  4. 【iOS】正則表達式抓取网页数据制作小词典

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xn4545945/article/details/37684127 应用程序不一定要自己去提供数据. ...

  5. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  6. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  7. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  8. CSS-用伪元素制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  9. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

随机推荐

  1. java系列--MD5加密

    方案一: /** * 1.对文本进行32位小写MD5加密 * @param plainText 要进行加密的文本 * @return 加密后的内容 */ public static String te ...

  2. Win10系统安装Tomcat8

    1.JDK 1.8 安装 1.1.在网站上http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...

  3. arcgis 瓦片图加载规则(转载)

    arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...

  4. pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

  5. 勘误《iOS网络高级编程:iPhone和iPad的企业应用开发》

    VII页 , 倒数第二行, “其他” 应为 “其它” X页, 源代码有错误,说是有19章,实际一共13章 XI页,勘误表的链接也是错误的  .是该书的<Beginning ASP.NET 4.5 ...

  6. C# 常用工具合集

    Visual Studio 2013 扩展 Visual Studio 2013 Update 4:是目前微软发布的最新版开发工具升级包,高效而且强大.下面的扩展都是该版本的Visual Studio ...

  7. SQL2008实现数据库自动定时备份——维护计划

    在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库.而备份数据库一般又是在凌晨时间基本没有数据库操作的时候进行,所以我们不可能要求管理员 每天守到晚上1点去备份数据库.要实现数据库的 ...

  8. SPI在linux3.14.78 FS_S5PC100(Cortex A8)和S3C2440上驱动移植(deep dive)

    由于工作的原因,对SPI的理解最为深刻,也和SPI最有感情了,之前工作都是基于OSEK操作系统上进行实现,也在US/OS3上实现过SPI驱动的实现和测试,但是都是基于基本的寄存器操作,没有一个系统软件 ...

  9. 字体图标 轻量级 Font Awesome

    今天呢,来推荐一款请轻量级 字体图标框架.Font Awesome 用法与bootstrap相似 打开网址.download下载,然后打开取到这两个,下载点这里,这个博客弄的挺好的. 找到exampl ...

  10. TypeScript教程3

    1.快速回顾一下这JavaScript中的命名函数和匿名函数: 纯文本查看 复制代码 1 2 3 4 5 //Named functionfunction add(x, y) {     return ...