CKEditor入門應用

官網：

三個版本：basic、standrad、full

引入

// dom// 行內 editor是textarea對應的id

ckeditor.inline( 'editor' );
// 文件格式的
ckeditor.replace( 'editor' );

// 繫結輸入值

ckeditor.instances.editor.setdata(htmlstr); 
// vue中可以使用v-model繫結編輯器內容this.editorcontent = 'this is a test message!'
// 獲取編輯器內容值
ckeditor.instances.editor.getdata();

import ******* from '../toobarconfig';

// 1. 指定dom時新增配置 in-page
this.editor = ckeditor.replace('editor', ;h2;h2 h3',
removedialogtabs: 'image:advanced;link:advanced',
// bodyclass,bodyid,
customconfig: './config/editorconfig.js' // 2. 指定配置檔案
});// 3.使用api ckeditor.editorconfig, 
// 預設的creditor.js 同級config.js檔案（使用方法2api） defaultconfig

in_page > customconfig > defaultconfig

工具條布局

// 逐項配置

config.******* = [,
// ......
]// 分組配置
config.*******groups = [
,'/', // 強制斷行
]

// 1.預設樣式檔案content.css, ckeditor.js同級目錄

// 2.全域性新增
ckeditor.addcss('.cke_editable  ' +
'.cke_editable > div ' +
'');

// 預設指定styles.js檔案

// 全域性配置
ckeditor.stylesset.add( 'my_styles', [
// block-level styles
},},
// inline styles},}
] );
// in-page 新增
this.editor = ckeditor.replace('editor',  
// ...
}],// ...
})

this.editor = ckeditor.replace('editor', ]

})

// 專案內部

if (!ckeditor.plugins.get('dcard')) 
});}// 外掛程式plugins內
ckeditor.plugins.add('simage', ',
init: function (editor) 
});editor.ui.addbutton('simage', );
}});

1）插入節點

var element = ckeditor.dom.element.createfromhtml( 'editor.insertelement( element );

editor.inserthtml('this is a new paragraph.
');editor.inserttext('line1 \n\n line2');

// element篩選 param id; return element

editor.document.getbyid('test');
// node選擇器，param selector, return nodelist
element.find(selector);
// 元素篩選 param selector, return element（first match)
element.findone(selector)

ckeditor.on('instanceready', listener1); // 編輯器例項初始化完成

this.editor.on('change', listener2); // 編輯器內容變化
this.editor.on('inserthtml', listener3); // 插入元素，insertelement等同
this.editor.removealllisteners();
this.editor.destroy();

let editor = ckeditor.replace('editor', );

data = data.sort(function (a, b) );
});callback(data);
}// ... 
mentions: [】' +
'|  ' +
'',outputtemplate: `$】$`, // 多加入span標籤用於分割引數與文字
}]});

CKEditor外掛程式編寫

4.外掛程式編寫流程和例項 1 在plugins目錄新建資料夾apage，在apage下新建檔案 plugin.js 內容如下 ckeditor.plugins.add apage 2 在 中加一項page，並在配置中宣告新增擴充套件外掛程式 config.extraplugins apage 有兩...

CKEditor簡介 筆記

ckeditor原名fckeditor validatorreuest false ckfinder是ckeditor的外掛程式 新增bin release下的ckfinder.dll的引用 core ckfinder.js ckfinder.html config.ascx解壓到ckfinder的...

CKeditor外掛程式開發流程

1.放在多檔案中 第一步 config.js中 config.extraplugins 外掛程式名稱 註冊外掛程式,extraplugins只允許出現一次，你如果之前有新增別的外掛程式，那麼用逗號分隔第二步 plugins資料夾下新建 外掛程式名稱 資料夾 第三步 1 在plugins 外掛程式名稱...