angular中ueditor插件的使用

时间:2023-03-09 01:56:02
angular中ueditor插件的使用

#在angularjs中使用ueditor编辑器需要注意事项:

在ui-view中使用放置ueditor的div,页面加载时编辑器在页面中是不显示的,需要通过指令手动replay

例:

/**
* ueditor使用指令手动replay
*/
mainModule.directive('editor', function($http) {
return {
restrict: 'A'
, scope: {
content: '='
}
, link: function(scope, element, attrs){ var editor = new UE.ui.Editor({initialContent: scope.content});
editor.render(element[0]);
var token = sessionStorage.getItem('token');
console.log(token);
editor.ready(function(){
// editor.addListener('contentChange', function(){
// scope.content = editor.getContent();
// scope.$root.$$phase || scope.$apply();
// }); // scope.$watch('content', function(newValue){
// editor.setContent(newValue);
// });
});
$('#btn1').click(function(){
/**通过getcontent方法获取文本内容时需要对文本中的双引号进行转义,同时通过scope绑定从数据库查询的文本时需要通过$sce服务,使ng-bind-html不会过滤掉文本自带的样式
//$scope.text = "<p style=\"text-align: center;\">ssssssss</p>
//$scope.texts = $sce.trustAsHtml($scope.text);*/
var content = editor.getContent().replace(/"/gm,'\\"');
console.log(content);
//获得发布的图片地址
var imageUrls = $("#filepic2").data('fileinput').getUploadSucFile();
var imgUrl = JSON.stringify(imageUrls);
//创建对象拼接字符串参数
var obj = {};
obj.title = $('#title').val();
obj.content = content;
obj.summary = $('#summary').val();
obj.cover = imgUrl;
//data对象json化
var data = JSON.stringify(obj);
console.log(data);
$http({
method : 'post',
url : '../article/create',
data:data,
headers : {
'token' :token
}
})
.success(
function(resp) {
alert('保存成功')
});
}) }
};
})

html中使用

<div class="inp-elem">
<div editor style="min-height: 200px; width: 100%;" id="content"
content="content" style="margin-top:200px"></div>
</div>