富文本编辑器Ueditor的初始化显示--编辑--保存功能

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>

3.1.1

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就好了