雷火电竞-中国电竞赛事及体育赛事平台

歡迎來(lái)到入門(mén)教程網(wǎng)!

網(wǎng)頁(yè)編輯器

當(dāng)前位置:主頁(yè) > 網(wǎng)絡(luò)編程 > 網(wǎng)頁(yè)編輯器 >

ckeditor插件開(kāi)發(fā)簡(jiǎn)單實(shí)例

來(lái)源:本站原創(chuàng)|時(shí)間:2020-01-11|欄目:網(wǎng)頁(yè)編輯器|點(diǎn)擊:

CKeditor就是FCKeditor,在發(fā)布一個(gè)新版本的時(shí)候,把自己的名字都改了,不要"F"。

需求:我需要在編輯文本的時(shí)候,選擇一段文字,點(diǎn)擊自定義的按鈕,就能夠在這段文字后面增加一個(gè)圖標(biāo),圖標(biāo)超鏈接去一個(gè)地址,以選中的文字作為參數(shù)。

做法:

1、在CKeditor的plugins文件夾下,創(chuàng)建新文件夾"addmap",這個(gè)名字可以自定義,這個(gè)名字是我項(xiàng)目中用的名字

2、在addmap文件夾下,放一張gif圖片"map.gif",用來(lái)作圖標(biāo)用的。

3、在addmap文件夾下,新建"plugin.js",編輯這個(gè)js文件,我們這里的代碼是:

復(fù)制代碼 代碼如下:

(function() {
    //Section 1 : 按下自定義按鈕時(shí)執(zhí)行的代碼
    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

復(fù)制代碼 代碼如下:

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn';
//config.uiColor = '#AADC6E';
//字體.
config.font_names = '宋體;楷體_GB2312;新宋體;黑體;隸書(shū);幼圓;微軟雅黑;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、測(cè)試

上一篇:免費(fèi)開(kāi)源百度編輯器(UEditor)使用方法

欄    目:網(wǎng)頁(yè)編輯器

下一篇:UEditor編輯器自定義上傳圖片或文件路徑的修改方法

本文標(biāo)題:ckeditor插件開(kāi)發(fā)簡(jiǎn)單實(shí)例

本文地址:http://www.jygsgssxh.com/a1/wangyebianjiqi/11814.html

網(wǎng)頁(yè)制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語(yǔ)言數(shù)據(jù)庫(kù)服務(wù)器

如果侵犯了您的權(quán)利,請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有