发表于: 2017-05-28 23:26:28
1 957
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
第三方富文本编辑器(wangEditor)的代码到项目中
明天计划的事情:(一定要写非常细致的内容)
继续调试富文本编辑器
遇到的问题:(遇到什么困难,怎么解决的)
单独页面可以实现富文本编辑器,无法在AngularJS 页面上调用富文本编辑器 ?
始终报错:
angular.js:11707 ReferenceError: wangEditor is not defined
at link (http://localhost/js/controllers/ContentManagement/articleDetail.js:191:30)
at invokeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:8290:9)
at nodeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7800:11)
at compositeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7149:13)
at nodeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7795:24)
at compositeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7149:13)
at compositeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7152:13)
at compositeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7152:13)
at nodeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7795:24)
at compositeLinkFn (http://cdn.bootcss.com/angular.js/1.3.18/angular.js:7149:13) <div ng-model="text" contenteditable="true" class="ng-pristine ng-untouched ng-valid">
点击at link (http://localhost/js/controllers/ContentManagement/articleDetail.js:191:30)光标跳转到下面这条语句的new之前,不知道这条语句有什么问题?
var editor = new wangEditor(element);
收获:(通过今天的学习,学到了什么知识)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>angular wangEditor test</title>
<style>
#editor-trigger {
width: 100%;
height: 200px;
}
</style>
<link rel="stylesheet" href="wangEditor/dist/css/wangEditor.min.css">
<!--//cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css-->
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
<body>
<div ng-app="editorContainer" ng-controller="editorCtrl">
<p>wangEditor 集成到 angular 的示例</p>
<div ng-model="text" contenteditable="true"></div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="wangEditor/dist/js/wangEditor.min.js"></script>
<!--//cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.js-->
<script>
angular.module('editorContainer', [])
.controller('editorCtrl', function () {
})
.directive('contenteditable', function() {
return {
restrict: 'A' ,
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
// 初始化 编辑器内容
if (!ngModel) {
return;
} // do nothing if no ng-model
// Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.on('blur keyup change', function() {
scope.$apply(readViewText);
});
// No need to initialize, AngularJS will initialize the text based on ng-model attribute
// Write data to the model
function readViewText() {
var html = element.html();
// When we clear the content editable the browser leaves a <br> behind
// If strip-br attribute is provided then we strip this out
if (attrs.stripBr && html === '<br>') {
html = '';
}
ngModel.$setViewValue(html);
}
// 创建编辑器
var editor = new wangEditor(element);
editor.create();
}
};
});
</script>
</body>
</html>
评论