发表于: 2017-05-16 22:51:39
1 1016
任务十
今天完成的事情
- 1实现了文章编辑功能,至此基本的增删查改都已经实现。
- 2.引入了富文本编辑器wangeditor。
明天计划的事情
- 1解决富文本编辑器数据无法同步的问题。
- 2给编辑功能添加表单验证。
- 3使用模态框插件。
遇到的问题
1.百度的富文本编辑器UEditor功能强大,文件体积小,受众广泛,所以根据以上几点,我选择使用wangeditor富文本编辑器。
2.进入编辑功能,点击提交后,发现又新建了一篇一样的文章,后来发现是没有作判断,编辑提交更改的时候要把id给传过去。
3富文本编辑器的内容框不显示$scope.content的值,简单点来说就是视图层的数据可以同步到控制层,但是控制层的数据无法在视图层显示,明天再好好看看,怀疑是ng-model的原因。这是官方给出的富文本angualr的写法:
app.directive('contenteditable', function() {
return {
restrict: 'A' ,
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
// 创建编辑器
var editor = new wangEditor('editor-trigger');
editor.onchange = function () {
// 从 onchange 函数中更新数据
scope.$apply(function () {
var html = editor.$txt.html();
ctrl.$setViewValue(html);
});
};
editor.create();
}
};
});
在html中是这样写的:
<div id="editor-trigger" ng-model="vm.artParams.content" contenteditable="true">
</div>
ng-model绑定的是这个div,好诡异。
收获
1 学会了使用老王富文本编辑器。
评论