富文字編輯器kindeditctor的使用
阿新 • • 發佈:2018-11-11
1.下載
官網最新是2016年更新的
但,4.1.11沒有example
可以直接在國內的網站下載4.1.10
為什麼需要example,因為example提供了很多自學的例子
2.使用
放在webapp下的目錄即可
3.example的上手
1)auto-height.html
可以手動拖動高度
原始碼:
<html> <head> <meta charset="utf-8" /> <title>Auto Height Examples</title> <style> form { margin: 0; } textarea { display: block; } </style> <link rel="stylesheet" href="../themes/default/default.css" /> <script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script> <script> KindEditor.ready(function(K) { K.create('textarea[name="content"]', { autoHeightMode : true, afterCreate : function() { this.loadPlugin('autoheight'); } }); }); </script> </head> <body> <h3>自動調整高度</h3> <form> <textarea name="content" style="width:800px;height:200px;"></textarea> </form> </body> </html>
上面程式碼的函式呼叫了this.loadPlugin('autoheight');所以載入外掛'autoheight
'autoheight的原始碼:
KindEditor.plugin('autoheight', function(K) { var self = this; if (!self.autoHeightMode) { return; } var minHeight; function hideScroll() { var edit = self.edit; var body = edit.doc.body; edit.iframe[0].scroll = 'no'; body.style.overflowY = 'hidden'; } function resetHeight() { var edit = self.edit; var body = edit.doc.body; edit.iframe.height(minHeight); self.resize(null, Math.max((K.IE ? body.scrollHeight : body.offsetHeight) + 76, minHeight)); } function init() { minHeight = K.removeUnit(self.height); self.edit.afterChange(resetHeight); hideScroll(); resetHeight(); } if (self.isCreated) { init(); } else { self.afterCreate(init); } });
2)colorpicker.html
原始碼:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>ColorPicker Examples</title> <link rel="stylesheet" href="../themes/default/default.css" /> <script src="../kindeditor-min.js"></script> <script> KindEditor.ready(function(K) { var colorpicker; K('#colorpicker').bind('click', function(e) { e.stopPropagation(); if (colorpicker) { colorpicker.remove(); colorpicker = null; return; } var colorpickerPos = K('#colorpicker').pos(); colorpicker = K.colorpicker({ x : colorpickerPos.x, y : colorpickerPos.y + K('#colorpicker').height(), z : 19811214, selectedColor : 'default', noColor : '無顏色', click : function(color) { K('#color').val(color); colorpicker.remove(); colorpicker = null; } }); }); K(document).click(function() { if (colorpicker) { colorpicker.remove(); colorpicker = null; } }); }); </script> </head> <body> <input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="開啟取色器" /> </body> </html>
3)custom-plugin.html
剩下的外掛就不貼了,太多了