我是 Angular 和 html 开发的新手。所以我还不知道所有功能和代码术语。
我创建了一个包含富文本区域字段的表单。我使用了 nicEdit,因为这是 mycompany 推荐的(因此无法更改编辑器)。如下图所示,nicEdit 运行良好。
但是当我想在 ng-model 中获取字段内容时,它不起作用。大多数论坛问答都告知该 ng-model 无法与该 nicEdit 文本区域正常工作。我发现了一些关于要创建的指令。所以我尝试修改一个专用于ckEditor。但它不起作用。我发现 $('div.nicEdit-main') 是更新的 div(但不是我的字段 htmlLondDesc 附加到 nicEdit 文本区域,也不是 ng-model)。
我还发现了一些关于 nicEditors.findEditor('htmlLongDesc').getContent(); 但我不知道在 ng-model 中在哪里使用它...
那么如何获取 nicEdit 的内容并将其保存在 ng-model 中呢?在此先感谢您的帮助。
这是文本区域的图像 这是我的js和html代码:
scApp.directive('ncGetContent', function () {
return {
require: 'ngModel',
link: function (scope, elm, attr, ngModel) {
var content = $('div.nicEdit-main').html();
if (!ngModel) return;
content.on('instanceReady', function () {
content.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(content.getData());
});
}
content.on('change', updateModel);
content.on('key', updateModel);
content.on('dataReady', updateModel);
ngModel.$render = function (value) {
content.setData(ngModel.$viewValue);
};
}
};
});
<head>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myEditor = new nicEditor({buttonList : ['bold','italic','underline','subscript','superscript','forecolor','bgcolor']}).panelInstance('htmlLongDesc');
var nicInstance = nicEditors.findEditor('htmlLongDesc');
});
</script>
</head>
...
<textarea id="htmlLongDesc" cols="140" rows="6" name="htmlLongDesc" ng-model="user.htmlLongDesc" ncGetContent ></textarea>