Comment configurer tinymceOptions depuis angular-ui / ui-tinymce

En supposant que vous avez votre angulaire app de travail et c'est juste une question de configuration de l'éditeur, vous pouvez configurer l'éditeur, avec les mêmes options que sont documentés pour les non-angulaire, base TinyMce ici: http://www.tinymce.com/wiki.php/configuration

Si vous cliquez sur une option spécifique, vous verrez comment vous pouvez configurer la non-angulaire tinymce comme suit:

tinymce.init({
    resize: false
});

Donc pour faire l'équivalent de personnalisation angulaire avec l'interface utilisateur de tinymce, au lieu de tinymce.init(), vous définissez les options à l'intérieur de la portée de la variable $scope.tinymceOptions. Donc, un exemple de configuration de l'interface utilisateur de tinymce pour ne pas permettre à l'utilisateur de redimensionner, avoir une largeur/hauteur de 400/300, permettent l'impression, et la couleur du texte/arrière-plan sélecteur serait:

myAppModule.controller('MyController', function($scope) {
    $scope.tinymceOptions = {
        resize: false,
        width: 400,  //I *think* its a number and not '400' string
        height: 300,
        plugins: 'print textcolor',
        toolbar: "undo redo styleselect bold italic print forecolor backcolor"

    };
});

Et votre point de vue pourrait ressembler à quelque chose comme ceci (notez le tinymceOptions):

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

de l'interface utilisateur tinymce devrait venir avec un certain nombre de plugins, vous pouvez trouver de la documentation sur ici: http://www.tinymce.com/wiki.php/Plugins

Pour une liste complète des options de barre d'outils, voir: http://www.tinymce.com/wiki.php/Controls

De ce que je me souviens, vous ne pouvez pas après le fait de changer le tinymceOptions. Je veux dire par là, après le chargement de l'éditeur, si vous voulez plus tard modifier certains de $champ d'application.tinymceOptions, ces modifications ne seront pas mis à jour automatiquement dans l'éditeur, parce que je crois que l'interface utilisateur tinymce code passe les options de tinymce.init() une seule fois, quand il est chargé.

Vous pouvez également définir manuellement l'éditeur de contenu à l'aide de la plaine tinyMce javascript crochets comme:

tinyMCE.activeEditor.setContent('<h1>hello world</h1><p>this is my story.  the end.</p>');

De même, vous pouvez utiliser getContent() voir: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
Mais je crois que vous pouvez également accéder à l'éditeur de contenu via le $scope.tinymceModel variable dans cet exemple. (le cas d'utilisation en cours, si vous avez une ng-cliquez sur un bouton pour enregistrer l'éditeur de contenu, alors comment obtenez-vous l'éditeur de contenu...)

Mais le plus anguleux façon serait de tout faire par le biais de la ng-model et de la portée des variables au lieu de s'appuyer sur les premières tinymce api javascript.

Espère que ça aide. En résumé, l'interface utilisateur tinymce est un très mince wrapper autour de la plaine de TinyMce. Donc, tout ce que vous pouvez faire avec l'ordinaire de tinymce, vous pouvez, pour la plupart, ne avec le angulaires-isée version. Je pense que c'est pourquoi il n'y a pas beaucoup de docs pour la personnalisation de l'interface utilisateur, tinymce, mais ce fait n'est pas évident pour les nouveaux débutants.