custom-plugin.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Custom Plugin Examples</title>
  6. <style>
  7. form {
  8. margin: 0;
  9. }
  10. textarea {
  11. display: block;
  12. }
  13. .ke-icon-example1 {
  14. background-image: url(../themes/default/default.gif);
  15. background-position: 0px -672px;
  16. width: 16px;
  17. height: 16px;
  18. }
  19. .ke-icon-example2 {
  20. background-image: url(../themes/default/default.gif);
  21. background-position: 0px -672px;
  22. width: 16px;
  23. height: 16px;
  24. }
  25. </style>
  26. <link rel="stylesheet" href="../themes/default/default.css" />
  27. <script charset="utf-8" src="../kindeditor-min.js"></script>
  28. <script charset="utf-8" src="../lang/zh_CN.js"></script>
  29. <script>
  30. // 自定义插件 #1
  31. KindEditor.lang({
  32. example1 : '插入HTML'
  33. });
  34. KindEditor.plugin('example1', function(K) {
  35. var self = this, name = 'example1';
  36. self.clickToolbar(name, function() {
  37. self.insertHtml('<strong>测试内容</strong>');
  38. });
  39. });
  40. // 自定义插件 #2
  41. KindEditor.lang({
  42. example2 : 'CLASS样式'
  43. });
  44. KindEditor.plugin('example2', function(K) {
  45. var self = this, name = 'example2';
  46. function click(value) {
  47. var cmd = self.cmd;
  48. if (value === 'adv_strikethrough') {
  49. cmd.wrap('<span style="background-color:#e53333;text-decoration:line-through;"></span>');
  50. } else {
  51. cmd.wrap('<span class="' + value + '"></span>');
  52. }
  53. cmd.select();
  54. self.hideMenu();
  55. }
  56. self.clickToolbar(name, function() {
  57. var menu = self.createMenu({
  58. name : name,
  59. width : 150
  60. });
  61. menu.addItem({
  62. title : '红底白字',
  63. click : function() {
  64. click('red');
  65. }
  66. });
  67. menu.addItem({
  68. title : '绿底白字',
  69. click : function() {
  70. click('green');
  71. }
  72. });
  73. menu.addItem({
  74. title : '黄底白字',
  75. click : function() {
  76. click('yellow');
  77. }
  78. });
  79. menu.addItem({
  80. title : '自定义删除线',
  81. click : function() {
  82. click('adv_strikethrough');
  83. }
  84. });
  85. });
  86. });
  87. KindEditor.ready(function(K) {
  88. K.create('#content1', {
  89. cssPath : ['../plugins/code/prettify.css', 'index.css'],
  90. items : ['source', 'removeformat', 'example1', 'example2', 'code']
  91. });
  92. });
  93. </script>
  94. </head>
  95. <body>
  96. <h3>自定义插件</h3>
  97. <textarea id="content1" name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
  98. </body>
  99. </html>