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>