{"id":13527374,"url":"https://github.com/angular-ui/ui-tinymce","last_synced_at":"2025-10-22T20:31:11.245Z","repository":{"id":7124881,"uuid":"8419896","full_name":"angular-ui/ui-tinymce","owner":"angular-ui","description":"AngularUI wrapper for TinyMCE","archived":true,"fork":false,"pushed_at":"2020-05-11T14:40:05.000Z","size":553,"stargazers_count":489,"open_issues_count":70,"forks_count":368,"subscribers_count":57,"default_branch":"master","last_synced_at":"2024-05-10T16:03:11.335Z","etag":null,"topics":["text-editor","tinymce","ui-tinymce","wysiwyg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-02-25T22:37:20.000Z","updated_at":"2024-04-02T18:58:14.000Z","dependencies_parsed_at":"2022-08-27T17:12:01.666Z","dependency_job_id":null,"html_url":"https://github.com/angular-ui/ui-tinymce","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-tinymce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-tinymce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-tinymce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-tinymce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-ui","download_url":"https://codeload.github.com/angular-ui/ui-tinymce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246616115,"owners_count":20806061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["text-editor","tinymce","ui-tinymce","wysiwyg"],"created_at":"2024-08-01T06:01:46.671Z","updated_at":"2025-10-22T20:31:10.923Z","avatar_url":"https://github.com/angular-ui.png","language":"JavaScript","readme":"# UI Tinymce - [AngularJS](http://angularjs.org/) directive for [TinyMCE](http://tinymce.com).\n\n[![Build Status](https://travis-ci.org/angular-ui/ui-tinymce.png)](https://travis-ci.org/angular-ui/ui-tinymce) \n[![Join the chat at https://gitter.im/angular-ui/ui-tinymce](https://badges.gitter.im/angular-ui/ui-tinymce.svg)](https://gitter.im/angular-ui/ui-tinymce?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n# Call for Maintainer\n\nThis library is looking for a maintainer. If you feel up to the task please open an issue indicating so.\n\n# Requirements\n\n- AngularJS 1.4.x or higher and it has been tested with Angular 1.4.8.\n- TinyMCE 4\n\n# Testing\n\nWe use karma and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:\n```\nnpm install -g grunt-cli\nnpm install\nbower install\ngrunt\n```  \n\nThe karma task will try to open Chrome as a browser in which to run the tests.  Make sure this is available or change the configuration in `test\\test.config.js`\n\n# Usage\n\nWe use [bower](http://twitter.github.com/bower/) for dependency management.  Add\n\n```\ndependencies: {\n\"angular-ui-tinymce\": \"latest\"\n}\n```\n\nTo your `bower.json` file. Then run\n\n```\nbower install\n```\n\nThis will copy the ui-tinymce files into your `components` folder, along with its dependencies. Load the script files in your application:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"app/bower_components/tinymce/tinymce.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"app/bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"app/bower_components/angular-ui-tinymce/src/tinymce.js\"\u003e\u003c/script\u003e\n```\n\nAdd the tinymce module as a dependency to your application module:\n\n```javascript\nvar myAppModule = angular.module('MyApp', ['ui.tinymce'])\n```\n\nApply the directive to your form elements:\n\n```html\n\u003cform method=\"post\"\u003e\n  \u003ctextarea ui-tinymce ng-model=\"tinymceModel\"\u003e\u003c/textarea\u003e\n\u003c/form\u003e\n```\n\n**Be sure not to set an `id` attribute**. This is because the directive needs to maintain selector knowledge in order to handle buggy behavior in TinyMCE when DOM manipulation is involved, such as in a reordering of HTML through ng-repeat or DOM destruction/recreation through ng-if.\n\nWhen using other directives which do DOM manipulation involving elements with `ui-tinymce`, you may need to re-render the editor due to this buggy behavior with TinyMCE. For those situations, it is recommended to use the `$tinymce:refresh` event, which will handle re-rendering the editor to fix this problem.\n\n## Working with ng-model\n\nThe ui-tinymce directive plays nicely with the ng-model directive such as ng-required.\n\nIf you add the ng-model directive to same the element as ui-tinymce then the text in the editor is automatically synchronized with the model value.\n\n_The ui-tinymce directive stores the configuration options as specified in the [TinyMCE documentation](http://www.tinymce.com/wiki.php/Configuration) and expects the model value to be a html string or raw text, depending on whether `raw` is `true` (default value is `false`)._\n\n**Note:** Make sure you using scopes correctly by following [this wiki page](https://github.com/angular/angular.js/wiki/Understanding-Scopes). If you are having issues with your model not updating, make sure you have a '.' in your model.\n\n\u003e This issue with primitives can be easily avoided by following the \"best practice\" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.\n\n## Options\n\nThe directive supports all of the standard TinyMCE initialization options as listed [here](http://www.tinymce.com/wiki.php/Configuration).\n\nUse the [setup](https://www.tinymce.com/docs/configure/integration-and-setup/#setup) function to bind different events:\n\n```javascript\nscope.tinymceOptions = {\n  setup: function(editor) {\n      //Focus the editor on load\n      $timeout(function(){ editor.focus(); });\n      editor.on(\"init\", function() {\n        ...\n      });\n      editor.on(\"click\", function() {\n        ...\n      });\n  }\n};\n```\nBy default all TinyMCE content that is set to `ngModel` will be whitelisted by `$sce`.\n\nIn addition, it supports these additional optional options\n\n- `format` Format to get content as, i.e. 'raw' for raw HTML, or 'text' for text only. Defaults to 'html'. Documentation [here](http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.getContent)\n- `baseURL` This will set [baseURL property on the EditorManager](https://www.tinymce.com/docs/api/class/tinymce.editormanager/)\n- `debounce` This will debounce the model update which helps with performance of editors with large text. Defaults to true.\n\nThis option is only supported when present on the `uiTinymceConfig` global injectable - this injectable needs to be an object.\n\n- `baseUrl` Sets the base url used by tinymce asset loading\n\n```javascript\nmyAppModule.controller('MyController', function($scope) {\n  $scope.tinymceOptions = {\n    onChange: function(e) {\n      // put logic here for keypress and cut/paste changes\n    },\n    inline: false,\n    plugins : 'advlist autolink link image lists charmap print preview',\n    skin: 'lightgray',\n    theme : 'modern'\n  };\n});\n```\n```html\n\u003cform method=\"post\"\u003e\n  \u003ctextarea ui-tinymce=\"tinymceOptions\" ng-model=\"tinymceModel\"\u003e\u003c/textarea\u003e\n\u003c/form\u003e\n```\n\n## Testing your Application (Protractor)\n\nIf you are testing your application using Protractor and you wish to be able to automate the\ncontribution of rich text content as part of the tests, use the TinyMCE API method `insertContent`\nin conjunction with the WebDriver's `executeScript` method, like this:\n\n```javascript\nbrowser.driver.executeScript(\"tinyMCE.activeEditor.insertContent('This is \u003cem\u003eRICH\u003c/em\u003e content')\");\n```\n\nNote that if you use the TinyMCE API method `setContent`, this will fail to update the Angular model\nwith the entered content, so use `insertContent` instead.\n\n----\n\n\n# Contributing to the project\n\nWe are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.\n","funding_links":[],"categories":["JavaScript","Directive"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-tinymce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-ui%2Fui-tinymce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-tinymce/lists"}