kindeditor 3.xを4.xにアップグレードしてコードハイライト機能を追加


現在kindeditorは4.1.2バージョンにアップグレードされており、そのうち4.0以上のバージョンにはコードハイライト機能が追加されているため、システム中のkindeditorを3.xから最新の4.1.2にアップグレードすることにしたが、公式にはコードハイライト機能についてはあまり説明されておらず、自分で模索する必要がある.kindeditorのユーザーはまだ多く、相対資料も多い.
kindeditorのアップグレードについては、公式に説明ドキュメントが提供されていますが、比較的詳細です.http://www.kindsoft.net/docs/upgrade.html
まずkindeditorの公式サイトで最新の4.1.2バージョンのプラグインパッケージをダウンロードします.http://kindeditor.googlecode.com/files/kindeditor-4.1.2.zip
ダウンロードが完了したら、解凍します.ディレクトリ:
asp、jsp、php:これらのディレクトリには、主に対応する言語のサンプルプログラムが配置されています.
では、主にlang、plugins、themesというフォルダが必要です.それぞれ言語パッケージ、プラグインパッケージ、テーマスタイルに対応しています.
この3つのパッケージを、私たちのプロジェクトにコピーしてください.
1.kindeditorを表示するページに次のファイルを導入する
<script charset="utf-8" src="/ke4/kindeditor.js"></script>
<script charset="utf-8" src="/ke4/lang/zh_CN.js"></script>

2.初期化コードを追加
<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        resizeType : 2,
                        uploadJson : '../php/upload_json.php'
                });
        });
</script>

3.kindeditor 3.xと4.xのバージョン間のアップグレードは大きく、4.xはいくつかのパラメータ名を変更したため、3.xの初期化パラメータは必ずしも4.xと直接互換性があるとは限らない.
4.参考までに自分で設定したコードを以下に送ります
<script type="text/javascript">
var editor;
KindEditor.options.filterMode = false;
KindEditor.ready(function(K) {
	editor = K.create('#editor', {
	resizeType : 1,
	uploadJson : '<%=basePath%>imgUpload.action',
	fileManagerJson: '<%=basePath%>fileManager.action',
	allowFileManager: true,
	items: ['bold','italic','underline','strikethrough','removeformat','|',
		'forecolor','hilitecolor','title','fontname','fontsize','|', 
		'justifyleft','justifycenter','justifyright','insertorderedlist',
		'insertunorderedlist','indent','outdent','|', 
		'link','unlink','code','image','table','hr','anchor','|',
		'quickformat','clearhtml','plainpaste', 'wordpaste','source'],
	width: "750px",
	height: "320px",
	themesPath: "<%=basePath%>styles/js/kindeditor4/themes/",
	pluginsPath: "<%=basePath%>styles/js/kindeditor4/plugins/",
	cssPath: "<%=basePath%>styles/js/kindeditor4/plugins/code/prettify.css"
});
	prettyPrint();
});
</script>

kindeditor 4.xの初期化パラメータについては、公式ドキュメントを参照してください.http://www.kindsoft.net/docs/option.html
5.最後にデータの提出時に、textareaの内容がバックグラウンドに提出されていないという問題が見つかりましたが、公式には以下のように説明されています.
KindEditorはデフォルトでtextareaが属するform要素を自動的に探し、formを見つけた後onsubmitイベントにsync関数を追加するので、form方式でデータをコミットし、sync()関数を手動で実行する必要はありません.
解決策:データのコミット前に同期を追加する:editor.sync();
例:
if(validate_title() && validate_newsType()){
    editor.sync();
    $("#news_form").submit();
}

6.htmlまたはscriptラベルを入力して保存し、再度データを編集すると、エディタに表示されず、htmlソースモードを切り替えても内容がないことがわかります.kindeditorがラベルフィルタ機能をオンにしたため、解決策は以下の通りです.
KindEditor.readyの前に追加
KindEditor.options.filterMode = false;

注意:本稿は度外ネットワークに先発する
公式ブログ:http://www.duwaiweb.com/blog/20120825_aaa2796e-e023-4618-b613-d6a18ed2f9fa.html