text-editor.php
File Type: php
File Location: monofiles/
File name: text-editor.php
<?php
include_once 'data_connect.php'
?>
<!-- text editor controls -->
<div id="editControls">
<div id="disable" class="hide"></div>
<span id="toggle-code" title="Show html code" class="">‹ / › html</span>
<span id="update" class="hide" title="Show text">› \ ‹ html</span>
<a data-role="bold" href="javascript:void(0)" class="ed-control" title="bold"><span class="ed ed-bold">B</span></a>
<a data-role="italic" href="javascript:void(0)" class="ed-control" title="italic"><span class="ed ed-italic">I</span></a>
<a data-role="underline" href="javascript:void(0)" class="ed-control" title="underline"><span class="ed ed-underline">U</span></a>
<a data-role="h1" href="javascript:void(0)" class="ed-control" title="heading 1"><span class="ed">h1</span></a>
<a data-role="insertUnorderedList" href="javascript:void(0)" class="ed-control" title="unordered list"><span class="ed ed-list-ul">ul</span></a>
<a data-role="p" href="javascript:void(0)" class="ed-control" title="paragraph"><span class="ed">p</span></a>
<a data-role="createLink" href="javascript:void(0)" class="ed-control" title="link"><i>🔗</i></a>
<a data-role="unlink" href="javascript:void(0)" class="ed-control" title="unlink"><i style="opacity:.8">🔗</i><sub style="font-size:7px;margin-left: -5px;">🚫</sub></a>
<a data-role="foreColor" href="javascript:void(0)" class="ed-control" title="font color"><span class="ed ed-color">A</span></a>
<a data-role="insertImage" href="javascript:void(0)" class="ed-control" title="image" style="font-size: 16px;">🌄</a>
<a data-role="removeFormat" href="javascript:void(0)" class="ed-control" title="format remove"><span class="ed"><i>T</i><sub style="font-size:11px">x</sub></span></a>
</div>
</div>
<div id="page" class="nocontent">
<!-- Text editor -->
<div class="newpageleft">
<div id="editor-container">
<div id="editor" contenteditable></div>
<script type="text/javascript">
window.onload = function() {
var _code = document.getElementById("output").value;
document.getElementById("editor").innerHTML = _code;
}
</script>
<script type="text/javascript">
function update_output() {
var editable_content = document.getElementById("editor").innerHTML;
document.getElementById("output").value = editable_content;
}
var edtr = document.getElementById("editor");
edtr.onkeyup = function() { update_output(); warning(); }
edtr.onpaste = function() {warning();}
edtr.onblur = function() {update_output();}
edtr.ondrop = function(event) {event.preventDefault();}
var elem = document.getElementsByClassName("ed-control");
for(var i = 0; i < elem.length; i++){
elem[i].onclick = function(){
var th = this.getAttribute("data-role");
switch(th) {
case "h1":
case "p":
document.execCommand("formatBlock", false, th);
break;
case "createLink":
document.execCommand(th, false, prompt("Link url:","http://"));
break;
case "insertImage":
document.execCommand(th, false, prompt("Insert image url:","http://"));
break;
case "foreColor":
document.execCommand("styleWithCSS",false,true);
document.execCommand(th, false, prompt("Font color:","yellow"));
break;
default:
document.execCommand("styleWithCSS",false,false);
document.execCommand(th, false, null);
warning();
break;
}
update_output();
}
}
</script>
<script type="text/javascript">
document.getElementById("toggle-code").onclick = function() {
document.getElementById("output-container").setAttribute("class","");
document.getElementById("editor").setAttribute("class","hide");
this.setAttribute("class","hide");
document.getElementById("disable").setAttribute("class","");
document.getElementById("update").setAttribute("class","");
}
document.getElementById("update").onclick = function() {
var content = document.getElementById("output").value;
document.getElementById("editor").innerHTML = content;
this.setAttribute("class","hide");
document.getElementById("output-container").setAttribute("class","hide");
document.getElementById("editor").setAttribute("class","");
document.getElementById("disable").setAttribute("class","hide");
document.getElementById("toggle-code").setAttribute("class","");
}
</script>
<div id="output-container" class="hide">
<textarea name="content" id="output" form="mainform">
<?php
print (isset($html_content)) ? load_htm($html_content) : load_xml($xmlcontent)
?>
</textarea>
</div>
</div>