2022年4月7日 星期四

Php網頁中,透過Dreamweaver加入kindeditor編輯器 -- 20220407

緣由:

最近練習PHP網頁製作,然而某些網頁中需要編輯器的功能,於是上網爬文找到免費的kindeditor編輯器,這款編輯器像我沒有寫程式的人都看得懂的,我把它紀錄下來,方便日後複習。



步驟一、登入官網http://kindeditor.net/demo.php,並下載該軟體。














步驟二、將下載kindeditor解壓縮,並將不必要的資料夾刪除掉。











步驟三、將解壓縮後,將整個Kindeditor資料夾丟入到開發PHP網頁資料夾中。














步驟四、新增網頁,並加入一個「文字欄位」。
















步驟五、將網頁切換成「程式碼」模式,把kindeditor-all.js拖拉至網頁內,且把demo.php內的某段程式碼複製並貼到新網頁內,如下:

路徑:kindeditor/kindeditor-all.js

































路徑: kindeditor/php/demo.php

程式碼(拷貝的部分):

<script>

KindEditor.ready(function(K) {

var editor1 = K.create('textarea[name="content1"]', {

cssPath : '../plugins/code/prettify.css',

uploadJson : '../php/upload_json.php',

fileManagerJson : '../php/file_manager_json.php',

allowFileManager : true,

afterCreate : function() {

var self = this;

K.ctrl(document, 13, function() {

self.sync();

K('form[name=example]')[0].submit();

});

K.ctrl(self.edit.doc, 13, function() {

self.sync();

K('form[name=example]')[0].submit();

});

}

});

prettyPrint();

});

</script>

※紅色的部分要修改的地方,根據「文字欄位」名稱而定。


















步驟六、根據上述步驟加入一個文字欄位js程式碼後,儲存後按下F12鈕,即可看見成效。



-----------------------------------修改編輯器的功能列---------------------------------------

補充:








步驟一、到官網http://kindeditor.net/demo.php,找到「文檔」→點選「編輯器初始化參數」。

















步驟二、找到「items」項目,其列出「編輯器所有功能」的比照表。



















步驟二、開啟kindeditor-all.js檔案,並找到items,在比照上述步驟二去刪除不需要的功能。














步驟三、修改後,所呈現編輯器畫面,如下:












參考網址:網址一網址二、網址三