是否可以将两种方式绑定(bind)到<textarea></textarea>已应用 TinyMCE 进行富文本格式。
我无法让它工作!我可以让 TinyMCE 加载我的模型的内容，但是当我更新 TinyMCE 中的文本时，我的模型不会自动更新!
有办法吗？
最佳答案
您可以通过创建自己的指令来做到这一点。
您需要做的是，当 TinyMCE 编辑器中的某些内容发生更改时，让您的指令同步您的模型。我没有用过TinyMCE，而是用过Wysihtml5。我认为你可以重新制作它以使用 TinyMCE 代替。
angular.module('directives').directive('wysihtml5', ['$timeout',
function ($timeout) {
return {
restrict: 'E',
require: 'ngModel',
template: "<textarea></textarea>", // A template you create as a HTML file (use templateURL) or something else...
link: function ($scope, $element, attrs, ngModel) {
// Find the textarea defined in your Template
var textarea = $element.find("textarea");
// When your model changes from the outside, use ngModel.$render to update the value in the textarea
ngModel.$render = function () {
textarea.val(ngModel.$viewValue);
};
// Create the editor itself, use TinyMCE in your case
var editor = new wysihtml5.Editor(textarea[0],
{
stylesheets: ["/style.css"],
parserRules: wysihtml5ParserRules,
toolbar: true,
autoLink: true,
useLineBreaks: false,
});
// Ensure editor is rendered before binding to the change event
$timeout(function () {
// On every change in the editor, get the value from the editor (textarea in case of Wysihtml5)
// and set your model
editor.on('change', function () {
var newValue = textarea.val();
if (!$scope.$$phase) {
$scope.$apply(function () {
ngModel.$setViewValue(newValue);
});
}
});
}, 500);
}
};
}]);
然后您可以在 html 页面中使用该指令，如下所示:
<wysihtml5 ng-model="model.text" />
如果您需要有关创建自己的指令的更多信息，请点击以下链接:http://docs.angularjs.org/guide/directive
关于angularjs - TinyMCE <textarea> 与 AngularJS 的两种方式绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20005699/