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，在比照上述步驟二去刪除不需要的功能。

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

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