Codewaggle の回答here がきっかけで、Reinmar の回答も見ましたが、これをまとめることはできません。
5 つのカスタム スパン (修正、削除、提案など) を含むプラグインを作成し、それを CSS に追加して、Drupal 7 で CKeditor を使用して各スタイルを適用するボタンを作成したいと考えています。
スタイルにドロップダウンを使用したくなく、各クラスのアイコンが追加されたボタンを使用することを好みます。
出発点として basicstyles プラグインを使用しましたが、これまで javascript で何もしたことがないので、本当に暗闇の中にいます。
私が追加しました
config.extraPlugins = 'poligoeditstyles';
config ファイルに追加し、CKeditor のガイドに従ってプラグインのファイル構造を設定します。
すべてが計画どおりに進んでいれば、ツールバーにドラッグするボタンが表示されるはずですが、残念ながら! 喜びはありません。コンテンツを追加するとき、または Drupal の構成ページに CKeditor ツールバーに何も追加されていません。
admin/config/content/ckeditor/edit/Advanced
何か不足していますか？どんな助けでも大歓迎です！
ここに私のプラグインコードがあります:
/**
* POLIGO edit styles plug-in for CKeditor based on the Basic Styles plugin
*/
CKEDITOR.plugins.add( 'poligoeditstyles', {
icons: 'correction,suggestion,deletion,commendation,dontunderstand', // %REMOVE_LINE_CORE%
init: function( editor ) {
var order = 0;
// All buttons use the same code to register. So, to avoid
// duplications, let's use this tool function.
var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) {
// Disable the command if no definition is configured.
if ( !styleDefiniton )
return;
var style = new CKEDITOR.style( styleDefiniton );
// Listen to contextual style activation.
editor.attachStyleStateChange( style, function( state ) {
!editor.readOnly && editor.getCommand( commandName ).setState( state );
});
// Create the command that can be used to apply the style.
editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
// Register the button, if the button plugin is loaded.
if ( editor.ui.addButton ) {
editor.ui.addButton( buttonName, {
label: buttonLabel,
command: commandName,
toolbar: 'poligoeditstyles,' + ( order += 10 )
});
}
};
var config = editor.config,
lang = editor.lang;
addButtonCommand( 'Correction', 'That's a mistake', 'correction', config.coreStyles_correction );
addButtonCommand( 'Suggestion', 'That's OK, but I suggest...', 'suggestion', config.coreStyles_suggestion );
addButtonCommand( 'Deletion', 'You don't need that', 'deletion', config.coreStyles_deletion );
addButtonCommand( 'Commendation', 'Great job!', 'commendation', config.coreStyles_commendation );
addButtonCommand( 'Dontunderstand', 'I don't understand what you mean', 'dontunderstand', config.coreStyles_dontunderstand );
}
});
// POLIGO Editor Inline Styles.
CKEDITOR.config.coreStyles_correction = { element : 'span', attributes : { 'class': 'correction' }};
CKEDITOR.config.coreStyles_suggestion = { element : 'span', attributes : { 'class': 'suggestion' }};
CKEDITOR.config.coreStyles_deletion = { element : 'span', attributes : { 'class': 'deletion' }};
CKEDITOR.config.coreStyles_commendation = { element : 'span', attributes : { 'class': 'commendation' }};
CKEDITOR.config.coreStyles_dontunderstand = { element : 'span', attributes : { 'class': 'dontunderstand' }};