Discussion :

[vivgar]

Bonjour,

J'aurais besoin de quelqu'un qui connaît bien tinymce pour me renseigner sur ce que je voudrais faire.

Je crée un éditeur simple avec une barre d'outils permettant de mettre en gras, italique, souligner, aligner à gauche, ou à droite et centrer.

Code :

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

1
2
3
4
5
6
7
8
9
 
tinymce.init({
	selector: "#myselector",
	menubar: false,
	statusbar: false,
	toolbar: 'bold italic underline alignleft aligncenter alignright undo redo',
	target_list:false,
	link_title:false
});

Voici mes deux problèmes, j'ai cherché longtemps sur internet et sur la doc de tinymce, et je n'ai pas trouvé ce que je veux faire.

1) Sur le bouton "alignleft", par exemple, la tooltip qui s'affiche quand je passe la souris indique "Align Left", je voudrais pouvoir changer cette valeur, par exemple mettre "Click here for align left", est-ce possible ? Si oui, comment faire ?

2) De même, supposons que je veuille désactiver par défaut un bouton (comme c'est fait pour les boutons undo et redo par défaut), est-ce possible également et comment faire ceci ?

Merci d'avance.

[01001111]

1) Pour le tooltip, tu devras rentrer dans le code, je te conseille la version dev pour cela.
voici le code modifié de Tooltip.js qui dans js/tinymce/classes/ui/

à toi de recompresser les sources après...

Code javascript :

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
 
/**
 * Tooltip.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */
 
/**
 * Creates a tooltip instance.
 *
 * @-x-less ToolTip.less
 * @class tinymce.ui.ToolTip
 * @extends tinymce.ui.Control
 * @mixes tinymce.ui.Movable
 */
define("tinymce/ui/Tooltip", [
	"tinymce/ui/Control",
	"tinymce/ui/Movable"
], function(Control, Movable) {
	return Control.extend({
		Mixins: [Movable],
 
		Defaults: {
			classes: 'widget tooltip tooltip-n'
		},
 
		/**
		 * Renders the control as a HTML string.
		 *
		 * @method renderHtml
		 * @return {String} HTML representing the control.
		 */
		renderHtml: function() {
			var self = this, prefix = self.classPrefix;
 
			return (
				'<div id="' + self._id + '" class="' + self.classes + '" role="presentation">' +
					'<div class="' + prefix + 'tooltip-arrow"></div>' +
					'<div class="' + prefix + 'tooltip-inner">Click here for ' + self.encode(self.state.get('text')) + '</div>' +
				'</div>'
			);
		},
 
		bindStates: function() {
			var self = this;
 
			self.state.on('change:text', function(e) {
				self.getEl().lastChild.innerHTML = 'Click here for ' + self.encode(e.value);
			});
 
			return self._super();
		},
 
		/**
		 * Repaints the control after a layout operation.
		 *
		 * @method repaint
		 */
		repaint: function() {
			var self = this, style, rect;
 
			style = self.getEl().style;
			rect = self._layoutRect;
 
			style.left = rect.x + 'px';
			style.top = rect.y + 'px';
			style.zIndex = 0xFFFF + 0xFFFF;
		}
	});
});

2) Pour la désactivation des exemples, ici tu as une version complète de tinymce.init(), il suffit d'enlever un élément dans la chaine toolbar1, par exemple, si c'est celle qui contient ce que tu veux enlever:
par exemple:
• outils complets :
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
• sans les présélections de styles et sans les alignements :
toolbar1: 'insertfile undo redo | bold italic | bullist numlist outdent indent | link image',

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
tinymce.init({
  selector: 'textarea',
  height: 500,
  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 colorpicker textpattern imagetools'
  ],
  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,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
 });

[NoSmoking]

Bonjour,
j'aurais une autre approche bien que le fait de vouloir changer le texte « tooltip » pour si peu me paraît bien peu productif !

Pour le principe :

1. Création d'un bouton personnel reprenant les même caractéristique que l'original
2. Gestion du disabled or not sur le changement du contenu de l'éditeur

Pour la réalisation :
on place le tout dans la procédure init et en utilisant un setup dans lequel on joute le bouton et la gestion de l'événement

Le code qui pourrait convenir

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
tinymce.init({
    setup: function (editor) {
        // création bouton personalisé
        editor.addButton('myAlignLeft', {
            // nouveau texte
            tooltip: 'Click here for align left',
            // icone par défaut
            icon: 'alignleft',
            // action par défaut
            cmd: 'JustifyLeft',
            // disabled: true,  // pas nécessaire
            // affectation de la variable à ce contrôle
            onPostRender: function () {
                btnAlignLeft = this;
            }
        });
        // gestion du disabled au changement de contenu
        editor.on('NodeChange', function (event) {
            if (btnAlignLeft) {
                // disabled si contenu vide
                btnAlignLeft.disabled(this.getContent() == '');
            }
        });
    },
    selector: '#myselector',
    menubar: false,
    statusbar: false,
    // c'est ici que l'on ajoute notre button perso
    toolbar: 'bold italic underline myAlignLeft aligncenter alignright undo redo',
    target_list: false,
    link_title: false
});