CKEditor

WYSIWYG HTMLエディタのCKEditorモジュール

環境：　Drupal 7    CKEditor 7x-1.0   CKEditor 3.5　4.4.2Drupal7 CKEditor

スクリーンショット：

インストール

ダウンロード：　　http://drupal.org/project/ckeditor

モジュールを解凍し、標準的なモジュール保存ディレクトリ　..../site/all/module へ保存

Drupal7 CKEditor image managementその後、CKEditoをダウンロードします。

ダウンロード：　　http://ckeditor.com/download

モジュールを解凍後、 上記CKEditorモジュールをインストールした　..../sites/all/module/ckeditoｒ/ckeditor  のディレクトリへコピーします。　..../sites/all/module/ckeditoｒ　のディレクトリで　ckeditor_3.5.tar.gz を解凍すれば..../sites/all/module/ckeditoｒ/ckeditor に展開されます。

 

CKeidtor for Drupalの場合

以下のサイトからダウンロードします。

http://cksource.com/ckeditor-for-drupal/trial

ダウンロードしたZIPファイルは、通常のDrupalモジュールと同様に、sites/all/module へ解凍展開します。 sites/all/module/ckeditor となります。その後、アドミン画面でモジュールを有効にします。詳細のインストールは以下のサイトで説明があります。

http://docs.cksource.com/CKEditor_for_Drupal/Enterprise/Drupal_7/Install...

ただし、このDrupal版はトライアル版のため、インストールすると以下のような警告がでます。

You are using an unlicensed version of the CKEditor module for Drupal. Visit http://cksource.com/ckeditor-for-drupal to purchase a licensed version that also includes a license for a full-featured file browser, CKFinder, and a dedicated support channel

 

Drupal.org サイトのCKeditor 7.x-1.13 と CKeditorサイトから4.2.1 Full Package をダウンロードする場合

https://drupal.org/project/ckeditor から 7.x-1.13 をダウンロードして sites/all/module/ckeditor へインストールします。

http://ckeditor.com/download　から Full Package の4.2.1をダウンロードして　sites/all/module/ckeditor/ckeditor と入れ替えれる

管理画面　ー＞　モジュール　で実行　CKeditorの設定

もし、Wysiwygモジュールと一緒に使用するときに警告などが出るときには、Wysiwygモジュールと一緒に使う設定をオフにします。

 

 

アップデイト（バージョンアップ）

バージョンアップする際には、現在のモジュールをバックアップしますが、新しいモジュールをインストールした後、そのままでは、Drupal自身がバックアップしたモジュールを認識している場合があり、Drupalからは古いバージョンが表示されます。そこで、新しいモジュールインストールしたら、古いモジュールはディレクトリごと削除し、その後、Drupalのキャッシュクリアすることで、新しいバージョンが認識されることがあります。

基本設定

その後、

アドミン -> モジュール -> CKEditor を選択　権限　設定　を編集します。

アドミン -> 環境設定 -> コンテンツ作成 -> CKEditor で全体の設定、プロファイルを設定します。

役立つ情報

自分のCSS設定、たとえばH1からH6までの見出しタグをオリジナルに変更する場合は、CKEditorの環境設定で、テーマのCSSを使う設定にしてあるときは、テーマのCSSファイルにオリジナルのH1-H6タグを設定することで、CKEeditor内で使うことができます。

 

備考

文章フォーマットを使う場合

入力書式は、Full HTML を使いましょう。　Filtered HTMLを選択した場合は、画像、見出しなどの文章フォーマットなどが、CKEditorないでは問題なく表示されていても、実際のWebサイトでは表示が変更されません。Drupalのコンテンツ・タイプなどの環境設定で、変更できますが、標準的なインストール環境を想定しております。

 

画像が表示できない場合

上記の原因ですので、入力書式をFull HTMLで設定します。

 

リッチテキストエディタの「フォーマット」に見出しをCSSビジュアル表示させたい

CKEditorのプロファイル設定で　CSS -> Editor CSS で Use theme CSS を選択

CSS -> Predefined styles で　Use theme ckeditors.styles.js　を選択

 

CKeditor バージョン 4.1 以上ではJaveScriptなどを使う場合は

http://ckeditor.com/download　サイトから CKEditor のパッケージをダウンロードして、 sites/all/module/ckeditor/ckeditor へそのパッケージを保存します。

そのCKEditorのバージョンが 4.1 以上では、JavaScriptなどのスクリプトが標準では動作しません。

config.allowedContent = true;　　を使用するCKEditorのプロフィール　－＞　高度なオプション　－＞　Custom JavaScript configuration に設定します。

CKeditor 4.1 で、Eitor ApperanceのTool Bar でアイコンをDrug&Dropで設定できない

ツールバーで追加修正したいアイコンをドラッグ＆ドロップできない現象が起こります。

その場合は、アイコンモードを解除して、手作業でアイコンの定義を追加します。

管理画面 -> 環境設定 -> コンテンツ作成 CKEditor -> 共通の設定　Use toolbar Drag&Drop feature　をOFFにします。

CKEditorの設定で　Full もしくは Advanced のプロフィールを編集し。Editor Apperance で追加したいアイコンを挿入します。　例えば、「保存」アイコンは 'Save' 　「Formatting Style 」アイコンは 'Styles'  です。アイコンとアイコンは　,  で区切ります。

CKEditor Toolbar Drupal 7

上記のスクリーンショットはCKEditor 7.x-1.13、CKEditor バージョン 4.3.2 の場合です。このサンプルでのスクリプトは以下のようになります。

[
    ['Source'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker','Scayt'],
    ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','Iframe'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiRtl','BidiLtr'],
    ['Link','Unlink','Anchor'],
    '/',
    ['Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize','ShowBlocks'],
    ['DrupalBreak','Save','Styles','Preview','IMCE','MediaEmbed','NewPage']
]

テンプレートを使って表などのレイアウトを追加する場合

CKEditorのテンプレート挿入機能を使います。　Templatesというアイコン　　を使って挿入します。

サンプルのテンプレートに追加する場合は、/sites/all/modules/ckeditor/ckeditor/plugins/templates/templates　ディレクトリにあるdefault.jsファイルにHTMLのタグを追加します。　以下は標準のdefault.jsファイルです。

CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),
templates:[
{title:"Image and Title",image:"template1.gif",description:"One main image with a title and text that surround the image.",
html:'<h3><img style="margin-right: 10px" height="100" width="100" align="left"/>Type the title here</h3>
<p>Type the text here</p>'},
{title:"Strange Template",image:"template2.gif",description:"A template that defines two colums, each one with a title, and some text.",html:'<table cellspacing="0" cellpadding="0" style="width:100%" border="0"><tr><td style="width:50%">
<h3>Title 1</h3>
</td>
<td>
</td>
<td style="width:50%"><h3>Title 2</h3></td></tr><tr><td>Text 1</td><td></td>
<td>Text 2</td></tr></table><p>More text goes here.</p>'},
{title:"Text and Table",image:"template3.gif",description:"A title with some text and a table.",html:'<div style="width: 80%"><h3>Title goes here</h3>
<table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1">
<caption style="border:solid 1px black"><strong>Table title</strong></caption>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td>
<td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>
<p>Type the text here</p></div>'}]});

 

バージョンアップしたらCKEditorが表示されない場合

CKEditoｒモジュールを（7.x-1.16などに）更新した際に、管理画面－＞環境設定－＞コンテンツ作成、CKEditor　で以下のようなメッセージが表される場合は、CKEditorの環境設定（Global Profile）を変更します。

CKEditorのPath to CKEditorを変更します。 CKEditorモジュール 7.x-1.16 の場合は、%m/ckeditor　から　//cdn.ckeditor.com/4.4.3/full-all　に変更します。

 

タグ: 

オープンソースソフトウェア: 

CMS: