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>