CKeditor富文本編輯器使用技巧之添加自定義插件的方法
更新時(shí)間：2019年06月14日 09:45:45 作者：luyaran
這篇文章主要介紹了CKeditor富文本編輯器使用技巧之添加自定義插件的方法,結(jié)合實(shí)例形式分析了CKeditor添加自定義插件的步驟與相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了CKeditor富文本編輯器使用技巧之添加自定義插件的方法。分享給大家供大家參考，具體如下：
首先就是在CKeditor的plugins目錄下新建一個(gè)目錄qchoice：
qchoice目錄下的結(jié)構(gòu)如下：
然后， images中如下：
dialogs中如下：
我們先來(lái)看plugins.js文件的內(nèi)容：
(function() {
CKEDITOR.plugins.add("qchoice", {
requires: ["dialog"],
init: function(a) {
a.addCommand("qchoice", new CKEDITOR.dialogCommand("qchoice"));
a.ui.addButton("qchoice", {
label: "qchoice",//調(diào)用dialog時(shí)顯示的名稱(chēng)
command: "qchoice",
icon: this.path + "images/qchoice.jpg"http://在toolbar中的圖標(biāo)
});
CKEDITOR.dialog.add("qchoice", this.path + "dialogs/qchoice.js")
}
})
})();
再來(lái)看qchoice.js文件的內(nèi)容：
CKEDITOR.dialog.add('qchoice', function (editor) { //要和plugin.js 中的command 一致
var escape = function (value) {
return value;
};
return {
title: '', //對(duì)話(huà)框標(biāo)題
minWidth: 500, //對(duì)話(huà)框?qū)挾?
minHeight: 600,//對(duì)話(huà)框高度
contents: [{ //對(duì)話(huà)框內(nèi)容
id: 'choice',
name: 'choice',
label: '插入選擇題答案',
title: '插入選擇題答案',
elements: [{
id: 'rdType_1',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['中國(guó)贊','[中國(guó)贊]'],['廣告','[廣告]'],['doge','[doge]'],['喵喵','[喵喵]'],['二哈','[二哈]'],['抱抱','[抱抱]'],['哼','[哼]'],['思考','[思考]'],['生病','[生病]'],['偷樂(lè)','[偷樂(lè)]']]
},
{
id: 'rdType_2',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['笑cry','[笑cry]'],['饞嘴','[饞嘴]'],['拜拜','[拜拜]'],['右哼哼','[右哼哼]'],['左哼哼','[左哼哼]'],['怒罵','[怒罵]'],['鄙視','[鄙視]'],['笑而不語(yǔ)','[笑而不語(yǔ)]']]
},
{
id: 'rdType_3',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['害羞','[害羞]'],['費(fèi)解','[費(fèi)解]'],['挖鼻','[挖鼻]'],['悲傷','[悲傷]'],['打臉','[打臉]'],['抓狂','[抓狂]'],['哈哈','[哈哈]'],['傻眼','[傻眼]'],['好喜歡','[好喜歡]'],['好愛(ài)哦','[好愛(ài)哦]']]
},
{
id: 'rdType_4',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['失望','[失望]'],['good','[good]'],['弱','[弱]'],['耶','[耶]'],['來(lái)','[來(lái)]'],['握手','[握手]'],['加油','[加油]'],['haha','[haha]'],['拳頭','[拳頭]'],['男孩兒','[男孩兒]']]
},
{
id: 'rdType_5',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['話(huà)筒','[話(huà)筒]'],['禮物','[禮物]'],['飛機(jī)','[飛機(jī)]'],['干杯','[干杯]'],['圍脖','[圍脖]'],['鐘','[鐘]'],['肥皂','[肥皂]'],['浪','[浪]'],['女孩兒','[女孩兒]'],['照相機(jī)','[照相機(jī)]']]
},
{
id: 'rdType_6',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['熊貓','[熊貓]'],['喜','[喜]'],['綠絲帶','[綠絲帶]'],['威武','[威武]'],['弗萊見(jiàn)錢(qián)眼開(kāi)','[弗萊見(jiàn)錢(qián)眼開(kāi)]'],['看漲','[看漲]'],['看跌','[看跌]'],['奧特曼','[奧特曼]'],['兔子','[兔子]']]
}
,
{
id: 'rdType_7',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['頂','[頂]'],['米奇喜歡','[米奇喜歡]'],['米奇飛吻','[米奇飛吻]'],['米奇大哭','[米奇大哭]'],['米奇比心','[米奇比心]'],['笑哈哈','[笑哈哈]'],['羞嗒嗒','[羞嗒嗒]'],['憧憬','[憧憬]'],['酷','[酷]']]
}
,
{
id: 'rdType_8',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['月亮','[月亮]'],['圍觀','[圍觀]'],['蛋糕','[蛋糕]'],['微風(fēng)','[微風(fēng)]'],['音樂(lè)','[音樂(lè)]'],['豬頭','[豬頭]'],['鮮花','[鮮花]'],['太陽(yáng)','[太陽(yáng)]'],['Aloha','[Aloha]'],['贊啊','[贊啊]'],['求關(guān)注','[求關(guān)注]']]
}
,
{
id: 'rdType_9',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['哈欠','[哈欠]'],['淚','[淚]'],['怒','[怒]'],['閉嘴','[閉嘴]'],['疑問(wèn)','[疑問(wèn)]'],['白眼','[白眼]'],['吐','[吐]'],['黑線(xiàn)','[黑線(xiàn)]'],['委屈','[委屈]'],['下雨','[下雨]'],['傷心','[傷心]']]
}
,
{
id: 'rdType_10',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['作揖','[作揖]'],['星星','[星星]'],['半星','[半星]'],['空星','[空星]'],['草泥馬','[草泥馬]'],['浮云','[浮云]'],['沙塵暴','[沙塵暴]'],['給力','[給力]'],['骷髏','[骷髏]'],['最右','[最右]']]
}
,
{
id: 'rdType_11',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['太開(kāi)心','[太開(kāi)心]'],['擠眼','[擠眼]'],['衰','[衰]'],['感冒','[感冒]'],['可憐','[可憐]'],['汗','[汗]'],['色','[色]'],['可愛(ài)','[可愛(ài)]'],['錢(qián)','[錢(qián)]'],['ok','[ok]'],['NO','[NO]'],['蠟燭','[蠟燭]']]
}
,
{
id: 'rdType_12',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['吃狗糧','[吃狗糧]'],['蟻人','[蟻人]'],['黃蜂女','[黃蜂女]'],['吃瓜','[吃瓜]'],['允悲','[允悲]'],['壞笑','[壞笑]'],['困','[困]'],['互粉','[互粉]'],['睡','[睡]'],['并不簡(jiǎn)單','[并不簡(jiǎn)單]']]
}
,
{
id: 'rdType_13',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['陰險(xiǎn)','[陰險(xiǎn)]'],['噓','[噓]'],['嘻嘻','[嘻嘻]'],['愛(ài)你','[愛(ài)你]'],['吃驚','[吃驚]'],['污','[污]'],['鼓掌','[鼓掌]'],['給你小心心','[給你小心心]'],['心','[心]'],['贊','[贊]']]
}
,
{
id: 'rdType_14',
type: 'radio', //表單元素類(lèi)型：?jiǎn)芜x按鈕
items: [['微笑','[微笑]'],['偷笑','[偷笑]'],['舔屏','[舔屏]'],['親親','[親親]'],['攤手','[攤手]'],['跪了','[跪了]'],['暈','[暈]'],['米奇愛(ài)你','[米奇愛(ài)你]'],['帶著微博去旅行','[帶著微博去旅行]']]
}]
}],
onOk: function () { //點(diǎn)擊確定按鈕出發(fā)onOK事件。以下代碼主要目的是構(gòu)造一個(gè)select下拉框
qtype_1 = this.getValueOf('choice', 'rdType_1');
qtype_2 = this.getValueOf('choice', 'rdType_2');
qtype_3 = this.getValueOf('choice', 'rdType_3');
qtype_4 = this.getValueOf('choice', 'rdType_4');
qtype_5 = this.getValueOf('choice', 'rdType_5');
qtype_6 = this.getValueOf('choice', 'rdType_6');
qtype_7 = this.getValueOf('choice', 'rdType_7');
qtype_8 = this.getValueOf('choice', 'rdType_8');
qtype_9 = this.getValueOf('choice', 'rdType_9');
qtype_10 = this.getValueOf('choice', 'rdType_10');
qtype_11 = this.getValueOf('choice', 'rdType_11');
qtype_12 = this.getValueOf('choice', 'rdType_12');
qtype_13 = this.getValueOf('choice', 'rdType_13');
qtype_14 = this.getValueOf('choice', 'rdType_14');
rtn = "";
if(qtype_1 != null){
rtn += qtype_1;
}
if(qtype_2 != null){
rtn += qtype_2;
}
if(qtype_3 != null){
rtn += qtype_3;
}
if(qtype_4 != null){
rtn += qtype_4;
}
if(qtype_5 != null){
rtn += qtype_5;
}
if(qtype_6 != null){
rtn += qtype_6;
}
if(qtype_7 != null){
rtn += qtype_7;
}
if(qtype_8 != null){
rtn += qtype_8;
}
if(qtype_9 != null){
rtn += qtype_9;
}
if(qtype_10 != null){
rtn += qtype_10;
}
if(qtype_11 != null){
rtn += qtype_11;
}
if(qtype_12 != null){
rtn += qtype_12;
}
if(qtype_13 != null){
rtn += qtype_13;
}
if(qtype_14 != null){
rtn += qtype_14;
}
if (rtn != "") {
rtns = "<span>"+rtn+"</span>";
editor.insertHtml(rtns);
}
else {
return false;
}
}
};
});
function htmlEncode(str) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = str) : (temp.innerText = str);
var output = temp.innerHTML;
temp = null;
return output;
}
之后就是config.js配置文件的內(nèi)容了：
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' },
{ name: 'extent', items: ["qchoice"] }
];
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select','Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
["qchoice"]
];
config.image_previewText=' ';
config.filebrowserImageUploadUrl = 'uploadFiles';
// config.extraPlugins = 'justify';
config.extraPlugins += (config.extraPlugins ? ',justify' : 'justify');
config.extraPlugins += (config.extraPlugins ? ',qchoice' : 'qchoice');
// config.extraPlugins="linkbutton";
//
// config.extraPlugins="ilink";
//
// config.extraPlugins="ijuzi";
// config.extraPlugins="iti";
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.image_previewText=' ';
config.entities = false;
};
好啦，到這里，自定義插件就算是放入成功了。咱們自定義的插件主要的邏輯結(jié)構(gòu)就是在qchoice.js文件中，可以改變它的內(nèi)容，來(lái)實(shí)現(xiàn)不同的功能。
好啦，本次記錄就到這里了。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript操作XML文件技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- FCKeditor .NET的配置、擴(kuò)展與安全性經(jīng)驗(yàn)交流
- CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
- CKEDITOR二次開(kāi)發(fā)之插件開(kāi)發(fā)方法
- ckeditor自定義插件使用方法詳解
- FCKeditor 插件開(kāi)發(fā) 示例（詳細(xì)版本）
- 添加FCKeditor插件需要注意的地方
- fckeditor 修改記錄添加行距功能插件
- ckeditor插件開(kāi)發(fā)簡(jiǎn)單實(shí)例
- fckeditor 插件開(kāi)發(fā)參考文檔
- SyntaxHighlighter配合CKEditor插件輕松打造代碼語(yǔ)法著色
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- 手把手教你 CKEDITOR 4 擴(kuò)展插件制作
相關(guān)文章
微信小程序獲取手機(jī)系統(tǒng)信息的方法【附源碼下載】
這篇文章主要介紹了微信小程序獲取手機(jī)系統(tǒng)信息的方法,涉及微信小程序wx.getSystemInfo函數(shù)的簡(jiǎn)單使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JS判斷、校驗(yàn)MAC地址的2個(gè)實(shí)例
這篇文章主要介紹了JS判斷、校驗(yàn)MAC地址的2個(gè)實(shí)例,需要的朋友可以參考下2014-05-05
JavaScript中的動(dòng)態(tài)?import()用法示例解析
這篇文章主要為大家介紹了JavaScript中的動(dòng)態(tài)import()用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
最近一個(gè)新需求，要求用下拉多選框?qū)崿F(xiàn)省份、城市的級(jí)聯(lián)選擇。2010-05-05
javascript框架設(shè)計(jì)讀書(shū)筆記之種子模塊
本文是司徒正美的《javascript框架設(shè)計(jì)》一書(shū)第一章種子模塊的讀書(shū)筆記，記錄了一下自認(rèn)為比較重要的東西，分享給大家2014-12-12
這篇文章主要介紹了JavaScript獲得表單target屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
javascript 新聞標(biāo)題靜態(tài)分頁(yè)代碼 (無(wú)刷新)
一個(gè)模板，從數(shù)據(jù)庫(kù)取n條記錄，生成靜態(tài)。做單頁(yè)面的靜態(tài)化,索引頁(yè)面是用JS對(duì)數(shù)組進(jìn)行組合的。2010-03-03
這篇文章主要給大家介紹了關(guān)于小程序組件之自定義頂部導(dǎo)航的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個(gè)技術(shù)原型主要用于在 HTML5 平臺(tái)上展示 PDF 文檔，無(wú)需任何本地技術(shù)支持。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-06-06
javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)
下面小編就為大家?guī)?lái)一篇javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07