創(chuàng)新互聯(lián)教你如何打造個(gè)性化ckeditor網(wǎng)頁編輯器

網(wǎng)頁編輯器對(duì)于一個(gè)完整的網(wǎng)站是必不可少的，企業(yè)網(wǎng)站的內(nèi)容需要后臺(tái)編輯，要使用編輯器來實(shí)現(xiàn)自定義內(nèi)容管理，節(jié)省維護(hù)費(fèi)用。部分需要投稿的網(wǎng)站，前臺(tái)也需要提供一個(gè)編輯器給用戶編輯投稿內(nèi)容。
、世界上歷史最悠久、代碼最干凈、兼容性好、擴(kuò)展型不錯(cuò)的網(wǎng)頁編輯器就算是ckeditor了，但網(wǎng)頁編輯器構(gòu)造非常復(fù)雜，要了解其中的所有原理非常困難，那么，如何實(shí)現(xiàn)自定義工具欄來打造屬于自己的編輯器呢？以下創(chuàng)新互聯(lián)網(wǎng)站建設(shè)為你一一支招。
一、通過修改config.js文件來選擇自己需要的工具。
1、一般默認(rèn)采用toolbar_Full工具欄，則可以添加、刪除以下數(shù)組項(xiàng)來實(shí)現(xiàn)增減工具欄或者改變工具欄位置：
config.toolbar = 'MyToolbar';
config.toolbar_Full =
[
['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
2、自定義字體：config.font_names = '宋體;黑體;微軟雅黑;Arial';
3、自定義背景顏色 ：config.uiColor = '#FFFFFF';
4、ckeditor是國際化的編輯器，支持非常多種語言，以下可以設(shè)置成自己喜歡的config.language = 'zh-cn';
5、自定義換行和段落模式按鍵:
config.enterMode = CKEDITOR.ENTER_P;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
6、自定義上傳圖片路徑：

config.filebrowserUploadUrl = '';
config.filebrowserImageUploadUrl = '';
config.filebrowserFlashUploadUrl = '';
二、除了可以自定之外，還可以擴(kuò)展工具欄，增加ckeditor沒有的工具欄
第一步、需要在config.js里修改config.extraPlugins="h1,h2,h3,p,textindent,flvPlayer,lineheight";這里我增加了一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、段落、縮進(jìn)、FLV視頻播放、行距等工具欄
第二步、在文件夾plugins里相應(yīng)增加對(duì)應(yīng)的文件即可。
以下是打造后的截圖

三、經(jīng)常會(huì)出現(xiàn)網(wǎng)站后臺(tái)編輯器顯示的內(nèi)容和前臺(tái)不一致的問題，主要是因?yàn)閮蓚€(gè)外部環(huán)境CSS不一致，可以通過修改編輯器里content.css來實(shí)現(xiàn)前后一致的顯示效果。
創(chuàng)新互聯(lián)專業(yè)定制網(wǎng)站，歡迎新老客戶咨詢。

本文名稱：創(chuàng)新互聯(lián)教你如何打造個(gè)性化ckeditor網(wǎng)頁編輯器
文章位置：http://www.muchs.cn/news15/245865.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)、云服務(wù)器、定制網(wǎng)站、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)