live-Editor.php
Quell Code
<div id="head"> HTML <input type="button" id="open" value="OpenMenü"></div>
<pre id="editor" class="code"></pre>
<textarea id="textArea" placeholder="Loading . . ." data-autosize-input='{ "space": 4 }'></textarea>
<div id="preview"></div>
<script>
var textarea = document.getElementById('textArea');
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/html");
ace.require("ace/ext/language_tools");
var editorTargets = $(".code");
// editor.getSession().setMode($(this).attr("data-mode"));
editor.setOptions({
minLines: 20,
maxLines: 5000,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
ace.require('ace/ext/settings_menu').init(editor);
$('#open').click(function(){
// editor.showSettingsMenu(false);
editor.execCommand("showSettingsMenu");
});
function showHTML() {
document.getElementById('return').innerHTML = editor.getValue();
}
// or use data: url to handle things like doctype
function showHTMLInIFrame() {
document.getElementById('preview').innerHTML = "<iframe src=" +
"data:text/html," + encodeURIComponent(editor.getValue()) + "></iframe>";
}
editor.on("input", showHTMLInIFrame);
editor.getSession().on('change', function () {
textarea.value = editor.getSession().getValue();
});
textarea.value = editor.getSession().getValue();
// Auto resize textarea
$('textArea').on({
input: function() {
var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).css({
'height': totalHeight
});
}
});
</script>