私は CKEditor 用のカスタム プラグインを作成しました。すべての面で成功しています。現在 1 つ保存してください。私の人生では、エディターのツールバーにあるボタンの画像をカスタマイズする方法がわかりません。私は新しいユーザーなので、クリックして添付の画像を表示する必要があります。左上の強調表示された四角形には、きれいな画像が表示されます (他のほとんどのツールバー項目と同様)。
7 に答える
ボタン、コンテキスト メニュー、ダイアログなど、CKeditor プラグイン開発のあらゆる側面をカバー する完全なチュートリアルを作成しました。
答えは、次のようにボタン設定のアイコンプロパティを設定することです。
editor.ui.addButton('your-plugin', {
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
});
プラグインディレクトリには、ボタンを配置する「images」サブディレクトリが必要です。上記のスニペットで、「your-plugin.jpg」をボタンのJPG、GIF、またはPNG画像に置き換えます。
もちろん、この回答は、GimpやPhotoshopなどの画像エディタを使用してボタン画像を作成する方法を知っていることを前提としています。
CKEditor 3.0 用のプラグインを作成しようとする他の人向けの情報もあります。
plugins/flash からソースをコピーすることから始めて、YouTube のロゴが付いたボタンを取得しました.... これは plugins/youtube/plugin.js からの抜粋です。
editor.ui.addButton( 'YouTube',
{
label : editor.lang.common.youtube,
command : 'youtube',
icon: this.path + 'images/youtube.gif'
});
また、言語ファイルを編集する必要があります.... 例: lang/en.js
プラグイン名を「共通」セクションに追加し (これは、ボタンにカーソルを合わせるとツールチップとして表示されます)、プラグインのブロック全体を、すべての文字列と共に次のように追加します....
// YouTube Dialog
youtube :
{
properties : 'YouTube Properties',
propertiesTab : 'Properties',
title : 'YouTube Properties',
chkPlay : 'Auto Play',
chkLoop : 'Loop',
chkMenu : 'Enable YouTube Menu',
chkFull : 'Allow Fullscreen',
scale : 'Scale',
scaleAll : 'Show all',
scaleNoBorder : 'No Border',
scaleFit : 'Exact Fit',
access : 'Script Access',
accessAlways : 'Always',
accessSameDomain : 'Same domain',
accessNever : 'Never',
align : 'Align',
alignLeft : 'Left',
alignAbsBottom: 'Abs Bottom',
alignAbsMiddle: 'Abs Middle',
alignBaseline : 'Baseline',
alignBottom : 'Bottom',
alignMiddle : 'Middle',
alignRight : 'Right',
alignTextTop : 'Text Top',
alignTop : 'Top',
quality : 'Quality',
qualityBest : 'Best',
qualityHigh : 'High',
qualityAutoHigh : 'Auto High',
qualityMedium : 'Medium',
qualityAutoLow : 'Auto Low',
qualityLow : 'Low',
windowModeWindow : 'Window',
windowModeOpaque : 'Opaque',
windowModeTransparent : 'Transparent',
windowMode : 'Window mode',
flashvars : 'Variables for YouTube',
bgcolor : 'Background color',
width : 'Width',
height : 'Height',
hSpace : 'HSpace',
vSpace : 'VSpace',
validateSrc : 'URL must not be empty.',
validateWidth : 'Width must be a number.',
validateHeight : 'Height must be a number.',
validateHSpace : 'HSpace must be a number.',
validateVSpace : 'VSpace must be a number.'
}
これらは CKEditor 3.x のプラグインです。
CKEditor プラグイン
Highslide JS プラグイン、LrcShow プラグイン、FileIcon プラグイン、InsertHtml プラグイン、SyntaxHighlighter プラグイン
ダウンロード: CKEditor 3.x プラグイン
カスタム アイコンを追加するには、skins/moono/*.css を編集する必要があります。エディター自体については、次のファイルに同じ CSS クラスを追加する必要があります。
- editor.css
- editor_gecko.css (Firefox)
- editor_ie.css
- editor_ie7.css
- editor_ie8.css
- editor_iequirks.css
CSS ボタン クラスの形式名は.cke_button__ myCustomIcon _iconです。
アイコンに独自の画像ファイルを使用するか、スプライト /skins/moono/icons.png を編集して独自の画像ファイルを追加できます。
plugin.jsには、次のようなものが必要です。
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: 'myCustomIcon'
});