CK editor 制作 ”小“plugin

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写好的功能,在制作时,只是调用罢了。如果厉害点,就像我一样,找到触发点,剩下自己搞,这样就不用依赖他人的工具。

时间: 2024-08-01 22:43:27

CK editor 制作 ”小“plugin的相关文章

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

border属性在项目中使用的还是蛮频繁的.例如页签.按钮这样的. border简写属性是按照如下属性设置的: border:border-width/border-style/border-color. 如果说我需要一个灰色的1像素的实线边框 <!DOCTYPE html> <html> <head> <meta charset=utf-8"/> <title></title> <style type="t

【iOS】正则表达式抓取网页数据制作小词典

应用程序不一定要自己去提供数据,有现成的数据学会去用才好. 网络很大,各种搜索引擎每天到处爬.本文通过正则表达式抓取网站的数据来做一个小词典. 一.正则表达式的使用 1. 确定匹配方案,即pattern 2. 用pattern实例化NSRegularExpression 3. 用匹配方法开始匹配. 匹配一次:可以使用firstMatch方法 匹配多次:可以用matchs方法 正则表达式对照表:(在网上找到了一个很不错的表,正则表达式各个语言通用) http://www.jb51.net/shou

css制作小三角

视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top{ width : 0; height : 0; font-size : 0; line-height : 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-bottom: 5px soli

10.7 制作小视图模式

下面在中模式的基础上,制作小视图模式的效果,效果如图1所示.小视图模式的日历实例文件位于网页学习网CSS教程资源中的“第1O章\03\calendar-small.htm”. 图1 小视图模式下显示日历 为了便于读者理解在中模式的基础上修了哪些CSS设置,这里将完全保持现有的CSS和HTML不变,然后增加若干条CSS样式,实现小模式的效果.HTML部分仅在caption部分的3种模式切换的链接做了修改,与日历本身的所有代码不做任何修改. 一.整体设置 ① 首先将整个表格的宽度设置为245像素,将

CSSborder制作小三角形

#cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. – 调整宽度大小可以调节三角形形状. 2.矩形   设置盒子的宽高度, 及上下左右边框 div {     height:20px;     width:20px;     border-color:#FF9600 #3366ff #12a

企业商家制作小程序意义在哪里?

众所周知,微信小程序自发布至今已有两年的时间,在这两年中微信小程序应用领域逐渐扩大,只增不减.众多公司也在推出自己的小程序,小程序数不胜数,那么,制作小程序真的那么有用吗?为什么要制作小程序呢? 首先,我们要了解什么是微信小程序呢.微信应用号,又称微信小程序,小程序是一种不需要下载安装即可使用的应用,它实现了应用"×××"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸

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

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

Linux学习笔记&lt;二十一&gt;——busybox制作小系统

制作流程: kernel->initrd(busybox)->rootfs(busybox) kernel:直接利用/boot/vmlinuz-`uname -r`内核镜像或手动编译生成 initrd:编译busybox,在busybox的基础上建立initrd rootfs:同样在busybox的基础上建立rootfs 一.为小系统上的新硬盘建立分区并挂载在宿主机的相应目录,以便创建修改文件. /dev/hda1    100M    boot分区    挂载在/mnt/boot /dev/

用CSS制作小三角提示符号

今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 1 <div class="wrap"> 2 <div class="up-arr1"></div> 3 <div class="up-arr2"></div> 4 </div> css 结构如下: .wrap { position: relative; } .up-arr1 { po