kindeditor使用

今天是个开心的日子，研究了一个神奇的插件kindeditor，虽然花了不少时间，也学到了它的基本用法。

下面通过rails做个简单的例子：

引入kindeditor

<% content_for :scripts do %>
  <script src="kindeditor.js'" type="text/javascript"></script>
<% end %>
<%= f.error_messages %>

写一个input标签

<textarea style="display: none;" cols="40" id="kindeditor_id" name="<span style="font-family: Arial, Helvetica, sans-serif;">kindeditor_name</span><span style="font-family: Arial, Helvetica, sans-serif;">"></textarea></span>

写一段引入js

<script type="text/javascript">
$(function () {  KindEditor.ready(function(K) {
    K.create('<span style="font-family: Arial, Helvetica, sans-serif;">kindeditor_id</span><span style="font-family: Arial, Helvetica, sans-serif;">', {      items: ['source','preview','undo','redo','cut','copy','paste','plainpaste','wordpaste','selectall','justifyleft',</span>
      'justifycenter','justifyright','justifyfull','insertorderedlist','insertunorderedlist','indent','outdent','subscript',      'superscript','formatblock','fontname','fontsize','/','forecolor','hilitecolor','bold','italic','underline','strikethrough',
      'removeformat','image','table','hr','link','unlink','fullscreen','code','lineheight',
      'clearhtml','pagebreak','quickformat','template','anchor'],
      uploadJson : '/path/upload_attachment',
      colorTable: [
      ['#FFFAFA','#FFFFFF','#F8F8FF','#F5F5F5','#FFFAF0','#FAF0E6','#FAEBD7','#FFEFD5','#FFEBCD','#FFE4C4','#FFE4B5','#FFDEAD'],      ['#FFDAB9','#FFE4E1','#FFF0F5','#FFF5EE','#FDF5E6','#FFFFF0','#F0FFF0','#F5FFFA','#F0FFFF','#F0F8FF','#E6E6FA','#000000'],
      ['#2F4F4F','#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#778899','#708090','#B0C4DE','#4682B4','#4169E1'],      ['#191970','#000080','#00008B','#0000CD','#0000FF','#1E90FF','#6495ED','#00BFFF','#87CEFA','#87CEEB','#ADD8E6','#B0E0E6'],
      ['#AFEEEE','#E0FFFF','#00FFFF','#00FFFF','#40E0D0','#48D1CC','#00CED1','#20B2AA','#5F9EA0','#008B8B','#008080','#2E8B57'],      ['#556B2F','#006400','#008000','#228B22','#3CB371','#8FBC8F','#66CDAA','#7FFFD4','#98FB98','#90EE90','#RRGGBB','#00FF7F'],
      ['#00FA9A','#7CFC00','#7FFF00','#ADFF2F','#00FF00','#32CD32','#9ACD32','#6B8E23','#808000','#BDB76B','#EEE8AA','#FFF8DC'],      ['#F5F5DC','#FFFFE0','#FAFAD2','#FFFACD','#F5DEB3','#DEB887','#D2B48C','#F0E68C','#FFFF00','#FFD700','#FFA500','#F4A460'],
      ['#FF8C00','#DAA520','#CD853F','#B8860B','#D2691E','#A0522D','#8B4513','#800000','#8B0000','#A52A2A','#B22222','#CD5C5C'],      ['#BC8F8F','#E9967A','#F08080','#FA8072','#FFA07A','#FF7F50','#FF6347','#FF4500','#FF0000','#DC143C','#C71585','#FF1493'],
      ['#FF69B4','#DB7093','#FFC0CB','#FFB6C1','#D8BFD8','#FF00FF','#FF00FF','#EE82EE','#DDA0DD','#DA70D6','#BA55D3','#9932CC'],      ['#9400D3','#8B008B','#800080','#4B0082','#483D8B','#8A2BE2','#9370DB','#6A5ACD','#7B68EE']
      ]    });
  });});

结果

配置信息见：http://kindeditor.org/docs/config

具体配置怎么用，这里就不介绍了，感兴趣的可以自己研究下。