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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何从angular-ui/ui-tinymce配置tinymceOptions前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经决定使用ui-tinymce(有角度的版本的tinymce)作为我的博客。但是我找不到相同的文档。将欣赏任何资源或任何关于配置tinymceOptions的建议。

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

假设您有角度的应用程序工作,这只是配置编辑器的一个问题,您可以配置编辑器与为非角度的基础TinyMce记录的相同选项: http://www.tinymce.com/wiki.php/configuration

如果您点击一个特定的选项,您将看到如何配置非角度锡罐,如下所示:

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,但这个事实对于新的初学者来说是不明显的。

猜你在找的Angularjs相关文章