web-dev-qa-db-ja.com

CKEditorカスタムプラグインボタン

私はCKEditorのカスタムプラグインを作成しました。すべての面で成功しています。現在は保存しておきます。私の人生では、エディターのツールバーのボタンの画像をカスタマイズする方法はわかりません。私は新しいユーザーなので、クリックして添付画像を見る必要があります。左上のハイライトされた正方形には、他のほとんどのツールバー項目と同様に、きれいな絵が付いているはずです。

Screenshot

ckeditor
44
isparling

ボタン、コンテキストメニュー、ダイアログなど、CKeditorプラグイン開発のあらゆる側面を網羅した完全な チュートリアル を作成しました。

73
geo

答えは、ボタン設定のアイコンプロパティを次のように設定することです。

        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などの画像エディタを使用してボタン画像を作成する方法を知っていることを前提としています。

15
Silkster

他の人のためのいくつかの情報は、CKEditor 3.0のプラグインを作成しようとします。

私はプラグイン/フラッシュからソースをコピーすることから始めました、そして今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.'
}
10
russellfeeed

これらはCKEditor 3.x用のプラグインです

CKEditorプラグイン

Highslide JSプラグイン、LrcShowプラグイン、FileIconプラグイン、InsertHtmlプラグイン、SyntaxHighlighterプラグイン

ダウンロード： CKEditor 3.xプラグイン

4
nasca

CKEditorドキュメンテーションWebサイトには非常に包括的なチュートリアルがあります。以下を参照してください。 CKEditorプラグインSDK-はじめに

現時点では、次の内容をカバーしています。

  • エディターコマンドの作成
  • アイコン付きのツールバーボタンの作成
  • CKEditorでプラグインを登録する方法の説明
  • 2つのタブを持つプラグインダイアログウィンドウの作成
  • コンテキストメニューの追加
  • 高度なコンテンツフィルター（ACF）の統合（ 別のページ ）

独自のウィジェットの作成に興味がある場合は、 Widgets SDK Tutorial も確認してください。

2
Wiktor Walc

このリンクも試してください。 CKEditorプラグインの作成についてもう少し詳しく説明します。

http://www.sayopenweb.com/plugin-for-ckeditor/

2
Say

カスタムアイコンを追加するには、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

アイコンに独自の画像ファイルを使用するか、Sprite /skins/moono/icons.pngを編集して自分の画像ファイルを追加できます。

plugin.jsに次のようなものが必要です

editor.ui.addButton('myplugin',
{
    label: 'myplugin',
    command: FCKCommand_myplugin,
    icon: 'myCustomIcon'
});
1
mariovalens

DrupalのコンテキストでのCKEditorプラグインの作成に関するこの記事も役に立つかもしれません http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

カスタムボタンを使用して独自のCKEditorプラグインを構築するためのコードサンプルとステップバイステップガイドがあります。

1
MiSHuTka

素晴らしいフォントに関しては、CSSを使用してこれを実現できました。

span.cke_button_icon.cke_button__bold_icon {
    position: relative !important;
    background-image: none !important;

  &:after {
    font-family: FontAwesome;
    position: absolute;
    font-size: 16px;
    content: "\f032";
  }
}
0
Jeremy Lynch