Достъп до TinyMCE текущия вход в рамките на

Аз използвам TinyMCE и се опитвам да извеждам това, което потребителят в момента пише до div под редактор TinyMCE. Искам потребителят да види как ще изглежда пост.

Скриптът, който използвам, е следният:

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

Поставих съответния div в моята начална форма в изгледа:

    <div id="myDIVTag">

</div>

Но нищо не се визуализира, докато пиша.

Отговори:

3 за отговор № 1

Няма цигулка, която прави нещо по-трудно - но в коментара е посочено, че самият редактор на TinyMCE е скрит в <iframe> елемент. Това изглежда е коренът на проблема.

За достъп до нищо в рамките на iframe елемент с JavaScript, ние трябва да помним за кръстосано-домейн политика. Накратко - ако има iframe src атрибут е зададен на друг домейн, а уебсайтът под този източник не ни позволява изрично да влезем в съдържанието му iframe - няма да можем да го направим, край на историята. Още: http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/ .

За щастие, аз съм сигурен, че няма да има никакъв проблем тук - освен ако TinyMCE в нашата iframe получава се от друг домейн.

Имайки предвид всичко това, ето кой фрагмент трябва да свърши работа. Моля, променете селекторите за вашите нужди (посочих ги с коментари):

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

РЕДАКТИРАНЕ:

Той предложи в коментар (благодарение @charlietfl!), Че правилният начин да се подходи към този проблем е да се използва TinyMCE API събитие, а не родово свързване към textarea елемент вътре iframe, Ето един бърз отговор, който взема предвид това:

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/ .

По принцип: обвързваме се със събитието от редактора на TinyMCE "промяна", а когато го задействаме, получаваме стойност на нашия вход (var newVal = ...) и го поставете в отделен div (.text-mirror).

---