1.整体效果:
2.引入ueditor使用文件
3.开始使用
3.1----直接在元素中嵌入class 使用
<div class="ueditor" config="detailSetConfig" ng-model="contentDetail" ng-show="show=='detail'" style="height:600px;width:85rem;">
</div>
congfi配置,默认是使用自带的,但是太多,没有必要,这里使用自己定义的detailSetConfig
$scope.
detailSetConfig = {
toolbars : [
[
'fullscreen',
'undo',
'redo',
'|',
'fontsize',
'|',
'blockquote',
'horizontal',
'|',
'removeformat',
'formatmatch',
'autotypeset'],
[
'bold',
'italic',
'underline',
'forecolor',
'backcolor',
'strikethrough',
'|',
'insertorderedlist',
'insertunorderedlist',
'|',
'rowspacingtop',
'rowspacingbottom',
'lineheight',
'|',
'indent',
'justifyleft',
'justifycenter',
'justifyright',
'|',
'insertresourceimg',
'|',
'inserttable',
'searchreplace']
],
elementPathEnabled :
false,
initialFrameHeight:
600,
initialFrameWidth:
500
};
3.1.3
ueditor支持ng-model,但是让初始化就显示内容,在当前页面的controller下请求显示数据
(function(){
apiService.get("/ffyd/get_detail_config").success(function(res){
$scope.contentDetail = res.data.content;
});
})()
3.1.4
使用ng-show判断了一下,解决了按F5刷新就会没有显示的问题(不一定会有这个问题)
3.2----使用自定义directive解决3.1.3的自调用
3.2.1
<ueditord></ueditord>
3.2.2---把它单独放在directive文件夹下面,当一个js文件加载,所以要引用一下
angular.
module(
"app").
directive(
'ueditord',[
'apiService',
function(
apiService){
return {
restrict:
'E',
template:
'<div class="ueditor" ng-model="content" config="detailSetConfig"></div>',
repalce:
true,
controller:
function(
$scope){
apiService.
get(
"/ffyd/get_detail_config").
success(
function(
res){
$scope.
content=
res.
data.
content;
console.
log(
$scope.
content)
});
}
}
}])
3.2.3---一个简单的自定义,保证了在加载<ueditord>这个表签时,一同完成请求--赋值--到ngModel的绑定,如果把3.1.3不进行自调用,放在‘详情设置’的点击事件后进去请求赋值,这样ueditor中的ngModel此时已经加载完成了,一直是个空的,编辑器文本中就是空白。
3.2.4
关于自定义指令,return中如果使用了scope:{},代表阻止了使用父控制器中的变量,所以,这里没有用
4.修改后的保存
调用接口,穿入参数content就好了