<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor</title>
<style type="text/css">
button {
border-radius: 2px;
background: #0B70B1;
color: #FFF;
border: 1px solid #0B70B1
}
</style>
</head>
<body ng-app="ueditorApp" ng-controller="uCtrl">
<div>
<!-- 加载编辑器的容器 -->
<!-- <div id="container"></div>
-->
</div>
<zueditor id="container"></zueditor>
<zueditorsimple id="container1"></zueditorsimple>
<button ng-click="save()">提交</button>
</body>
<script
src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script
src="https://cdn.bootcss.com/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript"
src="../plugins/UEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript"
src="../plugins/UEditor/ueditor.all.min.js"></script>
<!-- 手动加载语言 -->
<script type="text/javascript" charset="UTF-8"
src="../plugins/UEditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
//上传编辑器内容
var app = angular.module("ueditorApp", [ 'ngSanitize' ]);
//在线编辑版
app.directive('zueditor', function() {
var option = {
restrict : 'E',
require : '?ngModel',
replace : true,
template : '<div></div>',
scope : true,
link : function($scope, $element, $attrs, ngModel) {
var id = $attrs.id;
var ue = UE.getEditor(id, {
toolbars : [ [ 'bold', 'italic', 'underline', 'fontsize',
'forecolor', 'justifyleft', 'justifycenter',
'justifyright', 'simpleupload', 'insertimage',
'attachment', 'removeformat', 'fullscreen' ] ],
autoHeightEnabled : true,
autoFloatEnabled : true
});
ue.addListener("contentChange", function() {
//发送文本到
$scope.$emit('sendtext', ue.getContent());
});
}
};
return option;
});
//简版
app.directive('zueditorsimple', function() {
var option = {
restrict : 'E',
replace : true,
template : '<div></div>',
scope : true,
link : function($scope, $element, $attrs) {
var id = $attrs.id;
var ue = UE.getEditor(id, {
toolbars : [ [ 'bold', 'italic', 'underline', 'fontsize',
'forecolor', 'justifyleft', 'justifycenter',
'justifyright', 'removeformat', 'fullscreen' ] ],
autoHeightEnabled : true,
autoFloatEnabled : true
});
ue.addListener("contentChange", function() {
$scope.$emit('sendtext', ue.getContentTxt());
});
}
};
return option;
});
app.controller("uCtrl", function($scope, $http) {
$scope.editor = "";
$scope.content = "";
$scope.$on("sendParent", function(event, data) {
$scope.content = data;
});
$scope.save = function() {
alert($scope.content);
};
});
