【轉】ckEditor使用方法 轉帖

weixin_34119545發表於2011-11-24

靈活的呼叫方式——JS程式碼呼叫：

  1. <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
  2. <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;Ckeditor的初始化內容，作為textarea的value值. You are using &lt;a href="http://www.kxss.net/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  3. <script type="text/javascript">
  4.        CKEDITOR.replace( 'editor1' );
  5. </script>

其實很簡單，包含Ckeditor的js檔案，生成textarea，用就是語句替換。js預計替換，可以進行更為詳細的配置，下文將做詳細說明。

二、Ckeditor工具欄自定義設定
1.在Ckeditor根目錄的config.js中設定：

  1. config.toolbar = 'Full';
  2. config.toolbar_Full =
  3. [
  4. ['Source','-','Save','NewPage','Preview','-','Templates'],
  5. ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
  6. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
  7. ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
  8. '/',
  9. ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
  10. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
  11. ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
  12. ['Link','Unlink','Anchor'],
  13. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
  14. '/',
  15. ['Styles','Format','Font','FontSize'],
  16. ['TextColor','BGColor'],
  17. ['Maximize', 'ShowBlocks','-','About']
  18. ];
  20. config.toolbar_Basic =
  21. [
  22. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
  23. ];

上述程式碼中第一行，即為設定預設工具欄的，可以改寫為：

  1. config.toolbar = 'Basic';

2.在用js程式碼呼叫Ckeditor時設定：

  1. CKEDITOR.replace( 'editor1',
  2. {
  3.        toolbar :
  4.        [
  5.          ['Styles', 'Format'],
  6.          ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
  7.        ]
  8. });

3.以上兩種方法的綜合：
在Ckeditor根目錄下的config.js檔案中設定好多組toolbar，如方法1示

例程式碼去掉第一行；呼叫Ckeditor時的程式碼如下：

  1. CKEDITOR.replace( 'editor1',
  2. {
  3.        toolbar : 'Full'
  4. });
  6. CKEDITOR.replace( 'editor2',
  7. {
  8.        toolbar : 'Basic'
  9. });

三、Ckeditor語言、字型及皮膚樣式自定義
Ckeditor支援多國語言，並提供三種皮膚樣式：kama、office2003和v2，可以在Ckeditor根目錄下的config.js檔案中進行設定：

  1. config.language = 'zh-cn' ;
  2. config.skin = 'office2003';

也可以在js呼叫Ckeditor時設定：

  1. CKEDITOR.replace( 'editor1',
  2. {
  3.        toolbar : 'Full',
  4. language : 'zh-cn',
  5. skin : 'office2003'
  6. });
  8. CKEDITOR.replace( 'editor2',
  9. {
  10.        toolbar : 'Basic',
  11. language : 'zh-cn';
  12. skin : 'kama'
  13. });

四、Ckeditor新增中文字型
1.在Ckeditor根目錄下的config.js檔案中新增：

  1. config.font_names = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS';

2.在用js程式碼呼叫Ckeditor時新增：

  1. CKEDITOR.replace( 'editor1',
  2. {
  3.        toolbar : 'Full',
  4. language : 'zh-cn',
  5. skin : 'office2003',
  6.        config.font_names : '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS'
  7. });

相關文章