Tinymce mode d'affichage commute après init

StackOverflow https://stackoverflow.com//questions/25054335

Question

Mon éditeur est tinymce4+.Il travaille beaucoup dans la plupart des régions.

Mais peu importe ce que je fais, il y a quelque chose que je ne peux pas le faire.- commutation de mode de l'éditeur instantanément.-

J'ai une page que les utilisateurs peuvent sélectionner des données et de l'éditer et de visualiser le contenu.Les utilisateurs de cliquer sur un bouton nommé " viewmode ", l'autre revers est " edit mode "

J'ai réalisé cela en mettant les deux DIVs dans un même récipient, faire l'un des invisibles par la start-look-paramètres des utilisateurs ont choisi.Un DIV a tinymce éditeur, la balise iframe, et un autre a tout un tas de valeurs html que l'éditeur est maintenant.Mais l'inconvénient, c'est que le contenu que le style pourrait ressembler différents, en fonction de ses attributs de style.

Cette application web, je suis en train de parler maintenant est un système existant qui dispose de sa propre CSSs.C'est si compliqué que une fois que vous arrivez à le regarder, vous pouvez exécuter loin de lui.

Donc je voudrais éviter cela CSS la contradiction en faisant de l'éditeur de manière dynamique commutable deux façons.

Le chargement de plusieurs tinymce objets est la dernière chose dont j'ai besoin ici.

Je peux faire de l'éditeur de désactiver par la mise en place d'un attribut - contenteditable = false - Mais alors la barre d'outils des éléments de devenir mauvais garçons ici.parce qu'ils ont encore du travail.- Je cacher la barre d'outils elle-même d'accomplir cette mission.

Mais vous savez, mon client l'a détesté et a insisté pour moi que l'éditeur doit fournir un bouton d'impression dans son viewmode.Ce qui est frustrant.

Donc, si vous pouviez juste me donner une idée de la façon de manipuler les éléments de la barre d'outils, puis je pense que je peux réussir à résoudre ce problème.

Si c'est trop difficile, en joignant l'impression d'écouteur d'événement à un élément extérieur, pourrait aussi être la deuxième meilleure option pour moi.Car à partir de ce moment, je viens de jeter la barre d'outils de loin et de faire une icône imprimer sur la partie supérieure de l'éditeur et le joindre à l'événement pour elle.

Désolé pour la saisie de tous les textes simples.Mais question comme celle-ci nécessite pas de code je pense.J'espère que certains tinymce gourou de l'arrêter et de m'aider.

Était-ce utile?

La solution

Enfin, j'ai fait mon éditeur commutable.

La première étape est de cacher tous les éléments dans la barre d'outils de tinyMCE.

tinyMCE les barres d'outils ont un nom de classe spécifique, de sorte qu'ils sont sélectionnables avec jQuery sélecteur de classe.Mais la sélection avec le nom de classe provoque à lui seul d'obtenir des barres d'outils indésirables, de sorte que vous devez être prudent avec cette.

Pour info .eq() API peut vous aider.

après masquage de tous les éléments dans la barre d'outils, ( ne pas masquer la barre d'outils, par la manière.) faire.

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

Cela va ajouter un élément de bouton dans la barre d'outils.

Mais de toute façon il n'a pas d'invoquer la commande que j'ai défini dans cmd de la valeur.

Ainsi la fixation de cet événement pour le bouton manuellement sera nécessaire.

tinymce.activeEditor.execCommand('mcePrint');

Jusqu'à présent, j'ai créé une fenêtre de la barre d'outils pour afficher en mode éditeur.Maintenant, il est temps de geler les edior réelle du contenu du champ.

Il est très facile après l'obtention du contenu de l'iframe jQuery objet.

.contents() API devrait vous aider.

après cela, vous pouvez sélectionner <BODY> élément de votre côté, donc la dernière chose qui reste à faire est de donner des "contenteditable=false' attribut et la valeur de la balise body.

Ensuite, votre éditeur de se fige.

Revenir au mode d'édition est trop facile.Il suffit de faire à l'envers.

Invoquer ces événements lorsque vous cliquez sur votre propre bouton".Ensuite, vous pouvez passer votre éditeur de vue en mode édition-mode ( et la oppsite façon ).

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top