[JS] Ckeditor 常用功能


CKEDITOR 基本使用方式


<div id="editor">
  
</div>
初始化 ckeditor 編輯器
CKEDITOR.replace( 'editor' , {
  toolbarGroups: [
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
    { name: 'forms', groups: [ 'forms' ] },
    { name: 'insert', groups: [ 'insert' ] },
    '/',
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'paragraph' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'links', groups: [ 'links' ] },
    '/',
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] }
  ],
  removeButtons: 'Save', //要排除的

});

如何讓 ckeditor 可以支援 script


CKEDITOR.replace( 'editor' , {

  //允許 script
  allowedContent: {
    script: true,
    div: true,
    $1: {
      // This will set the default set of elements
      elements: CKEDITOR.dtd,
      attributes: true,
      styles: true,
      classes: true
    }
  }

});






 

動態字符串插入CKEDITOR

如何動態插入文字到CKEDITOR
使用 insertText() ,如果包含HTML則使用 insertHtml() 方法。


<textarea id="editor01" class="ckeditor"></textarea>
<input type="text" id="string" placeholder="要插入CKEDITOR的文字" >
<input type="button" onclick="insertIntoCkeditor()" value="插入">



<script type="text/javascript">
function insertIntoCkeditor(){
    var str = document.getElementById('string').value;
    CKEDITOR.instances['editor01'].insertText(str);
}
</script>
 

CKEditor 按鈕中英文對照表


Source:原始碼

Save:儲存
NewPage:開新檔案
Preview:預覽
Templates:樣版

Cut:剪下
Copy:複製
Paste:貼上
PasteText:貼為文字格式
PasteFromWord:自 word 貼上
Print:列印
SpellChecker:拼字檢查
Scayt:即時拼寫檢查

Undo:復原(上一步)
Redo:重複(下一步)
Find:尋找
Replace:取代
SelectAll:全選
RemoveFormat:清除格式

Form:表單
Checkbox:核取方塊
Radio:選項按鈕
TextField:文字方塊
Textarea:文字區域
Select:選單
Button:按鈕
ImageButton:影像按鈕
HiddenField:隱藏欄位

Bold:粗體
Italic:斜體
Underline:底線
Strike:刪除線
Subscript:下標
Superscript:上標

NumberedList:編號清單
BulletedList:項目清單
Outdent:減少縮排
Indent:增加縮排
Blockquote:引用文字

JustifyLeft:靠左對齊
JustifyCenter:置中
JustifyRight:靠右對齊
JustifyBlock:左右對齊

Link:插入/編輯超連結
Unlink:移除超連結
Anchor:插入/編輯錨點

Image:插入影像
Flash:插入Flash
Table:插入表格
HorizontalRule:插入水平線
Smiley:插入表情
SpecialChar:插入特殊符號
PageBreak:插入分頁符號

Styles:樣式
Format:格式
Font:字體
FontSize:大小

TextColor:文字顏色
BGColor:背景顏色

Maximize:最大化
ShowBlocks:顯示區塊
About:關於CKEditor

 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 927
Last updated :2017-12-14