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

Question

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

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

Answer 1

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

如果单击特定选项,您将看到如何配置非角度的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,但这个事实对于初学者来说并不是很明显.