web-dev-qa-db-ja.com

CKEditor4-ツールバーにフォントファミリーとフォントサイズのコントロールを追加する方法

Config.jsにconfig.toolbarGroups設定がありますが、フォントファミリー/フォントサイズコントロールを追加するためにグループに使用する名前がわかりません。 （この点に関してはドキュメントが不足しているようです）。 CKBuilderを使用して、すでに含まれているパッケージを作成する必要があるという提案をいくつか見つけましたが、いくつかのボタンを追加するためだけにckeditor全体を再デプロイすることはできません。

編集：私のCKEditorはバージョン4です

何かアドバイスはありますか？

ありがとう！

ckeditor
10
Roy Tang

ツールバーを構成するには、2つの（相互に排他的な）方法があります。以下を確認してください。

http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html

最初にconfig.toolbarGroupsを使用しようとしましたが、代わりにconfig.toolbarを使用することになりました。これが私が使用することになったものです：

config.toolbar = [
                { name: 'save', items: [ 'savebtn','Undo','Redo' ] },
                { name: 'clipboard', items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord'] },
                { name: 'document', items: [ 'Find','Replace'] },
                '/',
                { name: 'lists', items: [ 'NumberedList','BulletedList','Outdent','Indent'] },
                { name: 'insert', items: [ 'Image','Table','Smiley','SpecialChar'] },
                { name: 'link', items: ['Link','Unlink'] },
                '/',
                { name: 'basicstyles', items: [ 'Font','FontSize','Bold','Italic','Underline','Strike','Subscript','Superscript'] },
                //'/',
                { name: 'align', items: [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] }
        ];

KasperTaeymansによって寛大に提供された保存プラグインを使用していることに注意してください。これは次の場所にあります。

gifをロードするajax保存ボタンをCKeditor 4.2.1に追加する方法。[作業サンプルプラグイン]

また、バージョン3に関連しているにもかかわらず、次のドキュメントが非常に役立つことがわかりました。

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

この記事の情報を使用して構成を作成し（バージョン4.2.1を使用しています）、具体的にはアイテムの名前（切り取り、コピー、貼り付けなど）を作成しました。これは、私の場合はリンクが欠落していたためです。

5
Evan
config.extraPlugins = 'font';

プラグインを追加する必要があります...

3
Harold

ツールバーにFontSizeを明示的に追加する必要があることを理解するのに長い時間がかかりました-Fontだけでは機能しないようです。

0
m02ph3u5

これを使用して、CkEditorでフォントファミリーとフォントサイズを追加できます。

これはconfig.jsで実行されます。

docs も参照してください

    config.font_names = 'Arial;Times New Roman;Verdana;' +  CKEDITOR.config.font_names;

config.toolbar_Full =
[
     { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

    { name: 'paragraph', items : [ 'Outdent','Indent','-','Blockquote','CreateDiv','-',
                'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }    

];

config.toolbar = 'Full';
0
Abi