ui-tinymce

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

UI Tinymce - AngularJS 的 TinyMCE 指令。

寻找维护者

这个库正在寻找维护者。如果你有能力承担此任务，请提交一个问题说明。

要求

• AngularJS 1.4.x 或更高版本，并且已在 Angular 1.4.8 上测试过。
• TinyMCE 4

测试

我们使用 karma 和 jshint 来确保代码质量。运行这些检查的最简单方法是使用 grunt：

npm install -g grunt-cli
npm install
bower install
grunt

Karma 任务将尝试打开 Chrome 作为运行测试的浏览器。确保该浏览器可用，或在 test\test.config.js 中更改配置。

使用方法

我们使用 bower 进行依赖管理。添加

dependencies: {
"angular-ui-tinymce": "latest"
}

到你的 bower.json 文件。然后运行

bower install

这将把 ui-tinymce 文件连同其依赖项复制到你的 components 文件夹中。在你的应用程序中加载这些脚本文件：

<script type="text/javascript" src="app/bower_components/tinymce/tinymce.js"></script>
<script type="text/javascript" src="app/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app/bower_components/angular-ui-tinymce/src/tinymce.js"></script>

将 tinymce 模块添加为您的应用模块的依赖项：

var myAppModule = angular.module('MyApp', ['ui.tinymce'])

将指令应用到你的表单元素上：

<form method="post">
  <textarea ui-tinymce ng-model="tinymceModel"></textarea>
</form>

一定不要设置 id 属性。这是因为该指令需要保持选择器知识，以便在涉及 DOM 操作（例如通过 ng-repeat 对 HTML 重新排序或通过 ng-if 销毁/重建 DOM）时处理 TinyMCE 中的错误行为。

在使用其他对包含 ui-tinymce 的元素进行 DOM 操作的指令时，由于 TinyMCE 的此类错误行为，您可能需要重新渲染编辑器。在这些情况下，建议使用 $tinymce:refresh 事件，这将处理编辑器的重新渲染以解决此问题。

使用 ng-model

ui-tinymce 指令能够很好地配合 ng-model 指令使用，例如 ng-required。

如果在与 ui-tinymce 相同的元素上添加 ng-model 指令，则编辑器中的文本会自动与模型值同步。

ui-tinymce 指令按照 TinyMCE 文档 中指定的配置选项存储，并且期望模型值为 html 字符串或原始文本，这取决于 raw 是否为 true（默认值为 false）。

注意： 确保正确使用作用域，可参考 此 Wiki 页面。如果模型未更新，请确保模型中包含 "."。

通过遵循在 ng-model 中始终包含 "." 的“最佳实践”，可以轻松避免原始类型问题—观看 3 分钟的演示。Misko 演示了 ng-switch 中的原始类型绑定问题。

选项

该指令支持所有标准的 TinyMCE 初始化选项，如 此处 所列。

使用 setup 函数绑定不同的事件：

scope.tinymceOptions = {
  setup: function(editor) {
      //Focus the editor on load
      $timeout(function(){ editor.focus(); });
      editor.on("init", function() {
        ...
      });
      editor.on("click", function() {
        ...
      });
  }
};

默认情况下，所有设置为 ngModel 的 TinyMCE 内容将被 $sce 列入白名单。

此外，它还支持以下附加可选选项

• format 格式以获取内容，例如 'raw' 表示原始 HTML，或 'text' 表示仅文本。默认值为 'html'。文档 here
• baseURL 这将设置 EditorManager 上的 baseURL 属性
• debounce 这将对模型更新进行防抖，有助于提高大型文本编辑器的性能。默认值为 true。

此选项仅在 uiTinymceConfig 全局可注入对象存在时支持 - 该可注入对象必须是一个对象。

• baseUrl 设置 tinymce 资源加载所使用的基本 URL

myAppModule.controller('MyController', function($scope) {
  $scope.tinymceOptions = {
    onChange: function(e) {
      // put logic here for keypress and cut/paste changes
    },
    inline: false,
    plugins : 'advlist autolink link image lists charmap print preview',
    skin: 'lightgray',
    theme : 'modern'
  };
});

<form method="post">
  <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</form>

测试你的应用程序（Protractor）

如果您正在使用 Protractor 测试您的应用程序，并且希望能够在测试中自动化提交富文本内容，请将 TinyMCE API 方法 insertContent 与 WebDriver 的 executeScript 方法结合使用，如下所示：

browser.driver.executeScript("tinyMCE.activeEditor.insertContent('This is <em>RICH</em> content')");

请注意，如果你使用 TinyMCE API 方法 setContent，这将无法用输入的内容更新 Angular 模型，因此请改用 insertContent。

为项目做出贡献

我们一直在寻求高质量的贡献！请查看 CONTRIBUTING.md 获取贡献指南。