मैं TinyMCE का उपयोग कर रहा हूं और मैं यह उत्पादन करने की कोशिश कर रहा हूं कि उपयोगकर्ता वर्तमान में TinyMCE संपादक के नीचे एक div टाइप कर रहा है। मैं चाहता हूं कि उपयोगकर्ता यह देखे कि पोस्ट किस तरह प्रस्तुत की जाएगी।
मैं जिस स्क्रिप्ट का उपयोग कर रहा हूं वह यह है:
<script type="text/javascript">
$(function () {
$("#tinymce").keyup(function () {
$("#myDIVTag").html("<b>" + $(this).val() + "</b>");
});
});
</script>
मैंने अपने आरंभिक रूप में संबंधित दिवि को दृश्य में रखा है:
<div id="myDIVTag">
</div>
हालाँकि मुझे कुछ भी टाइप नहीं किया जा रहा है।
उत्तर:
जवाब के लिए 3 № 1कोई फिडल नहीं है, जो बात को कठिन बनाता है - लेकिन यह टिप्पणी में इंगित किया गया है कि टिनीएमसीई संपादक स्वयं के भीतर छिपा हुआ है <iframe> तत्व। यह मुद्दे की जड़ प्रतीत होती है।
तक पहुँचने में सक्षम होना कुछ भी अंदर iframe जावास्क्रिप्ट के साथ तत्व, हमें क्रॉस-डोमेन नीति के बारे में याद रखना चाहिए। संक्षेप में - अगर 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 एपीआई घटना का उपयोग करना है, न कि सामान्य बाध्यकारी। textarea तत्व भीतर iframe। यहाँ एक त्वरित जवाब है कि खाते में ले जा रहा है:
HTML:
<textarea id="tinymce-textarea"></textarea>
<div class="text-mirror"></div>
जे एस:
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)।