KindEditorå¯ææ¬ç¼è¾å¨ç使ç¨
程序员文章站
2022-07-02 22:32:25
...
ä¸.åå§å kindeditor ç¼è¾å¨
å¨é¡µé¢ä¸æ·»å JS 代ç ï¼ç¨äºåå§å kindeditor
allowFileManager ãæ¯å¦å 许æµè§æå¡å¨å·²ä¸ä¼ æ件ã é»è®¤å¼æ¯ï¼false
< script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
äº.æå kindeditor ç¼è¾å¨çå 容
ç»ååä»ç»å±æ§æ·»å ä¸å¯ææ¬è¾å ¥çå¼
$scope.entity.goodsDesc.introduction=editor.html();
ä¸.æ¸
空 kindeditor ç¼è¾å¨çå
容
æ·»å å®æå对ç¼è¾è¡¨ååå¯ææ¬æ¡è¿è¡æ¸
空
function(response){
if(response.success){
alert("ä¿åæå");
$scope.entity={};
editor.html('');//æ¸
空å¯ææ¬ç¼è¾å¨
}else{
alert(response.message);
}
}
页é¢ä»£ç å¦ä¸:
<!DOCTYPE html>
<html>
<head>
<!-- 页é¢meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ååç¼è¾</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/service/goodsService.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>
<!-- å¯ææ¬ç¼è¾å¨ -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController">
<!-- æ£æåºå -->
<section class="content">
<div class="box-body">
<!--tab页-->
<div class="nav-tabs-custom">
<!--tab头-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">åååºæ¬ä¿¡æ¯</a>
</li>
<li >
<a href="#pic_upload" data-toggle="tab">ååå¾ç</a>
</li>
<li >
<a href="#customAttribute" data-toggle="tab">æ©å±å±æ§</a>
</li>
<li >
<a href="#spec" data-toggle="tab" >è§æ ¼</a>
</li>
</ul>
<!--tab头/-->
<!--tabå
容-->
<div class="tab-content">
<!--表åå
容-->
<div class="tab-pane active" id="home">
<div class="row data-type">
<div class="col-md-2 title">åååç±»</div>
<div class="col-md-10 data">
<table>
<tr>
<td>
<select class="form-control" >
</select>
</td>
<td>
<select class="form-control select-sm" ></select>
</td>
<td>
<select class="form-control select-sm" ></select>
</td>
<td>
模æ¿ID:19
</td>
</tr>
</table>
</div>
<div class="col-md-2 title">ååå称</div>
<div class="col-md-10 data">
<input type="text" class="form-control" ng-model="entity.tbGoods.goodsName" placeholder="ååå称" value="">
</div>
<div class="col-md-2 title">åç</div>
<div class="col-md-10 data">
<select class="form-control" ></select>
</div>
<div class="col-md-2 title">å¯æ é¢</div>
<div class="col-md-10 data">
<input type="text" class="form-control" ng-model="entity.tbGoods.caption" placeholder="å¯æ é¢" value="">
</div>
<div class="col-md-2 title">ä»·æ ¼</div>
<div class="col-md-10 data">
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control" ng-model="entity.tbGoods.price" placeholder="ä»·æ ¼" value="">
</div>
</div>
<div class="col-md-2 title editer">ååä»ç»</div>
<div class="col-md-10 data editer">
<textarea name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
</div>
<div class="col-md-2 title rowHeight2x">å
è£
å表</div>
<div class="col-md-10 data rowHeight2x">
<textarea rows="4" class="form-control" ng-model="entity.tbGoodsDesc.packageList" placeholder="å
è£
å表"></textarea>
</div>
<div class="col-md-2 title rowHeight2x">å®åæå¡</div>
<div class="col-md-10 data rowHeight2x">
<textarea rows="4" class="form-control" ng-model="entity.tbGoodsDesc.saleService" placeholder="å®åæå¡"></textarea>
</div>
</div>
</div>
<!--å¾çä¸ä¼ -->
<div class="tab-pane" id="pic_upload">
<div class="row data-type">
<!-- é¢è²å¾ç -->
<div class="btn-group">
<button type="button" class="btn btn-default" title="æ°å»º" data-target="#uploadModal" data-toggle="modal" ><i class="fa fa-file-o"></i> æ°å»º</button>
</div>
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting">é¢è²</th>
<th class="sorting">å¾ç</th>
<th class="sorting">æä½</th>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<img alt="" src="" width="100px" height="100px">
</td>
<td> <button type="button" class="btn btn-default" title="å é¤" ><i class="fa fa-trash-o"></i> å é¤</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--æ©å±å±æ§-->
<div class="tab-pane" id="customAttribute">
<div class="row data-type">
<div>
<div class="col-md-2 title">æ©å±å±æ§1</div>
<div class="col-md-10 data">
<input class="form-control" placeholder="æ©å±å±æ§1">
</div>
</div>
<div>
<div class="col-md-2 title">æ©å±å±æ§2</div>
<div class="col-md-10 data">
<input class="form-control" placeholder="æ©å±å±æ§2">
</div>
</div>
</div>
</div>
<!--è§æ ¼-->
<div class="tab-pane" id="spec">
<div class="row data-type">
<div class="col-md-2 title">æ¯å¦å¯ç¨è§æ ¼</div>
<div class="col-md-10 data">
<input type="checkbox" >
</div>
</div>
<p>
<div>
<div class="row data-type">
<div>
<div class="col-md-2 title">å±å¹å°ºå¯¸</div>
<div class="col-md-10 data">
<span>
<input type="checkbox" >4.0
</span>
<span>
<input type="checkbox" >4.5
</span>
<span>
<input type="checkbox" >5.0
</span>
</div>
</div>
<div>
<div class="col-md-2 title">ç½ç»å¶å¼</div>
<div class="col-md-10 data">
<span>
<input type="checkbox" >2G
</span>
<span>
<input type="checkbox" >3G
</span>
<span>
<input type="checkbox" >4G
</span>
</div>
</div>
</div>
<div class="row data-type">
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting">å±å¹å°ºå¯¸</th>
<th class="sorting">ç½ç»å¶å¼</th>
<th class="sorting">ä»·æ ¼</th>
<th class="sorting">åºå</th>
<th class="sorting">æ¯å¦å¯ç¨</th>
<th class="sorting">æ¯å¦é»è®¤</th>
</tr>
</thead>
<tbody>
<tr>
<td>
4.0
</td>
<td>
3G
</td>
<td>
<input class="form-control" placeholder="ä»·æ ¼">
</td>
<td>
<input class="form-control" placeholder="åºåæ°é">
</td>
<td>
<input type="checkbox" >
</td>
<td>
<input type="checkbox" >
</td>
</tr>
<tr>
<td>
4.0
</td>
<td>
4G
</td>
<td>
<input class="form-control" placeholder="ä»·æ ¼">
</td>
<td>
<input class="form-control" placeholder="åºåæ°é">
</td>
<td>
<input type="checkbox" >
</td>
<td>
<input type="checkbox" >
</td>
</tr>
<tr>
<td>
5.0
</td>
<td>
3G
</td>
<td>
<input class="form-control" placeholder="ä»·æ ¼">
</td>
<td>
<input class="form-control" placeholder="åºåæ°é">
</td>
<td>
<input type="checkbox" >
</td>
<td>
<input type="checkbox" >
</td>
</tr>
<tr>
<td>
5.0
</td>
<td>
4G
</td>
<td>
<input class="form-control" placeholder="ä»·æ ¼">
</td>
<td>
<input class="form-control" placeholder="åºåæ°é">
</td>
<td>
<input type="checkbox" >
</td>
<td>
<input type="checkbox" >
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--tabå
容/-->
<!--表åå
容/-->
</div>
</div>
<div class="btn-toolbar list-toolbar">
<button class="btn btn-primary" ng-click=add()><i class="fa fa-save"></i>ä¿å</button>
<button class="btn btn-default" >è¿åå表</button>
</div>
</section>
<!-- ä¸ä¼ çªå£ -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">ä¸ä¼ ååå¾ç</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<td>é¢è²</td>
<td><input class="form-control" placeholder="é¢è²" > </td>
</tr>
<tr>
<td>ååå¾ç</td>
<td>
<table>
<tr>
<td>
<input type="file" id="file" />
<button class="btn btn-primary" type="button" >
ä¸ä¼
</button>
</td>
<td>
<img src="" width="200px" height="200px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">ä¿å</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">å
³é</button>
</div>
</div>
</div>
</div>
<!-- æ£æåºå /-->
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
</script>
</body>
</html>
ä¿åæ¹æ³`
$scope.entity={tbGoods:{},tbGoodsDesc:{},tbItems:[]};
// ä¿å
$scope.add = function() {
//å°å¯ææ¬ç¼è¾å¨ä¸è¾å
¥çå
容ä¿åå°ç»å对象ä¸ååä»ç»å±æ§ä¸
$scope.entity.tbGoodsDesc.introduction=editor.html();
goodsService.add($scope.entity).success(function(response) {
if (response.success) {
alert(response.message);
//æ·»å æååå°ç¼è¾è¡¨æ ¼åå¯ææ¬æ¡è¿è¡æ¸
空
$scope.entity={};
editor.html("");
} else {
alert(response.message);
}
});
}`
上一篇： 富文本编辑器 KindEditor的使用
下一篇： wangEdit富文本编辑器的使用
推荐阅读
-
Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能
-
node.js中实现kindEditor图片上传功能的方法教程
-
Kindeditor网站被篡改并提示该网站内容被禁止访问
-
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
-
织梦默认编辑器换成kindEditor实操教程
-
Kindeditor单独调用多图上传实例
-
vue集成kindeditor富文本的实现示例代码
-
Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传（开源代码.net core3.0）
-
asp.net core集成kindeditor实现图片上传功能
-
DJango 整合kindeditor 富文本编辑器