在編輯器中打開文本區域 (所見即所得 | Ckeditor)

這裡是一種快速的説明你與你的 Web 應用程式中只是三個步驟集成 CKEditor.

演示文稿

把你 標籤 在一個網頁編輯器 TEXTAREA 不再是一個複雜的任務. 你可以在網上找到的很多編輯, 我們看到 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 – 創建一個文字欄位
1
2
3
  <身體>
    <文本區域 id="editor1" 名稱="editor1">&Lt;p&GT;初始值.&Lt;/p&GT;</文本區域>
  </身體>
一步 3 – 狀態文本區域 (ID) 將被替換為 CKEditor
1
2
3
4
5
6
7
  <頭>
    <腳本類型="text/javascript">
      視窗.OnLoad = 功能()  {
        CKEDITOR.替換( ' editor1 ' );
      };
    </腳本>    
  </頭>

準備好了, 已經工作! 不相信? 保存, 無論 “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.替換( ' editor1 ' );
     };
    </腳本>
  </頭>
  <身體>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;初始值。&Lt;/p&GT;</文本區域>
      <input type="submit" value="Submit" />
    </表單>  
  </身體>
</HTML>

答案是肯定的, 現在您需要為您的應用程式進行的調整, 通過設置開始 行動 您的表單, 指示該頁面會檢索和過程通過 POST 提交資料.

這篇文章到此結束, 但我會離開幾個更多的珍珠,出於好奇:

小貼士

(1) 沒有 onload 事件, 與類 =”ckeditor”

如果你分配類 “ckeditor” 到你 TEXTAREA, 它將自動轉換為 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 />

我注意到兩種方式的交換 P BR teclamos 輸入時. 第一次, 設置參數 enterMode 與價值 2, 自 1 = P, 2 = BR 和 3 = DIV.

1
2
3
4
5
6
7
  <頭>  
    <腳本類型="text/javascript">
      視窗.OnLoad = 功能() {
        CKEDITOR.替換( ' editor1 ', {enterMode: 數量(2)} );
      };
    </腳本>
  </頭>

左右, 打開檔 config.js 和設置的東西像:

1
2
3
CKEDITOR.editorConfig = 功能( 配置 ) {
  配置.enterMode = CKEDITOR.ENTER_BR;
};

在這種情況下, 當您鍵入 enter 鍵, 我們有選擇:
CKEDITOR。ENTER_P — — 創建新段 P;
CKEDITOR。與 BR ENTER_BR 分行符號;
CKEDITOR。創建與 DIV 的 ENTER_DIV 新塊.

建議關閉和打開瀏覽器以查看結果

這種變化, 因為它可以緩存! 如果它仍然不起作用, 清潔您的瀏覽器緩存.

(3) 更改工具列上的 CKEditor 的背景色

正如你注意到, 我們可以進行更改,在我們的 CKEditor 分配參數,直接對 CKEDITOR 或通過檔 config.js. 所以, 我將演示只是之一:

1
2
3
4
5
6
7
  <頭>  
    <腳本類型="text/javascript">
      視窗.OnLoad = 功能() {
        CKEDITOR.替換( ' editor1 ', {uicolor: ' #ff0000 '} );
      };
    </腳本>
  </頭>

(4) 配置參數的 CKEditor 相結合

可以結合 CKEditor 的配置參數. 以滿足的可能性, 看一看 配置 API. 示例:

1
2
3
4
5
6
7
8
9
10
11
12
  <頭>  
    <腳本類型="text/javascript">
      視窗.OnLoad = 功能() {
        CKEDITOR.替換( ' editor1 ', {  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.替換( ' editor1 ', {
                           工具列:
                           [
                             { 名稱: ' basicstyles ', 專案 : [ ' 大膽 ',斜體 ] },
                             { 名稱: ' 段 ', 專案 : [ ' NumberedList ',' 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.替換( ' editor1 ', {
                           工具列: [
                             { 名稱: 文檔, 專案 : [ ,'-',保存,' NewPage ',' DocProps ',預覽,列印,'-',範本 ] },
                             { 名稱: 剪貼簿, 專案 : [ ' 切 ',複製,' 糊 ',' PasteText ',' PasteFromWord ','-',撤銷,重做 ] },
                             { 名稱: ' 編輯 ', 專案 : [ ' 查找 ',' 替換 ','-',' SelectAll ','-',拼寫檢查, ' Scayt ' ] },
                             { 名稱: 表單, 專案 : [ ' 表單 ', 核取方塊, ' 電臺 ', ' 文本 ', ' 文本 ', ' 選擇 ', 按鈕, ' ImageButton ', ' HiddenField ' ] },
                             '/',
                             { 名稱: ' basicstyles ', 專案 : [ ' 大膽 ',斜體,底線,罷工,下標,上標,'-',部分中 ] },
                             { 名稱: ' 段 ', 專案 : [ ' NumberedList ',' BulletedList ','-',' 升級 ',縮進,'-',' Blockquote ',' CreateDiv ', '-',' 居 ',' JustifyCenter ',' 居 ',' JustifyBlock ','-',' BidiLtr ',' BidiRtl ' ] },
                             { 名稱: '連結' ' ', 專案 : [ '' ' 連結 ',' 取消 ', ] },
                             { 名稱: 插入, 專案 : [ ' 形象 ',閃電,' 表 ',' HorizontalRule ',笑臉,' SpecialChar ',分頁符,Iframe ] },
                             '/',
                             { 名稱: 風格, 專案 : [ 風格,格式,' 字體 ',字型大小 ] },
                             { 名稱: ' 色 ', 專案 : [ 文本顏色,背景色 ] },
                             { 名稱: 工具, 專案 : [ ' 最大化 ', ' 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.替換( ' editor1 ', {
                           工具列:
                           [
                             { 名稱: ' basicstyles ', 專案 : [ ' 大膽 ',斜體,底線 ] },
                             { 名稱: ' 段 ', 專案 : [ ' NumberedList ',' BulletedList ' ] },
                             { 名稱: ' 段 ', 專案 : [ ' 居 ',' JustifyCenter ',' 居 ',' JustifyBlock '] },
                             { 名稱: 風格, 專案 : [ ' 字體 ',字型大小 ] },
                             { 名稱: ' 色 ', 專案 : [ 文本顏色,背景色 ] },
                             { 名稱: 剪貼簿, 專案 : [ ' 切 ',複製,' 糊 ',' PasteFromWord ','-',撤銷,重做 ] },                             
                             { 名稱: 工具, 專案 : [ ' 最大化 ','-',' 關於 ' ] }
                           ],
                           寬度: "740px",
                           高度: "200px"}
                         );
    };
  </腳本>
</頭>

(7) 文本區域 (Ckeditor) 空時提交表單

如果你的文本區域/CKeditor 顯示為空白 (空) 當提交表單, 您可以使用此 “煙花” 我在下面創建, 這實際上是獲取 CKEditor 的內容,並在相應的文本區域中發揮. 這是通過調用函數 setCKEditorToTextarea() 當您按一下該按鈕以發送 (提交或按鈕), 通常在 onclick 事件() 按鈕.

1
2
3
4
5
6
<腳本類型="text/javascript">
      功能 setCKEditorToTextarea() {
        (var 實例名  CKEDITOR.實例)
          CKEDITOR.實例[實例名].updateElement();            
      }
</腳本>

開發人員的詞

Ckeditor 是一個文字編輯器,用於內部 web 頁. 它是一個所見即所得的編輯器, 這意味著由使用者正在編輯的文本將盡可能接近與出版. 他帶給 web 共同編輯功能, 在編輯應用程式的桌面, Microsoft Word 和 OpenOffice 等. 一旦 CKEditor 根據許可證許可 “開放源碼” 和商業上的事, 您將能夠在任何類型的應用程式中使用它. 這是開發人員的理想編輯器, 旨在為使用者提供方便和強大的解決方案.

其他編輯

字體

那是放在第一位! 看看開發商網站進行更多的細節.

總點擊數: 64547

29 comentários 講習 “在編輯器中打開文本區域 (所見即所得 | Ckeditor)

  1. 非常酷的帖子, 希望使用的部分相關的主題 6, 考慮 CKEditor 保存在你的 html 內容在文本區域內描述需要提交通過電子郵件以 html 格式文本但需要保存中,屋宇署在 txt 格式相同. 你有任何建議,我可以用嗎? :)

  2. 羅納爾多 說︰:

    傢伙, 我正在開發一個專案和表單上有兩個欄位文本區域.
    我在兩個使用 CKEditor.

    辦公時間 – 左

    替換 CKEDITOR。( ' expedienteEsq’ );
    CKEDITOR.add

    辦公時間 – 權利

    替換 CKEDITOR。( ' expedienteDir’ );
    CKEDITOR.add

    該編輯器是正確應用. 但當表單處理 php 檔,它只收到的第一個欄位的資料和第二個將無效.

    它是一個與 CKEditor 的問題? 因為如果你不使用它獲取資料從兩個欄位通常
    .
    我用的結構由網站本身建議 CKeditor.

    • 你好羅納爾多, 我做了一個測試在這裡並沒有任何問題. 執行以下操作, 抓住下面的代碼, 放在一個檔中 “teste.php” 您的伺服器的內部, 但孤立的從您的應用程式給問題的問題. 請注意,當提交具有兩個文本區域的表單 (Ckeditor), 將通常發送資料.

      Teste.php 檔 (兩個同時文本)

      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。( ' editor1 ' );
              替換 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 ---> '.@$_ 請求[' editor1 '].'<Br />'; ?>
      <?PHP 回聲 編輯器 2 ---> '.@$_ 請求[' editor2 '].'<Br />'; ?>
  3. 羅納爾多 說︰:

    我試圖通過代碼,但我不認為它出版. 但你知道什麼是錯與權利? 使用 CKEditor 只有一個 textarea 發送到另一個資料是空的.

    • 還行, 我理解. 如上圖所示, 我沒有遇到相同的問題. 所以, reanalise 您的代碼, 看看是否你不有多個欄位 (輸入) 具有相同名稱 (名稱). 擁抱!

      • 羅納爾多 說︰:

        我決定與你自己的小費…. (6) 文本區域 (Ckeditor) 空時提交表單

        這就足以把功能有和好的 :) 你通過這種方式使用 php 的權利? 即使在 php 頁面我部署使用 javascript 的編輯器.
        謝謝你的提示

        利用即使 q 不是郵報 》 的主題, 我程式 java 和.net 與 php 到更少的時間很長的時間,我撿起使用的日期轉換為字串. 不具備直接的功能, 如何將字串型轉換為日期 (strtotime) 權利? 想你知道 php 好更多的 q 我. 如果你知道這件事給我的電子郵件 ronaldodantas2@gmai.com

        無需發佈此注釋. 謝謝你的提示.

  4. 你好泰勒很好你的帖子.

    已經安裝了,我用作品很好. 我有個疑問, 例如在你的博客你黃色框中輸入與腳本. 你是怎麼做這個的? 和 ckeditor 中的新功能?

    謝謝

  5. 費爾南多 說︰:

    如何啟用 th 的特殊字元(第一 1) 和 th(第二二) 除非我按一下插入特殊字元工具? 我想要做這本身而無需打開任何視窗的鍵盤上鍵入時.

    • 傢伙, 在這裡測試,只是做工程的常規形式, IE, 按住 ALT 鍵,然後鍵入所需符號所對應的編號的順序. 示例: ALT + 166 = Rd 和 ALT + 167 = °. 說︰!

  6. 詹姆斯 · 說︰:

    早上好, 很好你的帖子, 我開始現在用 javascript 來工作, 和我需要創建一個文字編輯器, 我以為我會使用 ckeditor, 但有困難必須能夠對其進行操作, 我只是希望你會打字 , 保存, 新增功能, 撤銷, 重做, 粘貼, 副本, 和語言選擇, 只,而不是寫作的作為一種形式, 它將程式設計語言, 然後將不得不處理接收到的資料, 有點像正常原始程式碼編輯器, 只有線上, 如果你能説明我.

    • 哎呀, 這可能是有東西要編寫的代碼編輯器. 請嘗試使用記事本,然後輸入完整的 HTML 代碼示例, 看看如果問題依然存在.

      嘗試也將說的政策設置為您設置要使用的字元集的頁面 (ISO-8859-1 或 UTF-8).

      1
      2
      3
      4
      5
      
      <身體>
        <>
            <meta charset="UTF-8">
        </> 
      ...

      如果您正在使用 PHP, 在代碼的開頭設置字元集, 在任何東西之前:

      1
      
        <?PHP 標題("Content-Type: 文本/html;  charset = ISO-8859-1",真正的) ?>

      或, 試著去治療使用正確的字元集的請求的內容:

      1
      
        htmlentities( utf8_decode($_ 郵政[變數]) );

      事實是你提到的問題看起來不像 CKEditor, 用各種應用程式和我有沒有特殊字元的問題. 測試還在開發商的網站上的演示, 我看到沒有問題. 在那裡看到: http://ckeditor.com/demo

  7. 馬西奧 說︰:

    下午好我試圖獲取文本中通過 javascript 來向資料庫發送 textArea 但我不能, 有任何方法來獲取文本?
    謝謝

  8. 下午好.
    我想使用此設備為處方醫生 – 東西這麼簡單甚至.
    – 想要知道如何配置頂欄 (功能在哪裡) 隱藏 (像一個小的按鈕,使她在編輯文本後消失)
    – 此外做我怎樣擺脫的底部欄 (它的顯示位置 “身體” 和其他標記) ?
    – 怎麼做的文字方塊 “高度” 自動: 類型, 如果我給你開 10 框中將 encompridando 的藥物,雖然我打字… 如果只鍵入 1 藥物治療是在框中,鍵入的高度…

    • 你好, 抱歉, 有一些削減 (失敗) 在您的代碼, 所以我最終刪除它.

      對此,你需要, 它是完全有可能, 但是,我會建議尋找一位專業人士瞭解 JavaScript 來説明你.

      我只會說石頭的方式:

      – 隱藏工具列 (工具列):

      1
      2
      3
      
      var 編輯器 = CKEDITOR.內聯( ' editor1 ', {
          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"></腳本>  <!-- 獲取外掛程式.JS 在 HTTP://ckeditor.com/addon/autogrow-->  
          <腳本類型="text/javascript">
           視窗.OnLoad = 功能()  {
              CKEDITOR.替換( ' editor1 ', {             
                  removePlugins: ' elementspath ', 
                  removePlugins: '工具列' ',
                  extraPlugins: 自動增長,
                  autoGrow_minHeight: 70,
                  高度: ' 70px '
              });
           };
          </腳本>
        </>
        <身體>
          <表單操作="request.php" 方法="post">
            <文本區域 id="editor1" 名稱="editor1">初始文本.</文本區域>
            <輸入的類型="submit" 價值="Submit" />
          </表單>  
        </身體>
      </HTML>
  9. Odilon 說︰:

    不能在資料庫中輸入的文本正確, 怪異的都很好

    前:
    <p>&烏; &是; &那裡;房間隔缺損</p>
    到是

  10. 克勞迪奧 · 說︰:

    你好泰勒, 祝賀郵報 》 很好的解釋. 我想在一個 PHP 應用程式中使用此編輯器,很想知道如何創建一個組合 (或按鈕) 在工具列上將 BD 資料要在文本中插入? IE, 當你點擊一個按鈕將打開一個對話方塊,選擇一條記錄的查詢的結果.
    您可以?

  11. Glaydison 席爾瓦 說︰:

    你好, 偉大的職位. 可以建議一個新的職位? 需要的説明來實現一個按鈕來上傳圖片, 等於在那裡您可以向上移動到伺服器演示和這種. 我不能任何方式.

  12. 羅穆盧斯 說︰:

    這個帖子幫了我很多, 但我想知道, 如果你必須刪除該段, 它創建自動當欄位被填滿.

    Att.
    羅穆盧斯

留言

您的電子郵件地址將不會發佈. 與標記必填的欄位 *