web-dev-qa-db-ja.com

<p>ブロックでコンテンツをラップしないようにckeditorを構成する方法は？

Webサイトで ckeditor を使用して、ユーザーがHTMLを簡単に入力できるようにします。

ただし、ckeditorから返されるデータは<p></p>ブロック。 （私はしたくない）

エディターがテキストを何もラップしないようにする構成設定はありますか？

ckeditorword-wrap
47
Nathan Osman

以下をCKEditorのconfig.jsファイルに追加します。

config.enterMode = CKEDITOR.ENTER_BR;

例：

...

CKEDITOR.editorConfig = function (config)
{
    config.enterMode = CKEDITOR.ENTER_BR;

    ...
};

詳細

この動作を制御する構成設定は、ユーザーがを押したときに発生する内容に基づいています Enter。

HTMLを初めて使用する人がこれを読む場合に備えて、関連する概念の基本的な説明と、タグを挿入する必要がある理由について説明します。 Enter キーが押されました。

HTMLドキュメントにテキストを入力してから、新しい行に追加のテキストを入力すると、ブラウザーはテキストを2行として表示せず、キャリッジリターンを無視し、文字間の複数のスペースを1つに凝縮することを知っていますスペース。

次のHTML：

qwer
tyui

次のようにレンダリングされます。

qwer tyui

そのため、エディターはHTMLタグを挿入して、ブラウザーに2行目のテキストを新しい行に表示するように指示する必要があります。

これを制御する構成設定はconfig.enterModeであり、3つのオプションがあります。

1-段落を挿入

デフォルト設定では、毎回段落要素が作成されます Enter 押された：

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2-「div」を挿入

段落の代わりにdiv要素を作成することを選択できます。

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3-ブレークの挿入（探している設定）

テキストを何でもラップしない場合は、改行タグを挿入することを選択できます。

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

CKEditorドキュメントでは、ENTER_BR設定の使用は推奨されないことが示されています ：

注：意味の値と正確さのため、CKEDITOR.ENTER_P設定を使用することをお勧めします。エディターはこの設定に最適化されています。

関連する別の設定「autoParagraph」

同様の状況を制御する2番目の設定–config.autoParagraphがあります。それがどのように機能するかは、上記のconfig.enterMode設定に依存します。

autoParagraphは、spanなどのインライン要素を、p設定で指定されたブロック要素（divまたはenterMode）でラップするかどうかを決定します。デフォルトではインライン要素をラップするため、次のようなスパンを（HTMLとして）入力すると：

<span>asdfg</span>

次のようにpまたはdiv要素にラップされます。

<p><span>asdfg</span></p>

またはこれ：

<div><span>asdfg</span></div>

これをfalseに設定した場合、またはenterModeをCKEDITOR.ENTER_BRに設定した場合、インライン要素はラップされません。

CKEditorドキュメントにはconfig.autoParagraphに関するこの注意が含まれています ：

注：デフォルト値を変更すると、予測できない使いやすさの問題が生じる可能性があります。

さらに多くの設定

この主題に多少関連する設定が3つあります。

  • config.fillEmptyBlocks
  • config.forceEnterMode
  • config.ignoreEmptyParagraph

参照

利用可能な構成オプションの完全なリストは、次の場所にあります。

122
codewaggle

私はゲームに少し遅れていることを知っていますが、OPが探しているオプションは次のとおりです：

 
 config.autoParagraph = false;
15
MikeBman

構成を変更しない非常にシンプルなソリューションは、

  1. shift + enterは改行<br>、および
  2. ちょうどenterは新しい段落を引き起こします。

利点は、構成を変更する必要がないことです。さらに、両方があります。

5
Neil Patrao

これは上記で完全に回答されていますが、前述のように、メイン設定で実際にこれを変更するべきではありません。

これを行う正しい方法は、.replaceごとです。

つまり.

    <form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
    <textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
    <textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
    <input type="submit" value="Submit">
    </form>

<script type="text/javascript">  
    CKEDITOR.replace( 'editor2', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize');     }},
    });      
    </script>
5
ablueman

<p>タグを除外し、Ckeditorで太字のイタリック体の上付き文字、下付き文字などの基本的な編集ツールのみが必要な場合は、次の手順に従います。

私は絶えず36時間を研究したので、これについて100％確信しています:)

ステップ1：このスクリプトをPHP Webページに追加します

<script type="text/javascript">  
    CKEDITOR.replace( 'editor1', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
    }); 
</script>

ステップ2：このようにid="editor2"とonfocus="this.value='';"をテキストエリアに追加します

<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">

ステップ3：必ずClass="ckeditor"をTextareaから削除してください。

ステップ4：発生しなかった場合、Webページをリロードしますキャッシュ/履歴を削除し、PC /ラップトップを再起動します。

ステップ5：その完了:)

2
Rishi Rich

Django-ckeditorの場合、settings.pyファイルにこの設定を追加します。

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}
0
Ravi Dhiman