TinyMCE Validating length AngularJs

  • angular.module(‘myApp’, [‘ui.tinymce’]) .config([‘$sceProvider’, function($sceProvider) { $sceProvider.enabled(false); }]) .controller(‘myCtrl’, [‘$scope’, function($scope) { //set the config options $scope.tinymceOptions = { plugins: ‘code’, toolbar: ‘undo redo | bold italic | styleselect | code’, menubar: false, forced_root_block: false }; // …
  • Took from StackOverflow One work around can be to disable SCE mode with this code .
  • This is a directive written by @andresmatasuares for TinyMCE Validating length with AngularJs.
  • TinyMCE Validating length using AngularJs

tutorial based on one experiences I had working with TinyMCE Validating length with Angularjs, , and the answers I found in the internet.

@JSB1ogs: TinyMCE Validating length #AngularJS

I’m creating this “how to…” tutorial based on my experience working with TinyMCE Validating length with Angularjs, and the answers I found in the internet community Stack overflow and github.

It is an opensource WYSIWYG (What You See Is What You Get) HTML editor designed to simplify website content creation. In other words it is a rich text web editor. This is the official website https://www.tinymce.com/

For the first example I used TinyMCE v4.3.3 with angular-ui-tinymce v0.0.12 plugin and AngularJS v1.4.6.

In the AngularJs controller we have to set the config options, and in the view we use a textarea with the parameter ui-tinymce=”tinymceOptions”

angular.module(‘myApp’, [‘ui.tinymce’]) .controller(‘myCtrl’, [‘$scope’, function($scope) { //set the config options $scope.tinymceOptions = { plugins: ‘code’, toolbar: ‘undo redo | bold italic | styleselect | code’, menubar: false, forced_root_block: false }; // … }]);

100 character limit reached!

The code above will not work as it is, because of a known bug https://github.com/angular-ui/ui-tinymce/issues/145

One work around can be to disable SCE mode with this code .config([‘$sceProvider’, function($sceProvider) {

$sceProvider.enabled(false);

but…

Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. With SCE disabled, an AngularJS application allows to render arbitrary HTML into the div, and rendering user controlled input creates security vulnerabilities.

angular.module(‘myApp’, [‘ui.tinymce’]) .config([‘$sceProvider’, function($sceProvider) { $sceProvider.enabled(false); }]) .controller(‘myCtrl’, [‘$scope’, function($scope) { //set the config options $scope.tinymceOptions = { plugins: ‘code’, toolbar: ‘undo redo | bold italic | styleselect | code’, menubar: false, forced_root_block: false }; // … }]);

This is a directive written by @andresmatasuares for TinyMCE Validating length with AngularJs.

TinyMCE Validating length AngularJs

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.