I am using angular ui tinymce extension. I would like to know how to set the following setting which I can do in regular JavaScript.
tinymce.init({
selector: "textarea",
height: 250,
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
]
});
Not sure how to use the setup
$scope.tinymceOptions =
{
setup: function (ed) {
ed.onInit.add(function(ed) {
//SOME INITIALIZING CODE HERE
});
}
Any help related to setting up tinymceOptions would be appreciated.
Initialize TinyMCE 5 on any element (or elements) on the web page by passing an object containing a selector value to tinymce. init() . The selector value can be any valid CSS selector. For example: To replace <textarea id="mytextarea"> with a TinyMCE 5 editor instance, pass the selector '#mytextarea' to tinymce.
You need to use the remove() API to detach TinyMCE from the DOM before you close your Modal window. You can then use init() again when the modal is recreated.
tinymce directive
Controller
var app = angular.module('BDA', ['ui.tinymce']);
app.controller('PostCtrl', function ($scope, $http) {
$scope.tinymceOptions = {
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
height: "200px",
width: "650px"
};
});
HTML
<div ng-controller="PostCtrl">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With