CKEditor 使用上の注意_html/css_WEB-ITnose

関連リソース

1. ホームページのアドレス: http://ckeditor.com/

2. ダウンロード アドレス: http://ckeditor.com/download

3. ckeditor.com/

開始方法

1. CKEditor パッケージを配置する場所を選択します

例: webapp/plugin パスに配置します。ここで、webapp は Web プロジェクトのルート ディレクトリです。

2. ckeditor.js をページに導入します

<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/ckeditor/ckeditor.js"></script>

3. ページ内に textarea を定義し、id 属性と name 属性を定義します

<textarea id="editor" name="content"></textarea>

4. ページが完成したら、次を呼び出します。ロードされたステートメント:

CKEDITOR.replace("editor"); // 指定textarea的id或name

うまくいけば、効果がわかります:

補足:

1. コントロールをアクティブにするには、テキストエリアの ID または名前を指定する必要があります。最初に名前がリクエストパラメータのキーとして使用されます。

2. コントロールをアクティブ化すると、元のテキストエリアが非表示になり、CKEditor がテキストエリアを置き換えて表示します。私たちが知る限り、コントロールに入力されたコンテンツと非表示のテキストエリアのコンテンツは、フォームが送信される前に、テキストエリアの名前に基づいてバックグラウンドで取得されます。 ckeditor の入力と一致しています。

3. js でいつでもコントロールのコンテンツを取得したい場合は、次のステートメントを使用できます:

var value = CKEDITOR.instances.editor.getData();

注: editor は CKEDITOR のインスタンスであり、ときに渡される文字列と一致します。コントロールをアクティブにします。

カスタム構成

ckeditor/config.js ファイルは CKEditor の構成に使用されます。最初にダウンロードしたときの内容は次のとおりでした。

/** * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */CKEDITOR.editorConfig = function( config ) {    // Define changes to default configuration here. For example:    // config.language = 'fr';    // config.uiColor = '#AADC6E';};

設定をカスタマイズしてメソッドに記述する必要があります。

設定ツールバー

CKEditor は 3 つのバージョンに分かれており、異なるツールバーをサポートしています。これに基づいて設定する必要がある場合は、ダウンロード パッケージで提供される設定ツールを使用し、このブラウザで /ckeditor/samples/toolbarconfigurator/index.html を直接開くことができます

ツールバーの階層区分: 行 - ツールバー- グループプロジェクト。行は行区切り文字で区切られており、ツールバー間には明確な間隔があり、グループ間には垂直線が存在します。

設定が完了したら、[ツールバー設定を取得] ボタンをクリックしてソース コードのコピーを取得し、ツールバーの設定を実現します。

フォント構成

config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong';

例: 上記のコードを config.js メソッドにコピーすると、コントロールのフォントを Song Diagnostic、New Song Diagnostic、および Fake Song Diagnostics として構成できます。

コントロールは複数のフォント エンティティを構成でき、フォントは ; で区切られます。フォントは、/ で区切られて表示名と設定名に分かれており、表示名はコントロール内での表示に使用され、設定名は対応するフォントファミリーの設定に使用されるため、設定名を任意に入力することはできません。たとえば、上記の設定によれば、New Songdynasty を選択すると、出力コードは style="font-family:nsimsun" になります。

font-family は複数のフォント シーケンスを設定できるため、コントロールのフォント エンティティは、, で区切られた複数の出力名を持つことができます。例:

rrree

改行モード設定

デフォルトでは、Enter キーで p タグが追加され、Shift+Enter で br タグが追加されます。コントロールには 3 つのモードがあります:

1. CKEDITOR.ENTER_P

p タグを追加します

2. CKEDITOR.ENTER_BR

br タグを追加します

div タグを追加します

コントロールを使用しますモードを設定するには、次のパラメータ名を使用します。

1. enterMode

Enter キーをクリックするモードを設定します

2.shiftEnterMode

Shift + Enter キーの組み合わせのモードを設定します

次のコード:

config.font_names = 'Times New Roman/Times New Roman, Times, serif';

その他の設定

CKEDITOR.config の API を参照してください。

設定方法

上記のように config.js ファイルを直接変更する以外に、他に 2 つの設定方法があります。

1. アクティブ化中に設定する

config.enterMode = CKEDITOR.ENTER_BR; // 配置Enter是换行config.shiftEnterMode = CKEDITOR.ENTER_P; // 配置Shift + Enter是换段落

2. カスタム設定ファイル

CKEDITOR.replace( 'editor', {    language: 'fr',    uiColor: '#9AB8F3'});

では、カスタム設定ファイルの構造がデフォルトの config.js と一致している必要があります。

関数トライアル

1. 初期最大化

CKEDITOR.editor にはイベントinstanceReady、CKEDITOR.editor#on('instanceReady', function(evt)) があり、コントロールの初期化が完了したタイミングをキャプチャできます。 .instances.editorId は、指定された editorId を持つ CKEDITOR.editor インスタンスを取得できます。

CKEDITOR.editor#execCommand( commandName, [data] ) は、コマンドを実行するために使用されます。

上記の知識を組み合わせると、 2. コントロールのリッチ テキスト コンテンツを取得します

CKEDITOR.replace( 'editor1', {    customConfig: '/custom/ckeditor_config.js'});

を使用して、リッチ テキスト コンテンツを取得できます

CKEDITOR.instances.editor.on('instanceReady', function (e) {    CKEDITOR.instances.editor.execCommand('maximize'); // 初始最大化});

3.れーれー

关于execCommand的说明

"maximize"是最大化的命令，"preview"是预览的命令，"print"的命令。大家一定想要一份command的清单，求知有哪些命令可供我们使用。很遗憾，我没有找到这样的清单，通过走读源码，在ckeditor.js中，会调用CKEDITOR.plugins.add( {String}name, {Object}[definition] )来注册资源，"maximize"、"preview"、"print"都在其中。

通过关键字匹配，共有72个资源：

dialogui, dialog, about, a11yhelp, dialogadvtab, basicstyles, bidi, blockquote, clipboard, button, panelbutton, panel, floatpanel, colorbutton, colordialog, templates, menu, contextmenu, div, resize, toolbar, elementspath, enterkey, entities, popup, filebrowser, find, fakeobjects, flash, floatingspace, listblock, richcombo, font, forms, format, horizontalrule, htmlwriter, iframe, wysiwygarea, image, indent, indentblock, indentlist, smiley, justify, menubutton, language, link, list, liststyle, magicline, maximize, newpage, pagebreak, pastetext, pastefromword, preview, print, removeformat, save, selectall, showblocks, showborders, sourcearea, specialchar, scayt, stylescombo, tab, table, tabletools, undo, wsc

 

Technorati 标签: CKEditor使用, CKEditor配置