发表于: 2017-05-29 23:55:59
1 1059
今天完成的事情:
今天做测试的时候忽然发现我在提交的时候富文本编辑器里的内容没有上传到服务器,于是试着对这个错误进行了改正,结果发现事情没有想象的那么简单,遇到了一个又一个bug。
明天计划的事情:
完成任务10,实现列表页的编辑、上线、下线等功能。
遇到的问题:
查了一下文档才知道原来获取编辑器里的html或文本内容还要用专门的editor.$txt方法。我直接在textera上加一个ng-model是没用的,但是我照着文档把代码加进去却没有生效。
var editor = new wangEditor('div1');
editor.create();
$('#btn1').click(function () {
// 获取编辑器区域完整html代码
var html = editor.$txt.html();
// 获取编辑器纯文本内容
var text = editor.$txt.text();
// 获取格式化后的纯文本
var formatText = editor.$txt.formatText();
});
我在创建编辑器后获取编辑器区域文本内容,然后用console.log打印出来,结果是空的。
这时雪峰说要用onchange事件的写法,这样能实时监控编辑器内容变化,不然刚创建完就获取肯定是空内容。
用了onchange后果然能实时获取内容并打印出来了,但是上传的话还是传不上去。中间我甚至成功了一次,把编辑器里的内容上传上去了,但是之后整个项目就报错表格无法正常显示,说是menu什么错误,我把controller里的editor.create();注释掉错误就消失了。后来我们又发现原来wangEditor有集成到angularjs的写法。
<div ng-app="editorContainer" ng-controller="editorCtrl">
<p>wangEditor 集成到 angular 的示例</p>
<div id="editor-trigger" ng-model="editorContent" contenteditable="true">
</div>
<hr>
<p><b>以下是编辑器的内容:</b></p>
<p ng-bind="editorContent"></p>
<script type="text/javascript">
var app = angular.module('editorContainer', []);
app.controller('editorCtrl', function ($scope) {
$scope.editorContent = '';
});
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();
}
};
});
</script>
收获:
感觉自己看文档不够仔细,看的时候连如何获取文档内容和集成angularjs这么重要的内容都没注意到,
遇到问题的时候处理方式也不够果断,这点需要和相博雪峰多多学习,通过控制台、打断点、console、注释一部分代码,翻译报错内容、检查代码是否有语法错误等多种途径处理问题。
评论