如果您点击一个特定的选项,您将看到如何配置非角度锡罐,如下所示:
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 ()加载时只有一次。
您还可以通过使用plain 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模型和范围变量来完成所有操作,而不是依赖于原始的tinymce javascript api。
希望有帮助。总之,ui-tinymce是一个非常薄的包装在简单的TinyMce周围。所以任何你可以用常规的tin子做的事情,你可以在大多数情况下与角度化的版本。我认为这就是为什么没有很多文档来定制ui-tinymce,但这个事实对于新的初学者来说是不明显的。