Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular UI TinyMCE : How set default settings

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.

like image 433
Matt Avatar asked Jul 29 '13 14:07

Matt


People also ask

How do I initialize TinyMCE editor?

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.

How do you reload 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.


1 Answers

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>
like image 179
dcodesmith Avatar answered Sep 27 '22 20:09

dcodesmith