Comment utiliser la barre d'outils personnalisée dans tiny mce?

Question

J'utilise minuscule mce dans un de mes projets et le client ne veut pas utiliser la barre d'outils horizontale de minuscule mce. Il veut une barre d'outils personnalisée centralisée à partir de laquelle l'utilisateur peut contrôler toutes les propriétés comme la couleur du texte, le type de texte, la taille, le fond et tout ce qui est nécessaire pour créer une page Web en utilisant des modèles. J'ai configuré l'instance mce avec sa barre d'outils par défaut et contrôlé les propriétés de la barre d'outils personnalisée. Et les propriétés sont appliquées à la minuscule instance mce dans son ensemble. Mais maintenant, l'exigence est que, l'édition de texte doit être dans le style MS Office. Cela signifie que si l'utilisateur a placé le curseur à un endroit et change de couleur, rien ne sera affecté, mais s'il commence à taper à partir du curseur le texte devrait avoir la couleur qui a été définie récemment. J'ai essayé d'utiliser l'option barre d'outils externe. Mais, ma zone de travail et ma barre d'outils personnalisée sont à des niveaux d'index z différents. Ainsi, le positionnement de la barre d'outils échoue. Si j'ajoute la barre d'outils à ma barre d'outils personnalisée, elle ne peut pas être cliquée. Alors, comment invoquer la fonctionnalité de base minuscule mce en utilisant la barre d'outils personnalisée?

Ou, suggérer, devrais-je changer d'éditeur? Alors, lequel devrais-je aller? Selon la suggestion, j'écris la fonction enregistrer les styles de propriété et insérer la durée à la position du curseur. Mais je suis confronté à des problèmes et je ne pouvais pas le faire après avoir passé toute la journée. Je pourrais ajouter l'envergure à la position de caret en utilisant le code suivant.

marker = ed.selection.getBookmark(); 
ed.selection.moveToBookmark(marker); 
tinyMCE.execCommand('mceInsertContent',false,'<span id="mytitle"></span>'); 

Cependant, j'ai échoué à taper dans la nouvelle plage. En outre, je ne pouvais pas comprendre comment définir les styles pour cette durée.

Answer 1

Si votre objectif est de vous comporter comme MS Office, vous devez écrire un plugin qui s'en chargera. Je suggère si un utilisateur a placé le curseur à un endroit et change de couleur que vous enregistrez cette couleur comme paramètre à votre instance tinymce comme: ed.color = 'choosencolor';

Lorsque l'utilisateur commence à taper maintenant, vous pouvez insérer une durée sur la première séquence de touches et Définissez la couleur en tant que propriété css class ou style sur cette étendue.