Personnaliser la configuration Tinymce

**Abission** · 29/11/2013, 13h40

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 ;-)

**Marco46** · 05/12/2013, 15h46

Apparemment il existe un composant Angular-ui pour TinyMCE.

De ce que je vois dans le README la config est supportée.

**Abission** · 10/12/2013, 11h01

Bonjour,

Déjà merci pour la réponse ^^.

J'ai essayé cette méthode mais je n'arrive pas à la faire fonctionner.

Voici ce que j'ai ajouté :

- Dans mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ui-tinymce="tinymceOptions"

- Dans mon js :
J'ai mis mon module dans une variable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var myAppModule = angular.module(...etc...

et j'ai ajouté après le module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
myAppModule.controller('MyController', function($scope) {
    $scope.tinymceOptions = {
      handle_event_callback: function (e) {
        // put logic here for keypress
      }
    };
  });

J'ai volontairement laissé vide la partie option pour le moment. Le problème avec ce code est que dès que je j'ajoute le bout de code dans le html, il ne reconnait plus Tiny et je me retrouve avec un textarea tout simple.

Personnaliser la configuration Tinymce

AngularJS

Vue hybride

Discussions similaires

Partager

Partager