给Ckeditort添加一个插入code标签的按钮

Other 2013-08-26 ckeditor,编辑器,code,自定义

Ckeditor是一个非常受欢迎的JavaScript编辑器,问世至今走了十年,依然还是市场老大,经得起时间考验就是好程序。

因为经常写一些技术博文,可能有些地方需要插入code标签,而默认Ckeditor不具备插入code标签功能,但它提供的拓展灵活程度让我感觉这就是那么容易。

一、下载程序,解压

下载地址:http://ckeditor.com/

如果你没有下载错的话,解压后的目录应该跟截图一致。

二、创建插件目录

截图画红线的目录plugins就是ckeditor插件目录,所有的插件都集合在里边,在里边创建一个code目录,作为插入code标签功能的插件目录。

三、编写插件程序

ckditor插件的规则是在插件目录下创建一个plugin.js文件作为插件主程序处理文件,如果是复杂的插件可能会有N个js文件。

因为插入code标签这个功能非常简单,所以一个plugin.js就能搞定。

代码:

// 添加一个插件
CKEDITOR.plugins.add('code', {

// 插件初始化
init: function (editor) {

	// 添加code按钮
	editor.ui.addButton('code', {

		// 鼠标移到按钮提示文字
		label: 'code',

		// 命令
		command: 'code',

		// 图标(相对于插件本身目录下)
		icon: this.path + 'images/code.gif'

	});
}


});

四、制作按钮图标

额~~~,这个不在本文讨论范围之内,可以使用一些简单的作图工具制作就好。

我作图也不行,随便使用Fireworks做了一个

看起来很呆。。。。将就用吧!

图标文件名与路径要对应你在plugin.js中设置好的,因为我在plugin.js中定义的图标位置是在images目录下的code.gif图标,So 把code.gif图片放到插件目录的images目录下

五、修改config.js配置文件

打开config.js,添加一句

config.extraPlugins += (config.extraPlugins ? ',code' : 'code');

最终config.js代码如下:

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	
	// 这句代码是添加的
	config.extraPlugins += (config.extraPlugins ? ',code' : 'code');
};

六、测试,看欧了不

新建一个HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
		<script src="ckeditor/ckeditor.js"></script>
	</body>
</html>

使用浏览器打开创建的HTML页面

欧拉,按钮出来了。

七、添加点击事件

可系~~~现在能用了吗?点,我点,我使劲点。。咋没有反应呢!

亲,别急,你还没有添加点击事件呢!

打开之前创建plugin.js文件,添加click事件,最终代码如下:

// 添加一个插件
CKEDITOR.plugins.add('code', {

// 插件初始化
init: function (editor) {

	// 添加code按钮
	editor.ui.addButton('code', {

		// 鼠标移到按钮提示文字
		label: 'code',

		// 命令
		command: 'code',

		// 图标(相对于插件本身目录下)
		icon: this.path + 'images/code.gif',

		// 添加点击事件	
		click:function(){
			
			// 获取选取的文本
			var selectText = editor.getSelection().getSelectedText();

			// 判断选取的文本是否为空
			// 如果为空就啥都不干
			if( selectText !== ""  ){

				// 判断你是要干嘛?
				// 你是要添加code标签呢?
				// 还是你要取消code标签?
				if( editor.getSelection().getStartElement().getName() !== "code" ){
					
					// 添加code标签
					var insertHtml = "<code>" + selectText + "</code>";
					editor.insertHtml(insertHtml);
				}else{
					// 取消code标签
					editor.insertText(selectText);		
				}
			}

		}

	});
}


});

重新运行浏览器,随便输入一行字,选中几个,点击code按钮,亲,这下可以了吧!

八、code标签样式

虽然,按钮功能可以用了,但还有点郁闷,就是code标签的文本跟其它标签的文本看起来没差别,看不出来哪些已经添加code标签

我们给code标签添加几个样式,让它与众不同。打开ckeditor目录下的contents.css

在结尾处添加code样式

code {
	border:1px solid #ffe4c4;
	color:#ff7f50;
	border-radius:2px;
	padding:0 2px;
	margin:0 2px;
}

保存,重新运行看下效果!

如果需要取消code标签的文字只需要选择已被添加code标签的文字,再点击code按钮就好!

文字链接:《给Ckeditort添加一个插入code标签的按钮

文章地址:http://www.qttc.net/201308369.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 2

  • 问一下,Code能改成其他标志吗
    2014-05-20 14:53:15 [ 跟帖 ]
    当然可以,随意改变,这是没有任何问题的。
    2014-11-24 00:49:40 [ 跟帖 ]
    1 #