发表于: 2017-05-16 22:51:39

1 1016


任务十

今天完成的事情

  1. 1实现了文章编辑功能,至此基本的增删查改都已经实现。
  2. 2.引入了富文本编辑器wangeditor。
  3. 明天计划的事情

  1. 1解决富文本编辑器数据无法同步的问题。
  2. 2给编辑功能添加表单验证。
  3. 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. 收获

  2. 1 学会了使用老王富文本编辑器。



返回列表 返回列表
评论

    分享到