[英]How do I add styles using CKEditor Custom drop down plugin
因此,我添加了此插件,該插件為我提供了在CKeditor工具欄上具有下拉菜單的代碼,該菜單包含單擊時可應用的所有樣式。 看到代碼:
CKEDITOR.plugins.add( 'tokens',
{
requires : ['richcombo'], //, 'styles' ],
init : function( editor )
{
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = []; //new Array();
//this.add('value', 'drop_text', 'drop_label');
tags[0]=["[contact_name]", "Name", "Name"];
tags[1]=["[contact_email]", "email", "email"];
tags[2]=["[contact_user_name]", "User name", "User name"];
// Create style objects for all defined styles.
editor.ui.addRichCombo( 'tokens',
{
label : "Insert tokens",
title :"Insert tokens",
voiceLabel : "Insert tokens",
className : 'cke_format',
multiSelect : false,
panel :
{
css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
voiceLabel : lang.panelVoiceLabel
},
init : function()
{
this.startGroup( "Tokens" );
//this.add('value', 'drop_text', 'drop_label');
for (var this_tag in tags){
this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
}
},
onClick : function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
});
因此,此代碼的作用是僅在標簽[“ [contact_name”]中插入任何內容,因此,當您在下拉列表中單擊“名稱”時,它只會在文本編輯器中刪除[contact_name]。 我想知道如何使每個標簽具有特定功能,從而將css添加到在文本編輯器中選擇的內容。 例如,有一個名為“紅色字體”的函數,無論存在什么<p>字體,它都會變成紅色。
CKEDITOR.replace( 'editorId', {
extraPlugins: 'tokens'
});
添加此代碼,然后用您的編輯器ID替換編輯器ID。 而已。
CKEDITOR.replace( 'editor', {
extraPlugins: 'tokens' // why tokens see below
});
因為你給了
CKEDITOR.plugins.add( 'tokens',
{
requires : ['richcombo']
..
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.