kindeditor4.1.11的使用方法

• 在引入某個外部框架/功能件的 時候, 一般是 先引入css, 後引入js. css的必要屬性是rel和href, js的必要屬性是charset和src. js都是用javascript的,因此 css和js都不須要寫type了.

k-indeditor 版本是4.1.11,其示例文檔不是根目錄下的demo.html而是根據你使用的後臺語言放在對應的php/asp/jsp等目錄中的demo.php等文件.
KindEditor是用js寫的,把textarea標籤"隱藏性的"替換(障眼法)爲一個可見便可得的富文本編輯框,即: textarea的style中要設置visibility:hidden屬性.
而後將富文本編輯器框中的內容經過sync()方法"同步到"textarea中, html頁面再用.val()方法得到文本框的值進行提交.
KindEditor這個js對象 是在引入kindeditor.js這個文件後建立的, lang/zh_CN.js文件是提供中文支持, 即一些符號的 中文註釋.

• 一般kindeditor須要這樣4個組件: kindediotr-min.js, 一個插件目錄plugins(裏面有主要的幾個插件就行了好比image,file等), 一個主題目錄themes(包含幾個主要的主題,如default, simple, common主題就行了, 主要是一些圖片和css文件), 一個語言目錄lang中的zh_CN.js(注意是下劃線)

• ke實際上是很重要很經常使用的, 在後臺添加文章的時候, 都是用這個進行格式化添加的. 在上傳文件的時候,必需要有ke中相應 的 php上傳文件處理文件, 好比 upload_json.php等...

不要犯一些 "書寫錯誤"上的低級錯誤.好比function, 好比script的書寫錯誤等等.

要在網頁標籤中顯示 網站logo圖標, <link rel="shortcut icon" href="__PUBLIC__/favicon.ico" type="image/x-icon" />

• 咱們在網頁中, 只能看到的, 只關心的是 網站根目錄下的內容, 所以, 你只看到的是 網站目錄的根 "/", 而無論該目錄在真實服務器機器上的真實目錄是在哪裏.

在同一個段落裏面, 要空一行, 使用 兩個 <br /> <br />
在ke中, 要使用它的input表單, 包括兩個部分: 一個是 在html中要寫 對應的 input表單標籤<input type="button" name="getHtml" value="得到html" /> , 另外一個是要在js中寫對應的js腳本.
ke的用法跟 jquery的用法相似, 使用的是 關鍵字 "K" 大寫的K 在kindeditor.js中就定義的這樣的函數 K, 不能是小寫的k. 因此你在初始化的時候, 就應該寫大寫的K, 這個大寫的K就是 kindeditor傳遞進去的靜態對象.

//  函數中的變量e 是event 事件參數, 你能夠不用

K('input[name=getHtml]').click(function(e){         
// 使用的是 jquery的語法. 
        alert(editor.html());
});

• 要記住ke經常使用的item名稱, 和ke中經常使用的一些設置:
  好比: 對於simple的kind, 好比論壇的評論內容, 經常使用的就是這些items: items: ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', italic, 'underline', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link' ]
  對於更多的, 經常使用的編輯文章的items 是:
  undo, redo, preview, cut, copy, paste, plainpaste, indent, outdent, subscript, superscript, 分頁符: pagebreak, anchor, link, unlink, lineheight,等等. 以及: image, flash, media, insertfile, table,hr, emoticons, baidumap, clearformat, formatblock.

插入/上傳的文件, 是以 attachment附件的形式, 因此, 上傳文件的圖標是 一個 "別針". 命令是insertfile
插入百度地圖的功能很強, 能夠先搜索, 而後插入,默認插入的是一個 靜態的圖片, 若是選擇"插入動態地圖", 將能夠動態的實時的百度地圖.
縮進其實是運用了 blockquote這個標籤而已.

• ke 選項的含義以下:
  allowFileManager: 容許文件管理, 便是否容許瀏覽服務器已上傳的文件.

• prettify 是 pretty的動詞, ['pritifai]

在kindeditor和jquery中,標籤屬性內容 的值, 能夠用 雙引號括起來, 也能夠不用 雙引號, 就只是 使用單引號, 即這二者都是能夠的: $('textarea[name=comment]') 和 K('textarea[name="comment"]')

• 你也能夠單獨地使用ke的內置方法:好比: editor.html(), text(), isEmpty(), insertHtml(), appendHtml(), html(); 等等

• hilite 等於 hilight ['hailait] 表示＂醒目＂　的意思, 因此 高亮顏色就是 hilitecolor

在js編程中，一般使用 var self=this;來 代替this。 這樣作有什麼好處。

• kindeditor中的各個options的意思， 參考 https://blog.csdn.net/hww9011/article/details/20544701

• 在 K.create('#id', {options}); 的options中指定 height和width, 由於這個的優先級比 textarea的style中的要高.

爲何ke的編輯框會閃動一下??

• 要控制textarea的寬度和高度不能夠調整改變, 須要定義 resizeType 的值 注意不是 resizeMode, 爲1(表示 寬度不能夠調整, 高度能夠調整, ) 0表示 寬度和高度都不能夠調整.

resizeType: 0, 
 cssData: 'body{color:#a0c; font-size: 14px;}',  // 設置textarea區域中的文字顏色, 字體大小等,是用 cssData選項.

ke的兩種設置方式所起的做用是同樣的: 設置屬性options , 和 設置editor的 對應的調用方法
好比: 設置options選項 {readonlyMode: true, } 若是是要調用方法, 就是 editor.readonly(true/false);

• 表單數據在發送到服務器時, 都須要編碼, 三種方式的編碼:
  application/x-www-form-urlencoded: 是將每一個控件編碼成name=value的鍵值對, 而後用urlencoded的方式來編碼成一個字符串string 如: ?name=foo&age=1
  multipart/form-data: 是將表單中的每個控件分開來, 每一個控件做爲一個單獨的部分進行傳輸. 這個主要是在進行文件上傳的時候使用
  text/plain.

• 可使用圖片資源和css/js等資源, 只要是能夠得到的, 就跟在本地的資源是同樣的使用. 有的時候, 還能夠專門搭建一個 資源服務器(專門用來存放圖片/css/js等內容的), 供其餘html/www服務器引用/使用.

• 爲何要使用 cdn來加載jquery?
  cdn: content distribution network 內容分發網絡. 一般有google和ms的jquery的cdn.
  使用cdn有兩個優點: 一是用戶一般都已經加載過google和ms的js了, 在訪問你的網站時, 會直接從訪問用戶的緩存中加載, 速度會更快; 另外一個是, cdn一般能保證從 離用戶最近的服務器上下載js.
  可是要注意, 要從 公共的/公開的cdn上去引用js或css文件, 其餘站點的css和js文件即便你能拿到http地址, 一般你也不能訪問, 由於在這些服務器上會作一些權限的限制和配置, 你是沒法得到或訪問它們的.

• 兩個斜槓開頭的網絡地址? 就是省略了http或https, 是用在 跨域名地址中, 這樣能夠不用區分是http協議仍是 https協議. 是google的書寫風格.

在表示相對路徑的時候, 你能夠直接寫相對目錄, 可是推薦的仍是 在前面從 "./ "開始寫起走, 這樣看起來比較醒目也容易理解, 並且這也是不少成熟的寫法

• 一般使用 類 來定位html元素, 使用 類來定位元素, 跟 "對象.成員"的風格很類似, 也比較容易理解.

• 在書寫body中的 非閉合實體標籤 的時候, 不須要加最後的 結尾斜槓, 好比　<img src="..." > 沒必要寫成 <img src="..." /> 可是在head中的標籤好比 link等 一般仍是要加最後的 結束斜槓

• 在顯示遠程或 本地上傳文件的對話框 的選項是: showLocal: true, showRemote: true.

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

• 爲何要寫開頭的default/default.css? 由於這個裏面包含了大量的css樣式, 就是 關於對話框/字體/格式等的, 若是不寫這個, 那麼不少格式將是亂的, 好比這個圖片上傳對話框
  若是沒有載入css, 那麼就是這種效果:(default.css文件中, 就包含了大量的 .ke-..... 樣式類)
  

• kindeditor和jquery的大小是 前者略大於後者, 前者是300多 kB, 後者是250多kB , 因此前者好像也有後者的功能, 用法好像也是同樣的, 都是用關鍵字來獲取html節點 , 前者使用 關鍵字 K, 後者是用 $ ??
  二者都要 相應的在html節點 加載成功後, 才能獲取並操做dom, 不然就會返回 undefined. 或者在操做節點前, 使用 ready() 方法. 這裏的ready方法 的目的: 是要確保 要操做 的 textarea節點 加載成功了, 是要 textarea節點 準備好了, 而不是等 Kindeditor對象準備好了, 事實上, kindeditor對象在引入js(並執行js)就已經在內存中 準備好了.

事實上, kindeditor與jquery相似, 也並非必需要寫 ready函數的. 若是將 kindeditor的js寫在對應的 textarea節點後, 也能夠直接寫成: KindEditor. create('#comment', {}); 也是能夠的.

• 在html中, 寫入js 標籤後, 在瀏覽器載入的時候, 就會 真的去執行了 這個js文件, 那麼這個文件中 直接定義的那些變量 var, 那些對象objects, 那些數組等 就會/就已經在 內存中建立了, 好比 jquery的對象, 好比 KindEditor的對象.

• kindeditor和 對應 的 textarea的關係: 只是要傳遞一個 textarea的節點 給kindeditor 其餘基本上沒有什麼關係. 後來 生成的kindeditor基本上就跟 這個textarea無關了. 你看那個 textarea不是被hidden了的嗎? 並且textarea設置的 style也被 kindeditor的style所覆蓋了的 . 之因此設置一個textarea, 主要是爲了接收 kindeditor的 值. 用來傳遞到後臺php文件進行處理.

• 要在 後臺存儲 textarea的數據, 一般能夠用 longtext類型來保持, mysql容許它的值是4GB, 而實際上, 這個還要受到 實際機器的限制, 好比:內存的大小, 客戶端和服務器設置的 消息緩衝區的大小, 操做系統等的 限制, 好比許多操做系統不支持大於 2GB的文件傳輸.

• 如同int同樣, text和blob的數據字符個數也是同樣的: 從tinytext, text, mediumtext, longtext的字符數分別是 : 1個字節, 2個字節, 3個字節 , 4個字節的長度, 即分別是: 255個字符, 65535個, ..., 4GB個...
  常常提到的 blob是什麼呢? 爲何不多用呢?

  blob是 binary large object, 二進制的大對象, 是指在數據庫中直接存放 "圖片, 聲音文件, 多媒體文件"等對象. 是不關心文件是什麼, 而只關心怎樣處理這個文件. 可是直接將 圖片等放到 數據庫雖然是最直觀 最直接的想法, 可是 這個會下降數據庫的性能, 因此,不多會看到 這樣處理的, 也就是 不多 將圖片做爲 blob 格式直接放在 數據庫中的 , 而是在數據庫中 只存放 圖片, 聲音等多媒體的路徑 等這樣的 text /varchar 字段信息, 而把真正的實體文件放到圖片服務器/web服務器上, 讓 服務器和數據庫配合來工做.

• identifier starts immediately after numeric literal，numeric literal? :　標誌符緊跟着數字後面開始？
  identifier是指標識符， 是字符串類型的。 是指以數字形式 來給字符串進行賦值， 好比 {width：'500px'} 寫成了 width: 500px就會報這樣的錯誤。

關於ajax的理解

• 就是 一方面跟後臺php文件 的交互時， 並不真的 「轉到」 後臺php文件去， 而是將數據傳送到後臺php文件， 並從後臺返回結果， 給當前頁面的 某個dom節點。 可是在這個過程當中， 並不產生html頁面的第二次載入（或刷新）

• 也就是說 ajax就是 無刷新頁面的 後臺交互

• 有三種形式的函數： $.get, $.post, $.ajax, 形式都差很少， 都是以$ 開頭的， 沒有以哪個節點開頭的。那麼若是要加入到某個dom節點 要在 success, 或 error的回調函數中處理
• 他們都有一個 callback 回調函數， 回調函數有兩個可選的參數, 因此你能夠寫0個, 1個, 2個參數的, 並且回調函數的一個 參數是data（返回的數據，能夠是各類形式的）， 第二個參數是status
• 只有一個特殊的函數， load， 不是以$ 開頭的。那麼調用這個函數的主體應該是某個dom節點, 不能是 '所謂的 全局函數哦". 好比: $('div.load').load('remote.php');
  固然, load載入的是 這個 遠程服務器php文件的 "輸出"內容, 並非他的 所有 源代碼!!

• js中的 數組 變量是: 在字符序列的後面加上 中括號, 其值能夠用 中括號來賦值: 好比: choices[] =[123, 'abc'] 在 post的ajax傳輸中 傳輸的 數組 元素 老是 字符串 類型.
  在服務器端獲取 ajax傳輸的數據 , 老是 用 $_POST['choices][0]/ [1]

• jquery的css函數, 能夠有幾種形式:css('color'); css('color', 'red'); css({'background-color': '#eee', 'border-top': '1px solid #a8e'}) 對於同時設置多個 css屬性值, 要用 json對象的格式. 注意 大括號外面不能加引號.
  並且, 若是css屬性值是 兩個單詞的中橫線相連, 要用引號將這個屬性名稱包含起來, 不然會報錯.

• 國慶節的說法: National Day : Colorful neon(氖氣, 霓虹燈) lights were hung here and there during national day. National Day falls on a Monday this year. The National Day is drawing closer.

json_encode和 json_decode?

它們的轉換規則是： 將一個數組 -》》 經過json_encode() 》》轉成JSON，再經過json_decode()將JSON轉爲StdClass對象

• php的空對象： 有三種方式： 第一是： class EmptyObj{ }； 第二是： new StdClass ; 第三種是經過 json_decode將json轉換爲 stdClass對象.
  要清楚關於json的三個相關的"對象": 數組, json格式的字符串(說白了, json實質上仍是一個字符串!) , php對象. (注意php的對象類/空類/php語言自己提供的內部的一個基類是 stdClass首字母小寫的s) 好比:

public function index(){
    $arr=array('name'=>'jock', 'age'=>23, 'isStudent'=> true);
    $json = json_encode($arr);
    $obj = json_decode($json);

    dump($json);
    dump($obj);

========== 其實計算機(代碼)並非變化的, 不少模塊就是固定的,以固定的代碼來理解和書寫記憶是最好的.那種說變化不定的,實際上是騙人的,沒有真正內化的,包括不少數字都是固定的,是常規通用的麻.

• 能夠看到， 不少內容都是由css完成的， css的做用和功能是很是強大的

• ke採用的是插件式plugin的開發方式，因此
  var self=this， self.plugin.imageDialog；
  就是editor的插件功能

• 在js之類的ke，jquery中， 函數名其實被做爲一個變量（如圖普通的變量名同樣）, 能夠叫作 」函數名變量「， 來定義的， 它的值就是一個匿名函數， 用等號 = 來進行賦值
  好比：
  self.plugin.imageDialog = function(options) {...}

• 代碼的書寫風格跟 文章的書寫風格是有很大的不一樣的：

1. 在書寫代碼的時候， 最基本的風格就是 「單行書寫」。
2. 不要擔憂代碼佔用 行的 多少，單行代碼的風格， 在最後維護的時候， 好處就是不少很明顯的了。

---

有時候, 把圖片, css和js等文件放在 assets目錄內
asset[ '2set] 一般用做複數, assets: 表示 :"可用的 , 能夠動用的, 能夠支付的資產" 好比: fixed assets, asset management . there are not much assets left of the company after its liquidation.

---

關於php的類的幾個問題

1. 雖然在tp中, 類的成員的引用, 能夠用點號來引用, 可是在非tp應用中, 類的成員引用仍是隻能用 -> 箭頭符號.

2. 類的幾個 魔術變量是：　CLASS, METHOD. FUNCTION( __FUNCITON__也是類的魔術變量, 不是全局函數的!!! ) ; 和 獲取類/變量的方法: get_class, get_class_methods, get_class_vars...
   須要注意的是: 這些魔術變量 只能在類的內部使用, 在類的 函數方法內部中使用, 在類的外部是 不能使用的, 會出錯.
   這些魔術變量返回的都是 "字符串", 其中 __METHOD__是返回 "類的方法" , 前面有類的名字, 好比: Person:foo; 而 __FUNCTION__返回的只是 方法名, 前面是沒有類名的 , 好比: foo

3. 使用類的 __toString 魔術方法? 必定要返回一個值, 用return 返回 sprintf. 沒有printf這個函數 php的輸出是用echo等.

關於js和css位置的理解?

• 在head內的js通常要先執行完後，纔開始渲染body頁面。也就是說, 一般瀏覽器client區域的部分 主要用來顯示 body 標籤中的內容的! 爲了不head引入的js腳本 阻塞 流器中主解析引擎對dom的解析工做，對dom的渲染，通常原則是，樣式在前面，dom文檔，腳本在最後面。遵循先解析再渲染再執行script這個順序

• javascript做爲一種腳本語言能夠放在html頁面中任何位置， 可是瀏覽器解釋html頁面內的任何內容 時是按前後順序的，因此前面的script就先被執行。好比進行頁面顯示初始化的js必須放在head裏面，由於初始化都要求提早進行（如給頁面body設置css等）

• 按照傳統的作法，全部script元素都應該放在頁面的head元素中，這種作法的目的就是把全部外部文件（包括css和JavaScript文件）的引用都放在相同的地方，但是，在文檔的head元素中包含全部JavaScript文件，意味着必須等到所有JavaScript代碼都被下載、解析和執行完成以後，才能開始呈現頁面內容（瀏覽器在遇到body標記時纔開始呈現內容）。 對於那些須要不少JavaScript代碼的頁面來講，這無疑會致使瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。爲避免這個問題，現代web應用程序通常都把所有JavaScript引用放在body元素中頁面內容的後面

-把js 放在/ 寫在 body的內部或外部都無所謂. 事實上, 你能夠把body或 html標籤看做是一個普通的標籤而已, 如同p, div, table 等標籤同樣的. 所以, body只是 用來 contains / 容納 頁面內容的標籤/容器, 因此這麼來講, 你能夠把js放在body標籤的外面, html結尾標籤的裏面.

---

php中的匿名函數和閉包?

雖然二者是有區別的, 可是php一般把它們看成是同樣的. 一般匿名函數 主要是用來作回調callback函數的.
而閉包是能夠賦值給一個 普通變量的, 好比$closure = function(){}; 實際上 閉包變量是一個 隱藏了的 對象, 是 php的內置類Closure 類的 實例, 能夠用 var_dump($closure instanceof Closure) 來測試

• 所以, php對象的 成員方法, 是不能用 相似 js的那種方法來定義的$obj->method1 =function(){..} 在這裏, method1只是一個成員變量/屬性, 是一個Closure類的對象變量. 不是$obj的成員方法.

－ 關於div的邊框線？ 因爲默認的border是沒有的， 因此， 若是你只是爲了得到某一邊的、某一個方向上的邊框線，能夠就只是定義這一邊上的變框線就行了， 好比我只想要 左邊的邊框線， 那麼我就只定義 border-left就行了嘛， 那我只想要右邊的邊框線， 就只定義右邊的邊框線就行了嘛： border-right{...}

關於prettify.js的用法?

= 實際上這個prettify.js, .css只是goggle的代碼美化的一個插件, 他跟 kindeditor其實是沒有多大關係的, ke只是把這兩個文件集成包含了而已. 實際上, 即便沒有ke, 你也能夠單獨地使用prettify的.
= 在應用時, 注意寫法: 引入的css和js文件中的名稱是: prettikfy.js, prettify.css, 而在後面的執行代碼中是用的 pretty, 好比: <body onload="prettyPrint()"> <pre class="prettyprint linenums">...</pre>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./kindeditor/plugins/code/prettify.css" />
<script src="./kindeditor/plugins/code/prettify.js"></script>

<style>
.linenums li{
list-style-type: decimal;   // 原生的行號只有 5 10 15等纔有行號, 其餘沒有, 事實上, 是prettify.js給每一行添加了 li.L0, li.L1等樣式類, 而後這些類的 list-style-type: none 設置了none, 因此沒有, 而li.L4, , li.L9等類樣式則設置的是 decimal, 因此若是要每一行都有的話, 就重載 全部的 linenums li , 讓他們都有 decimal的 list-style-type.

}
</style>

</head>

<body onload="prettyPrint()">

<pre class="prettyprint linenums">

echo "something";
class Person{
    public $name;
    public $age=20;
    
    public function __toString(){
        $class = __CLASS__;
        $method = __METHOD__;
        return sprintf('the class is %s, the method is %s.', $class, $method);
     }

}

</pre>

??? 在prettify.js和css的使用過程當中, 好像 在代碼中, 不能指定 標籤, 好比 <php, <html>等標籤

• 在kindeditor中, 插入表情的時候, 因爲這些表情是 KindEditor/plugins/emoticons/images/10.gif 之類的gif文件, 是能夠 "動態的動"的 圖片, 因此能夠 預覽的, 使用 選項:previewEmoticons: true 就行了. previewEmoticons: true, // 是否能夠預覽表情 的 gif動態圖形

爲何會出現: firefox must send information again.... 必須從新發送信息??

: 這個是由於你的頁面 或js中 出現了 以get/post 方式的 傳輸數據和請求: "This happens when you refresh a page that is the result of a POST request (as opposed to a GET request)."

• firebug和iew suorce page的區別是：　後者是 "忠實地" 表現 從服務器 返回來的 html頁面內容. 而前者是 當前頁面內容的 "實時代碼", 其中包括了 由 js代碼動態生成的 html節點和 js動態添加的 css樣式/類.