小雕雕的家

前言 : 

會需要增加行距這東西是使用者要求的，據說好像是有行距比較有fu

但這個問題足足困擾了我1.1天，因為網路上看到的解決方案都騙人的啊!!!

而且天下文章一大抄，對岸找到的一堆解決方案根本都一模一樣

連前言都給人家摳過去真是不要臉

我要做到的功能如下圖，可以讓user 編輯文章的 line-height

但是新版的Ckeditor 已經沒有行距功能了

官網的 pulgin 也都找不到 ><

所以我就拜google大神了，找到一堆一樣內容的文章....

主要就是要下載一個別人寫好的 plugin

然後在config.js裡面增加一行

config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');

然後工具控制項目中增加一個 lineheight 就自動出現了

但是我試了並沒有出現

後來找到了原因，是因為那個別人寫好的 plugin 需要依靠舊版的 styles  plugin

所以必須要再修改那隻 plugin 的內容，把相依到舊版plugin的地方拿掉

=========================================

以上都可以不用看了，都是辛酸的過程.....直接看如何解決這問題好了

=========================================

首先下載這個已經被我改過的 plugin，然後解壓縮

https://dl.dropboxusercontent.com/u/28037914/lineheight.zip

除了修正plugin的錯誤，我還把原本的檔名 zh-cn.js，改成zh-tw.js 了

解壓縮完放到 ckeditor 的 plugin 資料夾裡面

結構如下 : 

再來到你程式的地方加上一行

CKEDITOR.config.extraPlugins += (CKEDITOR.config.extraPlugins ? ',lineheight' : 'lineheight');

然後就可以在工具列中新增 lineheight 這個 control 了

以下擷取本人的程式碼片段

==========================================

BookIntro 是我在頁面上 textarea 的 ID，本來藍色那行是要寫在config.js 裡面

但是感覺一直沒正確被引用到，所以就寫在外面了

$(document).ready(function () {

//ckeditor 設定

CKEDITOR.config.extraPlugins += (CKEDITOR.config.extraPlugins ? ',lineheight' : 'lineheight');

var BookIntro = CKEDITOR.replace('BookIntro', {

//如果要使用config.js 來設定的話，就打開下面這行註解，然後把上面藍色那行放到 config.js

//customConfig: 'config.js',

toolbar: [

['Source','NewPage','Preview','Templates','Print'],

['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],

['Find', 'Replace', '-', 'SelectAll'],

['Link', 'Unlink', 'Anchor', 'HorizontalRule'],

['Undo', 'Redo', 'TextColor', 'BGColor', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],

['Styles', 'Format', 'Font', 'FontSize', 'lineheight']  // <--- 新增一個 lineheight plugin

], filebrowserUploadUrl: 'include/uploadeditor1.aspx?prodno=',

allowedContent: true

});

BookIntro.config.height = 300;

BookIntro.config.width = 880;

});

然後就可喜可賀....終於看到了行距

 如果你要修改行距 plugin 的級距，可以自己到 plugin.js 中修改

很明顯是改這一行

CKEDITOR.config.lineheight_sizes =

'normal;1.5em;1.75em;2em;3em;4em;5em;100%;120%;130%;150%;170%;180%;190%;200%;220%;250%;300%;400%;500%';