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> < ... 
随机推荐
- endnote 使用方法
			选择需要的期刊格式,复制到收藏夹. 下载安装插件. 鼠标放在需要插入引用的地方. 关键词搜索文献,记得在这之前要把需要的文献保存至endnote online.然后insert就行了.初次安装可能会有 ... 
- Oracle11G 在线重定义
			create tablespace tbs1 datafile '/opt/oracle/oradata/haier/tbs1.dbf' size 500m autoextend on maxsize ... 
- HTML 表单和输入
			HTML 表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons).复选框(checkboxes)等等 ... 
- 如何在windows xp下实现声音内录
			问题描述: 用屏幕录制软件录制一个视频,能够成功录制视频,但无法录制视频里面的声音. 问题原因: 因为现在的多数声卡,均无法直接通过声卡自身的功能实现内录和立体声混音. 这是由于声卡芯片厂商迫于RIA ... 
- FMS配置小结
			官方连接:http://help.adobe.com/en_US/flashmediaserver/configadmin/WS5b3ccc516d4fbf351e63e3d119f2925e64-8 ... 
- Objective-c runtime方法替换引发的死循环
			在OC中: API: class_addMethod往一个Class里添加method API: class_getInstanceMethod或class_getClassMethod可以判断某个S ... 
- 常用的JQ函数
			/// <reference path="jquery-1.8.0.min.js"> /* * DIV或元素居中 * @return */ jQuery.fn.mCen ... 
- PLSQL DEVELOPER 使用的一些技巧【转】
			1.登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如果你登录的用户是dba,要展开tables目录,正常情况都需 ... 
- 纯CSS3动画:一棵跳舞的树
			<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ... 
- [译] 关于 Git 你需要知道的一些事情
			分支和合并 Git 跟其他版本控制系统最大的优势就在于其高级的分支模型. Git 允许而且 鼓励 你在本地使用多个完全独立的分支.这些分支的创建,合并和删除几乎都可以在几秒内完成. 这意味着你可以轻松 ... 
