原文地址:CKEditor与CKFinder学习--自定义界面及按钮事件捕获  讨厌CSDN的广告,吃香太难看!

效果图

界面操作图

原始界面

调整后的界面(删除了flush,表单元素等)

该界面的皮肤是bootstrap的皮肤

事件操作图

获取界面上保存按钮点击事件效果

用js操作ckeditor控制的textarea

自定义界面

ckeditor默认使用moono皮肤
如果想更改ckeditor的皮肤,去ckeditor的网站下载相应的皮肤。

皮肤更换

去ckeditor的关网选一个你喜欢的皮肤,然后下载下来。
http://ckeditor.com/addons/skins/all

以bootstrap为例,点击Download进行下载



根据提示信息,将下载的文件进行解压,并放在项目中ckeditor目录的skins目录下


然后配置config.js,使其引用bootstrap的皮肤

config.js

/**
* @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/ CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.skin = 'bootstrapck';
};

如果想使用其他的皮肤,跟上面的操作一样,只需把

config.skin = 'bootstrapck';

换成下载的那个即可

界面选择

ckeditor的samples目录下提供了一个示例,点击TOOLBAR CONFIGURATOR就可以自定义界面了

进入界面选择和排序页面

定制好自己的界面后,点击右侧的Get toolbar config

得到自定义界面的js


将其拷贝到config.js中,注意保存自己之前的配置(皮肤,高度等)

隐藏按钮

ckeditor与ckfinder整合之后再进行图文混排的时候选择图片时可以浏览服务器上的图片资源


用户可以删除,重命名,这也会影响到其他页面对该图片的引用,不安全。
可以将浏览服务器按钮隐藏了。

在选择图片的时候有两处有浏览服务器的按钮


所以需要修改两处

打开ckeditor/plugins/image/dialogs/下的image.js


查找browseServer,找到第一次出现的位置

label:d.lang.common.browseServer,hidden:!0,

修改其为

label:d.lang.common.browseServer,style:"display:none",hidden:!0,


第一个浏览服务器按钮就被隐藏了

再搜索image.js,搜索filebrowser

url:d.config.filebrowserImageBrowseLinkUrl},style:"float:right",hidden:!0,

将其改为

url:d.config.filebrowserImageBrowseLinkUrl},style:"float:right;display:none",hidden:!0,

这样两个浏览服务器的按钮就被隐藏了,用户只能每次上传图片来进行图文混排。

参考文献

http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/

界面元素操作

ckeditor为界面提供了许多按钮,有源代码,保存,新建,打印等等。
有时候我们需要自己操作这些按钮的事件。ckeditor也为我们提供了相应的api
api网址
http://docs.cksource.com/ckeditor_api/index.html

获取元素

以保存按钮为例

/**
* index.jsp的js
*/ // When the CKEDITOR instance is created, fully initialized and ready for interaction.
// 当id为content的那个ckeditor被创建,并初始化完成之后
CKEDITOR.instances["content"].on("instanceReady", function() {
// 保存按钮
this.addCommand("save", {
modes : {
wysiwyg : 1,
source : 1
},
exec : function(editor) {
save();
}
});
});
}); // 保存方法
function save() {
// 获取到editor中的内容
var content = editor.document.getBody().getHtml();
alert(content);
}

打印按钮的事件

    this.addCommand("print", {
modes : {
wysiwyg : 1,
source : 1
},
exec : function(editor) {
alert("print button");
}
});

操作事件

除了可以获取按钮的事件外,还能获取整个editor的点击,失去焦点等事件。

案例

用户进入编辑页面,ckeditor显示提示信息,当用户点击进行输入的时候提示信息消失,如果用户什么也没有输入,失去焦点时提示信息重新出现,如果用户输入了,不出现提示信息。

效果

代码

// 失去焦点
this.on('blur', addTips);
// 获得焦点
this.on('focus', deleteTips);
/*
* 点击时清除提示信息
*/
function deleteTips() {
console.log("focus");
var tips = editor.document.getBody().getText().trim();
//console.log("tips: " + tips);
var mytip = "如果想让图片居中,请先选择居中,然后再插入图片!".trim();
//console.log("mytip: " + mytip);
//console.log(tips == mytip);
if (tips == mytip) {
CKEDITOR.instances['content'].setData('');
}
} /*
* 如果没有输入,失去焦点时给出提示信息
*/
function addTips() {
console.log("blur");
var tips = editor.document.getBody().getText().trim();
//console.log("tips: " + tips);
var mytip = "如果想让图片居中,请先选择居中,然后再插入图片!".trim();
//console.log("mytip: " + mytip);
//console.log(tips == mytip);
if (tips.length==0) {
CKEDITOR.instances['content'].setData(mytip);
}
}

参考文献

http://blog.csdn.net/woshirongshaolin/article/details/8240542

CKEditor与CKFinder学习--自定义界面及按钮事件捕获的更多相关文章

  1. CKEditor与CKFinder学习--CKFinder源代码改动自己定义上传文件名称

    CKFinder的系列文章到眼下应该说基本能够满足开发需求了,只是另一个小细节,CKFinder默认上传的文件名称和源文件名称一致,假设文件名称反复会自己主动加入编号"(1)"&q ...

  2. 在JSP里使用CKEditor和CKFinder

    在JSP里使用CKEditor和CKFinder 最 近在做一个新闻发布平台,放弃了很早的FCKEditor,使用CKEditor和CKFinder,尽管免费的CKFinder是Demo版本,但是功 ...

  3. 基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...

  4. CKEditor与CKFinder的配置(ASP.NET环境)

    CKEditor是一个专门使用在网页上的所得文字编辑器,适用于PHP.ASP.NET.Java等后端开发语言.CKEditor原名为FCKeditor,“FCK” 是这个编辑器的作者的名字Freder ...

  5. 12.HTML编辑器(CKEditor、CKFinder集成)

    CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...

  6. 编辑控件CKEditor和CKFinder

    -使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...

  7. CKeditor 集成 CKFinder

    之前照着网上的做,遇到了一些问题,经过多次实验修改最后算是成功了,下面进行详细讲解. 一.CKeditor的配置(附件中已有最新版CKeditor和CKFinder) 1.需要下载ckeditor, ...

  8. Ckeditor与Ckfinder的配合使用,上传图片、水印、修改图片名字为当前日期 asp.net

    为了配置出来上传功能,并且还添加水印,修改图片的名字为日期,真的头疼了很久,现在来分享一下自己所做的,也算一点小小的成就吧,顺带帮帮很多还在弄这个的猿们.我是分别用了两种方法.先说低版本的Versio ...

  9. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

随机推荐

  1. leetcode.数组.667优美的排列II-Java

    1. 具体题目 给定两个整数 n 和 k,你需要实现一个数组,这个数组包含从 1 到 n 的 n 个不同整数,同时满足以下条件:① 如果这个数组是 [a1, a2, a3, ... , an] ,那么 ...

  2. springboot 配置文件的加载顺序

    springboot 配置文件的加载顺序1.在命令行中传入的参数.2. SPRING APPLICATION JSON中的属性. SPRING_APPLICATION—JSON是以JSON格式配置在系 ...

  3. 2018-2-13-win10-uwp-改变鼠标

    title author date CreateTime categories win10 uwp 改变鼠标 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  4. 请问如何实现字符串UTF8->BIG5,BIG5->UTF8。保证送分。-Java/JavaSE

    请问如何实现字符串UTF8-> BIG5,BIG5-> UTF8. ------回答--------- ------其他回答(100分)--------- public String BI ...

  5. 在Eclipse上安装Spring Tool Suite

    . 不装IDE会没有Spring bean configure file Spring Tool Suite是一个基于Eclipse IDE开发环境中的用于开发Spring应用程序的工具,提供了开箱即 ...

  6. Attribute 实现Aop

    1.先定义一个 拦截属性 AopAttribute using System; using System.Collections.Generic; using System.Linq; using S ...

  7. INNODB存储引擎之缓冲池

    以下的资料总结自:官方文档和<MySQL技术内幕-INNODB存储引擎>一书. 对INNODB存储引擎缓冲池的那一段描述来自博文:http://www.ywnds.com/?p=9886说 ...

  8. jsp中提供的四种属性范围

    参考:http://www.cnblogs.com/xdp-gacl/p/3781056.html 1.当前页:一个属性只能在一个页面中取得,跳转到其他页面无法取得 2.一次服务器请求:一个页面中设置 ...

  9. python的代码块缓存机制,小数据池机制。

    同一代码块的缓存机制 在python中一个模块,一个函数,一个类,一个文件等都是一个代码块. 机制内容:Python在执行同一个代码块的初始化对象的命令时,会检查是否其值是否已经存在,如果存在,会将其 ...

  10. js设计模式——5.状态模式

    js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...