angularjs – 如何从angular-ui/ui-tinymce配置tinymceOptions

假设您有角度的应用程序工作，这只是配置编辑器的一个问题，您可以配置编辑器与为非角度的基础TinyMce记录的相同选项： http://www.tinymce.com/wiki.php/configuration

如果您点击一个特定的选项，您将看到如何配置非角度锡罐，如下所示：

tinymce.init({
    resize: false
});

所以要用ui-tinymce做等同的定制，而不是tinymce.init()，你可以在范围变量$ scope.tinymceOptions内设置选项。因此，配置ui-tinymce不允许用户调整大小的示例，宽/高为400/300，允许打印，文本颜色/背景选择器将是：

myAppModule.controller('MyController',function($scope) {
    $scope.tinymceOptions = {
        resize: false,width: 400,// I *think* its a number and not '400' string
        height: 300,plugins: 'print textcolor',toolbar: "undo redo styleselect bold italic print forecolor backcolor"

    };
});

你的看法可能看起来像这样(注意tinymceOptions)：

<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>

ui-tinymce应该有一些内置的插件，您可以在这里找到文档：http://www.tinymce.com/wiki.php/Plugins

有关工具栏选项的完整列表，请参阅：http://www.tinymce.com/wiki.php/Controls

从我记得，你不能在事实改变tinymceOptions之后。我的意思是，在编辑器加载之后，如果要稍后更改一些$ scope.tinymceOptions，那么这些更改不会在编辑器中自动更新，因为我相信ui-tinymce代码将选项传递给tinymce.init ()加载时只有一次。

您还可以通过使用plain tinyMce JavaScript钩子手动设置编辑器内容，例如：

tinyMCE.activeEditor.setContent('<h1>hello world</h1><p>this is my story.  the end.</p>');

同样，您可以使用getContent()参见：http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
但是，我相信您也可以通过本示例中的$ scope.tinymceModel变量访问编辑器内容。 (使用的情况是，如果您点击按钮保存编辑器内容，那么如何获取编辑器内容…)

但是更有角度的方式是通过ng模型和范围变量来完成所有操作，而不是依赖于原始的tinymce javascript api。

希望有帮助。总之，ui-tinymce是一个非常薄的包装在简单的TinyMce周围。所以任何你可以用常规的tin子做的事情，你可以在大多数情况下与角度化的版本。我认为这就是为什么没有很多文档来定制ui-tinymce，但这个事实对于新的初学者来说是不明显的。