Codemirror with live previews with 2 text editors?
I am trying to create a live editor like jsfiddle where users can put html in html box (textarea)
and css in css box(textarea)
and view changes in real time in an iframe.
I am using codemirror
as editor.
So far, I can get a preview of one of the textboxes in my iframe and I cannot figure out how to get the values of both textboxes (css / html) and display them in my iframe exactly like jsfiddle.
This is what I have so far:
and this is my javascript code:
<script>
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode: 'text/html'
});
editor.on("change", function() {
clearTimeout(delay);
//alert("hellooooo");
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
</script>
<script>
var delay2;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode: 'text/html'
});
editor2.on("change", function() {
clearTimeout(delay2);
//alert("hellooooo");
delay2 = setTimeout(updatePreview2, 300);
});
function updatePreview2() {
var previewFrame2 = document.getElementById('preview');
var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document;
preview2.open();
preview2.write(editor2.getValue());
preview2.close();
}
setTimeout(updatePreview2, 300);
</script>
Can someone please help me and advise this problem?
Thanks in advance.
source to share
Your problem is adding CSS to the iframe head. Use below code to update iframe header for CSS.
function loadCSS() {
var $head = $("#preview").contents().find("head");
$head.html("<style>" + editor.getValue() + "</style>");
};
The HTML textbox needs to be updated with CSS. Add loadCSS()
to updatePreview2()
(HTML Article Refresh Function).
function updatePreview2() {
var previewFrame2 = document.getElementById('preview');
var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document;
preview2.open();
preview2.write(editor2.getValue());
preview2.close();
// added this line
loadCSS();
}
And when your CSS text area changes, the preview content will be updated with updatePreview()
(CSS text article update function) with the CSS content. He only needs to update the head.
function updatePreview() {
loadCSS();
}
Here is a Jsfiddle please bring a demo.
By the way, try to name your variable and function exactly so more people can help you.
source to share