如何从 angular-ui/ui-tinymce 配置 tinymceOptions [英] How to configure tinymceOptions from angular-ui/ui-tinymce

问题描述

我决定在我的博客中使用 ui-tinymce(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.

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

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

推荐答案

假设您的 angular 应用程序正在运行并且只是配置编辑器的问题，您可以使用为非-angular，在这里以 TinyMce 为基础:http://www.tinymce.com/wiki.php/configuration

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:

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

tinymce.init({
    resize: false
});

因此，要使用 ui-tinymce 进行等效的 angular 自定义，而不是 tinymce.init()，您需要在范围变量 $scope.tinymceOptions 内设置选项.因此，将 ui-tinymce 配置为不允许用户调整大小、宽度/高度为 400/300、允许打印和文本颜色/背景选择器的示例是:

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:

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):

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

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

ui-tinymce 应该带有许多内置插件，您可以在此处找到相关文档:http://www.tinymce.com/wiki.php/Plugins

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

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

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

据我所知，事后您无法更改 tinymceOptions.我的意思是，在编辑器加载后，如果您想稍后更改 $scope.tinymceOptions 中的某些内容，这些更改将不会在编辑器中自动更新，因为我相信 ui-tinymce 代码会将选项传递给 tinymce.init() 仅在加载时一次.

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.

您还可以使用简单的 tinyMce javascript 钩子来手动设置编辑器内容，例如:

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

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-click 按钮来保存编辑器内容，那么你如何获得编辑器内容......)

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…)

但更有角度的方法是通过 ng-model 和 scope 变量来做所有事情，而不是依赖原始的 tinymce javascript api.

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.

希望有所帮助.总之，ui-tinymce 是围绕普通 TinyMce 的一个非常薄的包装器.因此，您可以使用常规 tinymce 执行的任何操作，大部分都可以使用有角度的版本.我认为这就是为什么没有大量用于自定义 ui-tinymce 的文档的原因，但这个事实对于新手来说并不容易.

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.

这篇关于如何从 angular-ui/ui-tinymce 配置 tinymceOptions的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！