ckeditor插件开发简单实例_网页编辑器

CKeditor就是FCKeditor,在发布一个新版本的时候,把自己的名字都改了,不要"F"。

需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数。

做法:

1、在CKeditor的plugins文件夹下,创建新文件夹"addmap",这个名字可以自定义,这个名字是我项目中用的名字

2、在addmap文件夹下,放一张gif图片"map.gif",用来作图标用的。

3、在addmap文件夹下,新建"plugin.js",编辑这个js文件,我们这里的代码是:

复制代码 代码如下:

(function() {
    //Section 1 : 按下自定义按钮时执行的代码
    var a = {
        exec: function(editor) {
        var data=""; 
        var mySelection = editor.getSelection();
        if (CKEDITOR.env.ie) {
            mySelection.unlock(true);
            data = mySelection.getNative().createRange().text;
        } else {
            data = mySelection.getNative();
        }
        if(data!=null&&data!=''){
            editor.insertHtml(data+'<a href="/map_index.html?ad='+data+'"><img border="0" height="24" src="/images/map_icon.gif" width="24" /></a>');
        }
        }
    },
    b = 'addmap';
    CKEDITOR.plugins.add(b, {
        init: function(editor) {
            editor.addCommand(b, a);
            editor.ui.addButton('addmap', {
                label: 'add map link',
                icon: this.path + 'map.gif',
                command: b
            });
        }
    });
})();

4、回到CKeditor的根目录,编辑config.js

复制代码 代码如下:

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn';
//config.uiColor = '#AADC6E';
//字体.
config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';
//工具按钮    
config.toolbar=
[
   ['Source','-','Preview'],
   ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','Link','Unlink','Anchor'],
   ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
   ['addmap']
];

config.extraPlugins = 'addmap';

5、测试

时间: 2024-10-02 06:25:23

ckeditor插件开发简单实例_网页编辑器的相关文章

ckeditor插件开发简单实例

我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数   CKeditor就是FCKeditor,在发布一个新版本的时候,把自己的名字都改了,不要"F". 需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数. 做法: 1.在CKeditor的plugins文件夹下,创建新文件夹"addmap",这个名

CKEditor网页编辑器 中文使用说明_网页编辑器

安装 安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成. 1.从我们的网站http://www.jb51.net/codes/21295.html上下载CKEditor的最新版本. 2.将下载的文件解压到你网站目录下的"ckeditor"文件夹里. 注意:你也可以将这些文件放在你网站的任何一个地方,默认为"ckeditor". 测试你的安装 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看"_samples&q

关于CKeditor的非主流个性应用的设置_网页编辑器

CKeditor,以前叫FCKeditor,已经使用过好多年了,功能自然没的说.最近升级到3.0版,好像重写了代码,所以构建的方式也有了些变化,应该说是更简单了. 相关地址: 官方网站:http://ckeditor.com/ 下载地址:http://ckeditor.com/download CKfinder:http://ckfinder.com/ 用于上传的插件(有四种语言版本,根据需要下载) 部署: 将CKeditor下载下来,解压网站/ckeditor/下面(当然名字可以修改,只是需要

kindSoft在线网页编辑器简单的配置参数介绍_网页编辑器

对于网页编辑器对做项目的时候是非常的又用的一个编辑器,大大的减轻了开发人员的负担,感觉KindSoft是一个不错的选择,因此也在不断的使用. 下面对一些简单的配置进行归纳一下: 首先是将下载的KindSoft文件导入到项目的目录下: 复制代码 代码如下: <script src="../Content/kindeditor-4.1.4/kindeditor-all.js" type="text/javascript"></script> &l

FCKeditor 网页在线编辑器的使用方法_网页编辑器

它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net.ASP.ColdFusion .PHP.Jsp.Active-FoxPro.Lasso.Perl.ython 等编程环境. 官方网站 http://www.fckeditor.net/ 官方文档 http://wiki.fckeditor.net/ 下载地址 http://www.fckeditor.net/download/default.html FCKeditor安装和配置 下载FCKeditor2.63.zip和F

百度UEditor编辑器使用教程与使用方法(图文)_网页编辑器

我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web

xhEditor编辑器入门基础_网页编辑器

1.1. 在线可视化HTML编辑器概述 在Web程序应用中,最常见的一种行为是信息和言论的发布和交流.而在信息发布的同时,往往会有对信息发布的格式.类型和功能上的需求,比如:加粗.下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率.在这个需求的背景下,HTML在线编辑器就应运而生了. 顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言.论坛发贴.Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一.在线HT

FCKeditor2.3 For PHP 详细整理的使用参考_网页编辑器

参考一 首先到:http://www.fckeditor.net去下载FCKeditor放到网站根目录.精简说明:删除所有"_"开头的文件和文件夹删除语言包中除中文和英文以外的语言删除skin目录下除默认皮肤以外的文件夹filemanager/browser/default/connectors/目录下除php以外的文件filemanager/upload/目录下除php以外的文件表情文件夹及表情按钮配置说明:fckeditor.php :BasePath为默认Fckeditor的目录

22个国外的Web在线编辑器收集_网页编辑器

1. TinyMCE 免费,开源,轻量的在线编辑器,基于 javascript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI Editor 属于 Yahoo! YUI 的一部分,能输出纯净 Xhtml 代码. 4. NicEdit 简单,易用,轻量,外观漂亮的在线编辑器. 5. Kupu 开源,支持 ajax 保存,跨平台,易于集成,由 OSCOM 推出. 6. Free Rich Text Editor 非常容易部署,输出