Accéder à l'entrée actuelle de TinyMCE dans iframe - javascript, jquery, html, tinymce

J'utilise TinyMCE et j'essaie d'exprimer ce que l'utilisateur tape actuellement sur un div situé sous l'éditeur TinyMCE. Je veux que l'utilisateur voie à quoi il ressemblerait après rendu.

Le script que j'utilise est le suivant:

<script type="text/javascript">
$(function () {
$("#tinymce").keyup(function () {
$("#myDIVTag").html("<b>" + $(this).val() + "</b>");
});
});
</script>

J'ai placé la div correspondante dans ma forme de début dans la vue:

    <div id="myDIVTag">

</div>

Cependant, rien n'est rendu pendant que je tape.

Réponses:

3 pour la réponse № 1

Il n'y a pas de violon, ce qui rend la chose plus difficile - mais il a été souligné dans le commentaire que l'éditeur de TinyMCE est caché dans <iframe> élément. Cela semble être la racine du problème.

Pour pouvoir accéder n'importe quoi dans iframe élément avec JavaScript, nous devons nous rappeler à propos de la stratégie inter-domaines. En bref - si iframe a src attribut défini sur un autre domaine, et le site Web appartenant à cette source ne nous laisse pas explicitement accéder à son contenu iframe - nous ne pourrons pas le faire, fin de l’histoire. Plus: http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/ .

Heureusement, je suis presque sûr que cela ne posera pas de problème - à moins que TinyMCE de notre iframe est servi depuis un autre domaine.

Compte tenu de tout cela, voici l'extrait qui devrait faire l'affaire. Veuillez modifier les sélecteurs en fonction de vos besoins (je les ai signalés avec des commentaires):

$("iframe") // iframe element
.contents()
.find("textarea") // textarea/other input *within* iframe
.keyup(function () {
$("#myDIVTag").html("<b>" + $(this).val() + "</b>");
});

MODIFIER:

Il a été suggéré dans le commentaire (merci @charlietfl!) Que la bonne façon d’aborder ce problème est d’utiliser un événement API TinyMCE, et non une liaison générique textarea élément à l'intérieur iframe. Voici une réponse rapide tenant compte de cela:

HTML:

<textarea id="tinymce-textarea"></textarea>
<div class="text-mirror"></div>

JS:

tinymce.init({
selector: "#tinymce-textarea",
setup: function (editor) {
editor.on("change", function (e) {
var newVal = tinymce.get("tinymce-textarea").getContent();
$(".text-mirror").html(newVal);
});
}
});

JSFiddle: http://jsfiddle.net/c1zncmt8/1/ .

Fondamentalement: "nous nous lions à l'événement" change "de l'éditeur TinyMCE, et chaque fois qu'il est déclenché, nous obtenons une valeur de notre entrée (var newVal = ...) et le mettre en div séparé (.text-mirror).

---