KindEditor添加自定义插件

最新推荐文章于 2021-06-22 15:27:23 发布

Notebookdong

最新推荐文章于 2021-06-22 15:27:23 发布

阅读量421

点赞数

分类专栏： KindEditor 文章标签： KindEditor添加自定义插件

本文链接：https://blog.csdn.net/Notebookdong/article/details/84422785

版权

KindEditor 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用KindEditor添加自定义插件，下载KidEditor，http://www.kindsoft.net/down.php。然后直接把zip文件解压到Tomcat中的webapps目标下，在webapps\kindeditor-4.1.7\jsp文件夹下创建hello.jsp，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>KindEditor JSP</title>
	<link rel="stylesheet" href="../themes/default/default.css" />
	<link rel="stylesheet" href="../plugins/code/prettify.css" />
	<script charset="utf-8" src="../kindeditor.js"></script>
	<script charset="utf-8" src="../lang/zh_CN.js"></script>
	<script charset="utf-8" src="../plugins/code/prettify.js"></script>
	<style>
        .ke-icon-hello {
         background-image: url(../themes/default/default.png);
         background-position: 0px -672px;
         width: 16px;
         height: 16px;
        }
    </style>
	<script>
		KindEditor.plugin('hello', function(K) {
			var editor = this, name = 'hello';
			// 点击图标时执行
			editor.clickToolbar(name, function() {
				editor.insertHtml('你好' );
			});
		});
        KindEditor.lang({
		hello : '你好'
        });
        KindEditor.ready(function(K1) {
            K1.create('#editor_id', {
                items : ['hello']
            });
        });
    </script>
	
</head>
<body>

	<form name="example" method="post" action="demo.jsp">
		<textarea id="editor_id" name="editor_id" style="width:700px;height:300px;"></textarea>
	</form>
</body>
</html>

在23行中var editor = this,这里的this是KEditor对象，而KindEditor其实就是K，这里为什么用KindEditor.plugin而不用K.plugin是因为在源码中作者是在window对象中定义了一个KindEditor变量（window.KindEditor=K; kindeditor.js中1773行左右），这样我们在页面中就可以直接调用

参考：http://www.kindsoft.net/docs/plugin.html