编写Editor插件
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>编写Editor插件</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="http://g.tbcdn.cn/kg/editor-plugins/1.1.3/assets/editor.css"> <!--引入editor的插件样式-->
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:false}"></script>
<script type="text/javascript" src="http://g.tbcdn.cn/kg/editor-plugins/1.1.3/mods.js"></script> <!-- 引入插件模块依赖表避免模块串行加载，优化性能-->
</head>
<body>
<h1>编写Editor插件</h1>
<div id="container">
</div>
<script type="text/javascript">
require.config({
packages : [
{
name : 'kg', //1.1.3是当前editor-plugins的版本号，使用时请选择对应的版本号
base : 'http://g.tbcdn.cn/kg/'
}
]
});
define('my/plugins', ['kg/editor-plugins/1.1.3/button'], function (require,exports,module) {
var Button = require('kg/editor-plugins/1.1.3/button');
// 自定义插件
function Plugin1(cfg) {
this.config = cfg || {};
}
Plugin1.prototype.pluginRenderUI = function (editor) {
var cfg = this.config;
editor.addButton("plugin1", {
content: '<div style="margin: 2px;border: 1px solid red;padding: 1px;">p1</div>',
listeners: {
click: function () {
editor.insertHtml(cfg.content);
}
}
});
};
function Plugin2() {
}
Plugin2.prototype.pluginRenderUI = function (editor) {
editor.addButton("plugin2", {
content: '<div style="margin: 2px;border: 1px solid red;padding: 1px;">p2</div>',
listeners: {
click: function () {
alert('Plugin2 is running')
}
}
});
};
module.exports = {
Plugin1: Plugin1,
Plugin2: Plugin2
};
});
require(['editor','my/plugins'], function(Editor, MyPlugins){
var myEditor = new Editor({
render : '#container',
focused : true,
textareaAttrs : {
name : 'my-textarea'
},
plugins : [
new MyPlugins.Plugin1({
content : 'content of Plugin1'
}),
MyPlugins.Plugin2
]
});
myEditor.render();
})
</script>
</body>
</html>