エディターでテキスト エリアを有効に (WYSIWYG | Ckeditor を [)

ここでは、わずか 3 ステップで Web アプリケーションと ckeditor を [を統合するためにクイック ヘルプです。.

プレゼンテーション

オンに、 タグ Web エディターでテキスト エリアは、もはや複雑なタスク. インターネット上で見つけることができる多くの編集者の間で, 我々 は ckeditor を [の使用を参照してください。. エディターの動作を参照してください。 デモ.

インストール

Ckeditor を [をダウンロードします。 http://ckeditor.com/download. この記事で使用するバージョンは 3.6.4, の 17 7 月 2012. ファイルを抽出します。 ckeditor_3.6.4.zip アプリケーションと共に. フォルダー ckeditor を [ 作成されます。. 準備ができて, 今ちょうどソース コード内で呼び出しを行う!

統合

Ckeditor を [は JavaScript アプリケーションです。. それを読む, ちょっと内で彼に簡単な電話して、 タグ ソース コードの頭. これをやった, ckeditor を [の Javascript API が既に使用できる状態に. ファイル パスを調整してください。 ckeditor.js 解凍したディレクトリに.

ステップ 1 – Ckeditor を [の呼び出しを行う
1
2
3
  <>
    <スクリプトの種類="text/javascript" src="ckeditor/ckeditor.js"></スクリプト>
  </>
ステップ 2 – TEXTAREA フィールドを作成します。
1
2
3
  <>
    <TextArea id="editor1"="editor1">&Lt;p&GT;初期値.&Lt;/p&GT;</テキスト エリア>
  </>
ステップ 3 – 状態テキスト (ID) ckeditor を [に置き換えられます
1
2
3
4
5
6
7
  <頭>
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数()  {
        CKEDITOR を [.置換( エディター ' 1 ' );
      };
    </スクリプト>    
  </頭>

準備ができて, 作品はすでに! 思わない? 保存, どのような “F5 キー” あなた自身のため参照してくださいブラウザー… 完全なコードはこんな感じ:

完全なコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <頭>
    <タイトル>Ckeditor を [</タイトル>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></スクリプト>
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数()  {
        CKEDITOR を [.置換( エディター ' 1 ' );
     };
    </スクリプト>
  </頭>
  <体>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;初期値。&Lt;/p&GT;</テキスト エリア>
      <input type="submit" value="Submit" />
    </フォーム>  
  </体>
</HTML>

もちろんです, 今、アプリケーションと調整する必要があります。, 設定してから、 アクション フォームの, ページが取得を示すとプロセス データ提出郵送.

記事はここで終了します。, しかし、好奇心のためいくつかのより多くの真珠を残しておきます:

ヒント

(1) Onload イベント, クラス =”ckeditor を [”

クラスを割り当てる場合 “ckeditor を [” あなたのテキスト エリアに, Ckeditor を [に自動的に変換されます。, イベントによって呼び出されるスクリプトを使用しなくても “OnLoad”, まあ、単純です:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <>
    <タイトル>Ckeditor を [</タイトル>
    <メタ コンテンツ="text/html; charset = utf-8" http-当量="content-type" />
    <スクリプトの種類="text/javascript" src="ckeditor/ckeditor.js"></スクリプト>
  </>
  <>
    <フォーム アクション="request.php" メソッド="post">
      <テキスト エリア クラス="ckeditor" ID="editor1"="editor1">&Lt;p&GT;初期値.&Lt;/p&GT;</テキスト エリア>
      <入力の種類="submit"="Submit" />
    </フォーム>  
  </>
</HTML>

(2) 変更改行 <p> によって <Br/>

Teclamos 入力 P BR を交換するための 2 つの方法に気づいた. 最初, パラメーターを設定します。 enterMode 値を持つ 2, 以来 1 = P, 2 = BR と 3 = DIV.

1
2
3
4
5
6
7
  <頭>  
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数() {
        CKEDITOR を [.置換( エディター ' 1 ', {enterMode: 番号(2)} );
      };
    </スクリプト>
  </頭>

または, ファイルを開く 示さない、config.js ような何かを設定し、:

1
2
3
CKEDITOR を [.editorConfig = 関数( 設定 ) {
  設定.enterMode = CKEDITOR を [.ENTER_BR;
};

この場合, Enter キーを入力するとき, 我々 のオプションがあります。:
CKEDITOR を [します。ENTER_P-新しい段落 P が作成されます。;
CKEDITOR を [します。BR で改行 ENTER_BR;
CKEDITOR を [します。ENTER_DIV 新しい DIV ブロックを作成します。.

結果を表示するブラウザーを開くし、すぐにお勧めします

この変更, キャッシュできるので! それはまだ動作しない場合, ブラウザーのキャッシュをクリーンアップします。.

(3) Ckeditor を [ツールバーの背景色を変更します。

あなたは気づいて, 私たち ckeditor を [に変更を作る、ckeditor を [またはファイル経由で直接にパラメーターを割り当てること 示さない、config.js. だから, 1 つを紹介します:

1
2
3
4
5
6
7
  <頭>  
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数() {
        CKEDITOR を [.置換( エディター ' 1 ', {uicolor: 「#ff0000」} );
      };
    </スクリプト>
  </頭>

(4) Ckeditor を [の構成パラメーターを組み合わせる

Ckeditor を [の構成パラメーターを組み合わせることができます。. 可能性を満たすために, 見て、 構成 API. 例:

1
2
3
4
5
6
7
8
9
10
11
12
  <頭>  
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数() {
        CKEDITOR を [.置換( エディター ' 1 ', {  uicolor: ' #ccc ',
                                        enterMode: CKEDITOR を [.ENTER_P,
                                        customConfig : ' ckeditor/outroConfig.js ',
                                        言語: ' en '        
                                      } 
                        );
      };
    </スクリプト>
  </頭>

(5) Ckeditor を [でサポートされている言語

Ckeditor を [サポート 58 言語, 含む、 “en”. ご覧ください。 ユーザー インターフェイス言語. 上記の例では、あなたの使用.

(6) ツールバーのカスタマイズ

– 基本

Ckeditor を [のすべての機能を提供したくないです。. だから, なぜあなたの必要性に従ってツールバーを最適化? 次に、非常に基本的なエディターを離れる例.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <頭>  
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数() {
        CKEDITOR を [.置換( エディター ' 1 ', {
                           ツールバー:
                           [
                             {: ' basicstyles ', アイテム : [ 「大胆な」,' 斜体 ' ] },
                             {: ' 段落 ', アイテム : [ 「箇条書き」,' BulletedList ' ] },
                             {: ' ツール ', アイテム : [ ' 最大 ',' - ',' について ' ] }
                           ]}         
                         );
      };
    </スクリプト>
  </頭>

– 完了します。

次に、完全な例. しないようにボタンを削除します。.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <頭>  
    <スクリプトの種類="text/javascript">
      ウィンドウ.OnLoad = 関数() {
        CKEDITOR を [.置換( エディター ' 1 ', {
                           ツールバー: [
                             {: ' ドキュメント ', アイテム : [ ' ソース ',' - ',' 保存 ',' NewPage ',' DocProps ',' プレビュー ',' 印刷 ',' - ',' テンプレート ' ] },
                             {: ' クリップボード ', アイテム : [ ' カット ',「コピー」,' 貼り付け ',' PasteText ',' PasteFromWord ',' - ',' 元に戻す ',「やり直し」 ] },
                             {: ' 編集 ', アイテム : [ ' 検索 ',' 置換 ',' - ',' SelectAll ',' - ',' スペル チェック ', ' Scayt ' ] },
                             {: ' フォーム ', アイテム : [ ' フォーム ', ' Checkbox ', ' ラジオ ', 「テキスト フィールド」, ' Textarea ', ' 選択 ', ' ボタン ', ' ImageButton ', ' HiddenField ' ] },
                             '/',
                             {: ' basicstyles ', アイテム : [ 「大胆な」,' 斜体 ',' 下線 ',「攻撃」,' インデックス ',「上付き文字」,' - ',' RemoveFormat ' ] },
                             {: ' 段落 ', アイテム : [ 「箇条書き」,' BulletedList ',' - ',' レベル ',' Indent ',' - ',' 引用 ',' CreateDiv ', ' - ',' JustifyLeft ',' JustifyCenter ',' JustifyRight ',' JustifyBlock ',' - ',' BidiLtr ',' BidiRtl ' ] },
                             {: ' リンク ', アイテム : [ ' リンク ',' 解除 ',' アンカー ' ] },
                             {: ' insert ', アイテム : [ ' イメージ ',' フラッシュ ',' テーブル ',' 水平罫線 ',' スマイリー ',' SpecialChar ',「改ページ」,「Iframe」 ] },
                             '/',
                             {: ' スタイル ', アイテム : [ ' スタイル ',' 形式 ',' フォント ',' フォント ' ] },
                             {: ' 色 ', アイテム : [ ' TextColor ',' 背景 ' ] },
                             {: ' ツール ', アイテム : [ ' 最大 ', ' ShowBlocks ',' - ',' について ' ] }                            
                           ]}         
                         );
      }; 
    </スクリプト>
  </頭>

– モデレート

これより穏健な例, バーのみのツールで, ですが、主要な機能. 注意してください。, を含む, 組み合わせるし、高さとエディターの幅を測定することが可能です。.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<頭>  
  <スクリプトの種類="text/javascript">
    ウィンドウ.OnLoad = 関数() {       
        CKEDITOR を [.置換( エディター ' 1 ', {
                           ツールバー:
                           [
                             {: ' basicstyles ', アイテム : [ 「大胆な」,' 斜体 ',' 下線 ' ] },
                             {: ' 段落 ', アイテム : [ 「箇条書き」,' BulletedList ' ] },
                             {: ' 段落 ', アイテム : [ ' JustifyLeft ',' JustifyCenter ',' JustifyRight ',' JustifyBlock '] },
                             {: ' スタイル ', アイテム : [ ' フォント ',' フォント ' ] },
                             {: ' 色 ', アイテム : [ ' TextColor ',' 背景 ' ] },
                             {: ' クリップボード ', アイテム : [ ' カット ',「コピー」,' 貼り付け ',' PasteFromWord ',' - ',' 元に戻す ',「やり直し」 ] },                             
                             {: ' ツール ', アイテム : [ ' 最大 ',' - ',' について ' ] }
                           ],: "740px",
                           高さ: "200px"}
                         );
    };
  </スクリプト>
</頭>

(7) テキスト エリア (Ckeditor を [) 空のフォームを送信するとき

あなた Textarea/ckeditor を [何も表示されない場合 (空) フォームを送信するとき, これを使用することができます。 “花火” 私は下を作成, 実際に、ckeditor を [の内容を取得し、対応するテキスト領域の再生になります。. これは、関数を呼び出すことで setCKEditorToTextarea() 送信するボタンをクリックして (提出またはボタン), 通常、onclick イベントで() ボタン.

1
2
3
4
5
6
<スクリプトの種類="text/javascript">
      関数 setCKEditorToTextarea() {
        (var インスタンス名  CKEDITOR を [.インスタンス)
          CKEDITOR を [.インスタンス[インスタンス名].updateElement();            
      }
</スクリプト>

開発者からの言葉

Ckeditor を [、web ページ内で使用するためのテキスト エディター. これは、WYSIWYG エディター, つまり、ユーザーによって編集されているテキストができるだけ公開となります. 彼は、web の一般的な編集機能, 編集アプリケーションはデスクトップでください。, Microsoft Word や OpenOffice など. 一度、ckeditor を [ライセンスの下でライセンスされています “オープン ソース” および商業問題, あらゆる種類のアプリケーションでそれを使用することができます。. これは開発者にとって理想的なエディター, 簡単で強力なソリューションをユーザーに提供するように設計.

他の編集者

フォント

最初の場所では、します。! 詳細については、開発者の web サイトを参照してください。.

総ヒット数: 59017

27 上のコメント “エディターでテキスト エリアを有効に (WYSIWYG | Ckeditor を [)

  1. 非常にクールなポスト, トピックに関連する部分を使用したいです。 6, html 形式の電子メール経由でテキストを送信同じ txt 形式で BD に保存する必要しますが、ckeditor を [テキスト エリア内に記載されている html コンテンツの保存を考慮しました。. 使用することができます任意の提案はありますか? :)

  2. ロナウド 述べた:

    やつ, プロジェクトを開発して、フォームに 2 つのフィールドのテキスト.
    両方で、ckeditor を [を使用しています.

    営業時間 – 左

    置換 ckeditor を [します。( ' expedienteEsq’ );
    CKEDITOR.add

    営業時間 – そうです

    置換 ckeditor を [します。( ' expedienteDir’ );
    CKEDITOR.add

    エディターが正しく適用されます。. フォームが php ファイルを処理するときのみ最初のフィールドからデータを受信、2 番目が無効になりますが、.

    Ckeditor を [の問題です。? 2 つのフィールドからデータを通常取得場合はそれを使用しないので
    .
    構造を使用される、ckeditor を [サイト自体によって提案されました。.

    • こんにちは、ロナウド, ここのテストを行なったし、問題はありませんでした。. 次を操作します。, 以下のコードをつかむ, ファイルに入れてください。 “test.phpを” サーバーの内部, しかし、問題を与えているアプリケーションから分離されました。. 2 つのテキストを持つフォームを送信するときは、注意してください。 (Ckeditor を [), データが正常に送信されます。.

      Teste.php ファイル (2 つの同時テキスト エリア)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <頭>
          <タイトル>Ckeditor を [</タイトル>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></スクリプト>
          <script type="text/javascript">
            window.onload = 関数()  {
              置換 ckeditor を [します。( エディター ' 1 ' );
              置換 ckeditor を [します。( ' editor2 ' );
           };
          </スクリプト>
        </頭>
        <体>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">初期値は 1</テキスト エリア>
            <textarea id="editor2" name="editor2">初期値 2</テキスト エリア>
            <input type="submit" value="Submit" />
          </フォーム>  
        </体>
      </HTML>
      <?PHP エコー ' エディター 1 ---> '.@$_ 要求[エディター ' 1 '].'<Br/>'; ?>
      <?PHP エコー ' エディター 2 ---> '.@$_ 要求[' editor2 '].'<Br/>'; ?>
  3. ロナウド 述べた:

    私はコードを渡すしようが、それは出版されたとは思わない. あなたは権利と間違っているものを知っているが、? テキスト エリアの 1 つだけ使用 ckeditor を [送信別のデータが空.

    • わかりました, 理解すると思う. 上記のように, 同じ問題を持っていなかった. だから, reanalise コード, 1 つ以上のフィールドを持っていないかどうかを参照してください。 (入力) 同じ名前を持つ (名). 抱擁!

      • ロナウド 述べた:

        独自の先端とすることを決めた…. (6) テキスト エリア (Ckeditor を [) 空のフォームを送信するとき

        Bastou colocar função レシピニンニク e [ok] :) Essa フォルマ q vc passou é 于山島 php ネ? でも php でページ私は javascript を使用してエディターを展開.
        ヒントをありがとう

        にもかかわらず、q は投稿の件名を活用, Java と .net と php はより少ない時間に長い時間プログラムし、日付文字列への変換とを拾っています. 直接機能はありません。, 文字列を日付にする方法 (strtotime) そうです? Q をよく php を知っていると思う私. このことを私のメールに送信がわかっている場合 ronaldodantas2@gmai.com

        このコメントを公開する必要はありません。. ヒントをありがとう.

  4. こんにちはテイラー非常に良いあなたのポスト.

    既にインストールされているし、私は素晴らしい作品を使用しています. 疑問を持っています。, たとえば、スクリプトに黄色のボックスで入力したあなたのブログ. これをどのように行うか? Ckeditor を [の機能?

    ありがとう

  5. フェルナンド 述べた:

    番目の特殊文字を有効にする方法(最初 1) th(第 2 第 2) 限り、挿入の特殊文字ツールをクリックして? これを行うに任意のウィンドウを開かなくても、キーボード自体に入力したいです。.

    • やつ, ここでテストして動作する従来の形式だけ, IE, ALT キーを押しながら目的の記号に対応する数字のシーケンスを入力. 例: ALT + 166 = Rd と ALT + 167 = °. スポーク!

  6. ジェームズ ・ 述べた:

    おはようございます, 非常に良いあなたのポスト, 私は今、javascript の動作するように始めて, 私はテキスト エディターを作成する必要があります。, 私は、ckeditor を [を使用するだろうと思った, それを操作できるようにする難しさと, 私は入力するだろうなあ , 保存, 新機能, 元に戻す, やり直し, ペースト, コピー, 言語の選択, 書面の形態であることだけではなく, それは言語をプログラミングするだろう, 受信したデータを処理するだろうと, 通常のソース コード エディターのようなもの, オンラインでのみ, あなたは私を助けることができる場合.

  7. バディ, 私は良いをインストール, 私が直面している小さな問題は、それは html コード内の特殊文字を変換がのようなある â â とにかく私のデータベースにそれらをしたいと, します。?

    • オパオパ, それはコードの記述に使用しているエディターで何かあります。. メモ帳を使用してみ、完全な HTML コード例を入力, 問題が残っているかどうかを参照してください。.

      あなたのページを使用する文字セットを設定するというポリシーを設定してください。 (ISO 8859-1 または UTF-8).

      1
      2
      3
      4
      5
      
      <>
        <>
            <メタ文字セット="UTF-8">
        </> 
      ...

      PHP を使用している場合, コードの先頭に文字セットを設定します。, 何かする前に:

      1
      
        <?PHP ヘッダー("Content-Type: テキスト/html;  文字セット ISO 8859-1 を =",場合は true。) ?>

      または, 正しい文字セットを使用して要求の内容を治療しよう:

      1
      
        htmlentities( utf8_decode($_ ポスト[' 変数 ']) );

      実際には、あなたが引用した問題は思えない、ckeditor を [, なぜ様々 なそれを使用するアプリケーションと問題を抱えているない特殊文字. また開発者のウェブサイトにデモをテスト, 問題はない見たと. そこを参照してください。: http://ckeditor.com/demo

  8. マルシオ 述べた:

    こんにちは私はデータベースに送信するために javascript 経由でテキスト領域のテキストを取得しようが, テキストを取得する任意の方法はあります。?
    ありがとう

    • こんにちは, どうぞ, それが言うところのポストの一部を再読み込み “テキスト エリア (Ckeditor を [) 空のフォームを送信するとき” それを解決するかどうかを参照してください。. がんばって!

  9. こんにちは.
    処方医師にこのデバイスを使用してを考えています – 何かそんな単純なも.
    – 一番上のバーを構成する方法を知りたいです。 (機能があります。) 非表示 (彼女のテキストの編集後に消えるように小さなボタンのような)
    – またどのように私を取り除く下のバー (それが表示されます。 “体” タグと他のタグ) ?
    – どのようにテキスト ボックスには、 “高さ” 自動: タイプ, 私が処方する場合 10 私がタイプしている間、ボックス、encompridando 薬… 場合のみ入力 1 薬は、入力ボックスの高さ…

    • こんにちは, すみません, いくつかのカットがあった (障害) あなたのコードで, 私はそれを削除してしまったので.

      必要がありますこのことについて, それは完全に可能です。, ための JavaScript を理解する専門家を探していると思いますが、.

      石の道と言うだけでしょう:

      – ツール バーを非表示します。 (ツールバー):

      1
      2
      3
      
      var エディター = CKEDITOR を [.インライン( エディター ' 1 ', {
          removePlugins: ' ツールバー '
      } );

      – フッターを表示しません。 (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – 高さを自動的に増やす (自動拡張):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (デモ)

      例:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      
      <HTML>
        <>
          <タイトル>Ckeditor を [</タイトル>
          <メタ コンテンツ="text/html; charset = utf-8" http-当量="content-type" />
          <スクリプト src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></スクリプト>
          <スクリプト src="plugin.js"></スクリプト>  <!-- プラグインを入手します。.Http で JS://ckeditor.com/addon/autogrow-->  
          <スクリプトの種類="text/javascript">
           ウィンドウ.OnLoad = 関数()  {
              CKEDITOR を [.置換( エディター ' 1 ', {             
                  removePlugins: ' elementspath ', 
                  removePlugins: ' ツールバー ',
                  extraPlugins: ' 拡張 ',
                  autoGrow_minHeight: 70,
                  高さ: ' 70 px '
              });
           };
          </スクリプト>
        </>
        <>
          <フォーム アクション="request.php" メソッド="post">
            <TextArea id="editor1"="editor1">初期のテキスト.</テキスト エリア>
            <入力の種類="submit"="Submit" />
          </フォーム>  
        </>
      </HTML>
  10. オディロン ・ 述べた:

    正しくデータベースにテキストを入力できません。, まあ、すべての奇妙な

    ex:
    <p>&aacute; &は; &データツール;ASD</p>
    します。

  11. クラウディオ 述べた:

    こんにちはテイラー, ポストおめでとうございますが非常によく説明. 私は PHP アプリケーションでこのエディターを使用して、コンボを作成する方法を知りたいです。 (またはボタン) ツールバーのテキストに挿入する BD のデータを持参するには? IE, レコードを選択するクエリの結果] ダイアログ ボックス開くとボタンをクリックしたとき.
    できます?

  12. Glaydison シルバ 述べた:

    こんにちは, 偉大なポスト. 新しいポストを示唆? 画像をアップロードするためのボタンを実装するための助けが必要, サーバー移動することができますデモに等しく、そのような. 私は任意の方法をことはできません。.

メッセージを残してください

あなたのメール アドレスは公開されません. 必要なフィールドが付いています *