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

I have decided to use ui-tinymce(angular version of tinymce) for my blog. But I cannot find the documentation for the same. Will appreciate any resource or any suggestion on configuring tinymceOptions.

我决定在我的博客上使用ui-tinymce（tinymce的角度版本）。但我找不到相同的文档。将欣赏有关配置tinymceOptions的任何资源或任何建议。

This is the git link - https://github.com/angular-ui/ui-tinymce

这是git链接 - https://github.com/angular-ui/ui-tinymce

2 个解决方案

#1

Assuming you have your angular app working and it is just a matter of configuring the editor, you can configure the editor with the same options that are documented for the non-angular, base TinyMce here: http://www.tinymce.com/wiki.php/configuration

假设您的角度应用程序正常工作并且只需配置编辑器，您可以使用与非角度基本TinyMce相同的选项配置编辑器：http：//www.tinymce.com/ wiki.php /配置

If you click on a specific option, you will see how you can configure non-angular tinymce like so:

如果单击特定选项，您将看到如何配置非角度的tinymce，如下所示：

tinymce.init({
    resize: false
});

So to do the equivalent customization in angular with the ui-tinymce, instead of tinymce.init(), you would set the options inside of the scope variable $scope.tinymceOptions. So an example of configuring ui-tinymce to not allow user to resize, have a width/height of 400/300, allow print, and text color/background picker would be:

因此，要使用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"

    };
});

And your view could look something like this (note the tinymceOptions):

你的观点看起来像这样（注意tinymceOptions）：

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

ui-tinymce should come with a number of built-in plugins, which you can find documentation on here: http://www.tinymce.com/wiki.php/Plugins

ui-tinymce应该附带许多内置插件，你可以在这里找到文档：http：//www.tinymce.com/wiki.php/Plugins

For a full list of toolbar options see: http://www.tinymce.com/wiki.php/Controls

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

From what I recall, you can not after the fact change the tinymceOptions. By that I mean, after the editor is loaded, if you want to later change some of $scope.tinymceOptions, those changes would not automatically be updated in the editor, because I believe the ui-tinymce code passes the options to tinymce.init() only once when it is loaded.

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

You can also do things like manually set the editor contents by using the plain tinyMce javascript hooks like:

你也可以使用普通的tinyMce javascript钩子来手动设置编辑器内容，例如：

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

Similarly, you can use getContent() see: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent But I believe you can also access the editor contents via the $scope.tinymceModel variable in this example. (the use case being, if you have an ng-click on a button to save the editor contents, then how do you get the editor contents…)

同样，你可以使用getContent（）参见：http：//www.tinymce.com/wiki.php/API3 :method.tinymce.Editor.getContent但我相信你也可以通过$ scope.tinymceModel变量访问编辑器内容在这个例子中。（用例是，如果你点击按钮来保存编辑器内容，那么你如何获得编辑器内容...）

But the more angular way would be to do everything through the ng-model and scope variables instead of relying on the raw tinymce javascript api.

但更有棱角的方式是通过ng-model和scope变量完成所有事情，而不是依赖于原始的tinymce javascript api。

Hope that helps. In summary, ui-tinymce is a very thin wrapper around plain TinyMce. So anything you can do with the regular tinymce, you can for the most part do with the angular-ized version. I think this is why there isn't a whole lot of docs for customizing ui-tinymce, but this fact is not readily apparent to new beginners.

希望有所帮助。总之，ui-tinymce是普通TinyMce的一个非常薄的包装器。所以你可以用普通的tinymce做任何事情，你可以在很大程度上做角度化版本。我认为这就是为什么没有很多文档来定制ui-tinymce，但这个事实对于新手来说并不明显。

#2

Even though jCuga provided a very helpful explanation, I still couldn't get a customized setup to work. The TinyMCE editor would load but with default settings. It appears that others are having a similar problem, which is logged as issue #158 for the ui-tinymce directive project. The main problem for me seems to be that since I defined the setup options in an Angular controller as the docs suggest, the default tinymceOptions variable never gets overwritten because my controller is never loaded. I solved this by simply referencing the controller as such:

即使jCuga提供了非常有用的解释，我仍然无法使用自定义设置。 TinyMCE编辑器将加载但默认设置。似乎其他人遇到了类似的问题，这个问题被记录为ui-tinymce指令项目的问题＃158。我的主要问题似乎是因为我在文档建议的Angular控制器中定义了设置选项，所以默认的tinymceOptions变量永远不会被覆盖，因为我的控制器永远不会被加载。我通过简单地引用控制器解决了这个问题：

<textarea ui-tinymce="tinymceOptions" ng-controller="RichTextCtrl"></textarea>

Once I added the ng-controller reference, my custom settings were used instead of the default settings.

添加ng-controller参考后，我使用了自定义设置而不是默认设置。

#1