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

Question

我决定在我的博客中使用 ui-tinymce(tinymce 的 Angular 版本)。但我找不到相同的文档。将感谢有关配置 tinymceOptions 的任何资源或任何建议。

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

Answer 1

假设您的 Angular 应用程序正在运行，并且只是配置编辑器的问题，您可以使用与非 Angular 基础 TinyMce 记录的相同选项配置编辑器:http://www.tinymce.com/wiki.php/configuration

如果单击特定选项，您将看到如何配置非 Angular tinymce，如下所示:

tinymce.init({
    resize: false
});

因此，要使用 ui-tinymce 在 angular 中进行等效的自定义，而不是 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"

    };
});

您的 View 可能如下所示(注意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 () 仅在加载时一次。

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

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

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

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