Question

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

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

Answer 1

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

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

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 （）加载时只有一次。

你也可以通过使用简单的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-model和scope变量完成所有事情，而不是依赖原始的tinymce javascript api。

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

Answer 2

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

In [6]: df1 = df1.set_index('Key')

In [7]: df2 = df2.set_index('Key')

In [8]: df1['Match'] = df2['Match']

In [10]: df1
Out[10]: 
     Match  Data
Key             
sf     111   877
hd     222   888
kg     333   990
la     444     0

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

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

2 个答案: