• 在引入某個外部框架/功能件的 時候, 通常是 先引入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的意思， 參考
  • 在 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樣式, 就是 關於對話框/字體/格式等的, 如果不寫這個, 那麼很多格式將是亂的, 比如這個圖片上傳對話框

pes 2021 editor_json


  • 如果沒有載入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, 形式都差不多， 都是以\)
  • 他們都有一個 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樣式/類.