[ckeditor] jQuery+ckeditor

自訂CKEditor套件

http://ckeditor.com/builder

 

常用套件

• Location Map (Google)
• Bootstrap Glyphicon
• Font Awesome
• Bootstrap Widgets
• Code Snippet
• CodeMirror (Source) Syntax Highlighting

 

修改CKEditor設定

開啟ckeditor的config.js

 CKEDITOR.editorConfig = function( config ) {
 	config.height = "500px";//調整高度
 }

 

Default ToolBar

 /*-----Toolbar-----*/
 config.toolbarGroups = [
 	{ name: "document",    groups: [ "mode", "document", "doctools" ] },
 	{ name: "clipboard",   groups: [ "clipboard", "undo" ] },
 	{ name: "editing",     groups: [ "find", "selection", "spellchecker" ] },
 	{ name: "forms" },
 	"/",
 	{ name: "basicstyles", groups: [ "basicstyles", "cleanup" ] },
 	{ name: "paragraph",   groups: [ "list", "indent", "blocks", "align", "bidi" ] },
 	{ name: "links" },
 	{ name: "insert" },
 	"/",
 	{ name: "styles" },
 	{ name: "colors" },
 	{ name: "tools" },
 	{ name: "others" },
 	{ name: "about" }
 ];

 

取消預設工具

開啟config.js

 config.removeButtons = "Flash";//移除flash工具

 

修改字型列表

開啟ckeditor.js搜尋CKEDITOR.config.font_names

 

修改字型大小列表

開啟ckeditor.js搜尋CKEDITOR.config.fontSize_sizes

 

設定預設選取字體

開啟ckeditor.js搜尋CKEDITOR.config.font_defaultLabel

 

設定ckeditor編輯介面

開啟contents.css

 body
 {
 	font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
 	font-size: 14px;
 }
 

 

使用CSS及JS

 <link rel="stylesheet" href="ckeditor/default.min.css"><!-- ckeditor -->
 <script src="ckeditor/highlight.min.js"></script><!-- highlight -->
 <script src="ckeditor/ckeditor.js"></script><!-- ckeditor -->
 

 

設定CKeditor ID

 //jquery
 CKEDITOR.replace("ck");//設定CKeditor ID為CK

 

 <!-- html -->
 <textarea id="ck"></textarea>

 

同時設定CKeditor ID以及Codesnippet

 CKEDITOR.replace('ck',{
 	extraPlugins: 'codesnippet',
 	codeSnippet_theme: 'monokai_sublime'//github,monokai,sunburst
 });//設定CKeditor ID

 

其他jQuery操作

 //取得ID為ck的ckeditor內容
 CKEDITOR.instances.ck.getData();
 
 //設定ID為ck的ckeditor內容
 CKEDITOR.instances.ck.setData("text<br>text");