Bonjour à tous !

Je viens quérir votre aide pour résoudre un petit problème sur lequel je me casse la tête depuis 2 jours sans aboutir.

Voilà, comme indiqué dans le titre, j'utilise AngularJS, et dans ma page, je désir afficher un éditeur Tinymce.
Angular a un fonctionnement spécial avec Tinymce pour pouvoir récupérer son contenu qui est dans un iframe normalement.

Voici le code pour être un peu plus claire :

index.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
 
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
		<title>AngularUI - TinyMCE Demo</title>
 
		<!-- Feuilles de style CSS -->
		<link rel="stylesheet" href="css/style.css"/>
 
		<!-- Fichiers javascript -->
		<script type="text/javascript" src="lib/tinymce/tinymce.min.js"></script>
		<script type="text/javascript" src="lib/angular/angular.min.js"></script>
		<script type="text/javascript" src="lib/angular/angular-sanitize.min.js"></script>
		<script type="text/javascript" src="js/tinymce.js"></script>
 
	</head>
	<body ng-app="ui.tinymce">
 
		<div id="siteTitre">AngularJS & Tinymce 4</div>
 
		<section id="postEditEtApercu">
			<form method="post">
				<textarea id="tinymce" ui-tinymce ng-model="tinymce"></textarea>
			</form>
			<br>
			<section id="postApercu">
				<p id="apercuTitre">Aperçu du message</p>
				<div id="apercu" ng-controller="ngBindHtmlCtrl">
					<p ng-bind-template="tinymce" ng-bind-html="tinymce"></p>
				</div>
			</section>
		</section>
 
	</body>
</html>

Rien de très sorcier jusque là.
Et le code js avec la configuration pour Angular.

tinymce.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
angular.module('ui.tinymce', ['ngSanitize'])
 
  .controller('ngBindHtmlCtrl', ['$scope',
    function ngBindHtmlCtrl($scope) {}
  ])
 
  .value('uiTinymceConfig', {})
 
  .directive('uiTinymce', ['uiTinymceConfig',
    function(uiTinymceConfig) {
      uiTinymceConfig = uiTinymceConfig || {};
      var generatedIds = 0;
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ngModel) {
          var expression, options, tinyInstance,
            updateView = function() {
              ngModel.$setViewValue(elm.val());
              if (!scope.$root.$$phase) {
                scope.$apply();
              }
            };
          // generate an ID if not present
          if (!attrs.id) {
            attrs.$set('id', 'uiTinymce' + generatedIds++);
          }
 
          if (attrs.uiTinymce) {
            expression = scope.$eval(attrs.uiTinymce);
          } else {
            expression = {};
          }
          options = {
            // Update model when calling setContent (such as from the source editor popup)
            setup: function(ed) {
              var args;
              ed.on('init', function(args) {
                ngModel.$render();
              });
              // Update model on button click
              ed.on('ExecCommand', function(e) {
                ed.save();
                updateView();
              });
              // Update model on keypress
              ed.on('KeyUp', function(e) {
                ed.save();
                updateView();
              });
              // Update model on change, i.e. copy/pasted text, plugins altering content
              ed.on('SetContent', function(e) {
                if (!e.initial) {
                  ed.save();
                  updateView();
                }
              });
              if (expression.setup) {
                scope.$eval(expression.setup);
                delete expression.setup;
              }
            },
            mode: 'exact',
            elements: attrs.id,
          };
          // extend options with initial uiTinymceConfig and options from directive attribute value
          angular.extend(options, uiTinymceConfig, expression);
          setTimeout(function() {
            tinymce.init(options);
          });
 
          ngModel.$render = function() {
            if (!tinyInstance) {
              tinyInstance = tinymce.get(attrs.id);
            }
            if (tinyInstance) {
              tinyInstance.setContent(ngModel.$viewValue || '');
            }
          };
        }
      };
    }
  ]);

Mon problème est le suivant, mon éditeur tinymce s'affiche normalement et j'ai bien le comportement souhaité avec AngularJS. Mais je ne trouve pas comment faire pour personnaliser Tiny (ajouter des menus comme on peut le faire classiquement).

J'ai essayer de rajouter un .init dans mon js avec la conf que je désirais (comme je l'utilise habituellement) mais ça ne marche pas avec Angular, l'un faisant planter l'autre ><.

J'ai également regarder dans la lib Tinymce pour essayer de débusquer la conf par défaut pour la modifier, mais la encore ça n'a pas fonctionné.

Est-ce que quelqu'un a déjà utilisé ce genre de chose ou sait comment procéder ?


Merci d'avance à tout ceux qui me répondront ;-)