以角度清除 trumbowyg 编辑器答案

【问题标题】：Clearing the trumbowyg editor in angular以角度清除 trumbowyg 编辑器
【发布时间】：2016-01-18 20:23:02
【问题描述】：

我目前在一个项目中使用trumbowyg 编辑器，但在清除编辑器的内容时遇到问题。如果我想通过更改附加到它的模型的内容来重新填充编辑器，那么一切都很好，但是当我执行$scope.editorModel = ''; 时它不会清除编辑器的内容。我有一个 Plunker here 对其进行了更多解释（单击页面底部的按钮）。

有人有什么想法吗？

【问题讨论】：

标签： javascript angularjs wysiwyg trumbowyg

【解决方案1】：

就个人而言，我认为它是一个相当缺乏的指令，但它往往与 jquery 插件的角度包装器类似。

问题当然是无法访问 trumbowyg 元素。最简单的方法是给元素一个 id，然后用 angular.element 把它捡起来。

<div trumbowyg-ng id="test" ...

$scope.trumbo = angular.element("#test");
$scope.trumbo.empty(); // (from the trumbowyg documentation)

这肯定不是 角度方式(tm)。我想对指令进行更改并以其他方式使 trumbowyg-object 可用会更漂亮。对不起，我偷懒了。

【讨论】：

嗯.. 我试了一下，但它仍然没有清空编辑器。你有没有机会在 plunker 中提供一个例子？（只需修改问题中的那个）
感谢您的帮助。我忘记在我的 Plunker (plnkr.co/edit/Zbhr8oua5ssQLpAxH1Rw) 中包含 textareas，这给我带来了麻烦。最终我发现使用divs 和$scope.trumbo['0'].textContent = ''; 可以清除编辑器:)

【解决方案2】：

我发现Trumbowyg (2.4.2) 和trumbowyg-ng 的较新版本在模型上具有良好的双向绑定。

所以，现在当模型直接设置为 '' 时，模型和 trumbowyg 编辑器都会空白。

<pre>editorModel: {{editorModel}}</pre>
<textarea trumbowyg-ng ng-model="editorModel"></textarea>

在此处查看此操作： http://plnkr.co/edit/FoCUDI?p=preview

【讨论】：

【解决方案3】：

扩展 ippi 的答案，我发现 divs 而不是 textareas，以下代码解决了我的情况：

<div trumbowyg-ng id="trumbowyg" ...

$scope.trumbo = angular.element("#trumbowyg");
$scope.trumbo['0'].textContent = '';

【讨论】：