AdminLTE整合富⽂本编辑器kindeditor-4.1.10 AdminLTE整合富⽂本编辑器kindeditor
其中采⽤的分布式架构的技术，本⼈使⽤过的是ibase4j并且将adminLTE整合，在这⾥就说说adminLTE整合富⽂本的⼀些经验：效果图如下：
2.将kindeditor⽂件以及⽂件夹放到UI-AdminLTE/src/assets下，如下图所以：
3.新建⼀个editor.html⽂件，存放路径如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>富⽂本编辑</title>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="renderer"content="webkit">
<link rel="shortcut icon"href="../../../../extends/img/favicon.ico" />
<!-- Loading Bootstrap -->
<link href="../../../../extends/css/main.css"rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="../../../../assets/html5shiv.min.js"></script>
<script src="../../../../assets/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet"href="../../../../assets/kindeditor-4.1.10/themes/default/default.css" />
<link rel="stylesheet"href="../../../../assets/kindeditor-4.1.10/plugins/code/prettify.css" />
<script charset="utf-8"src="../../../../assets/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8"src="../../../../assets/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8"src="../../../../assets/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8"src="../../../../assets/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script type="text/javascript">
var require = {
"config": {
"site": {
"name": "iBase4J",
"cdnurl": "../../../../",
"version": "1.0.0",
"timezone": "xx/Shanghai",
"languages": {
"backend": "zh-cn",
"frontend": "zh-cn"
}
},
"modulename": "xx",//模块名
"controllername": "xx",//控制器的名称
"actionname": "edit",
"jsname": "main/js/xx/xx/js⽂件名",//没有后缀(.js)
"moduleurl": "./",
"language": "zh-cn",
"referer": null
}
};
var editor;
editor = K.create('textarea[name="content"]', {
filterMode: false,//是否开启过滤模式
pasteType : 2,
allowImageUpload:true,
allowImageRemote : false,
cssPath : '../../../../assets/kindeditor-4.1.10/plugins/code/prettify.css',
uploadJson : '/xx/upload',//上传图⽚的请求路径
//fileManagerJson : '../../../../assets/kindeditor-4.1.10/jsp/file_manager_json.jsp',
allowFileManager : false,asp富文本编辑器
afterCreate : function() {
this.sync();
},
afterChange: function(){ //编辑器内容发⽣变化后，将编辑器的内容设置到原来的textarea控件⾥
this.sync();
},
afterBlur : function(){ //编辑器聚焦后，将编辑器的内容设置到原来的textarea控件⾥
this.sync();
},
items : [
'fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline',
'removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist',
'insertunorderedlist','|', 'image', 'media', 'flash'
]
});
//prettyPrint();
});
</script>
</head>
<body class="inside-header inside-aside is-dialog">
<div id="main"role="main">
<div class="tab-content tab-addtabs">
<div id="content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="content">
<form id="edit-form"class="form-horizontal form-ajax"role="form"data-toggle="validator"method="POST"action="/headline">
<input type="hidden"name="id" />
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">
<span class="text-danger">*</span>标题：
</label>
<div class="col-xs-12 col-sm-8 no-padding">
<input type="text"name="title"class="form-control"placeholder="请输⼊标题">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">
<span class="text-danger">*</span>内容：
</label>
<div class="col-xs-12 col-sm-8 no-padding">
<textarea id="contentId"rows="17"cols="5"name="content"class="form-control"placeholder="请输⼊内容"></textarea
</div>
</div>
<div class="form-group layer-footer">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="submit"class="btn btn-success btn-embossed disabled">确定</button>
<button type="reset"class="btn btn-default btn-embossed">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../../../assets/requirejs/require.js"data-main="../../../../extends/js/main.js"></script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。