Editor with JavaScript

Publié parrsopheaktra@gmail.comPublié dansNon classé

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv= »CONTENT-TYPE » content= »text/html; charset=UTF-8″>
        <title>Document Format Page!</title>
        <style> * { font-family: Helvetica, sans-serif; font-size: auto; letter-spacing: 0.5px; }
div.scroll {

                margin:4px, 4px;
                padding:4px;
                background-color: green;
                width: auto ;
                height: 300px;
                overflow-x: hidden;
                overflow-x: auto;
                text-align:justify;

            }
.imgleftp {

  width: auto;
  height: auto;
  object-fit: cover;
  float: left;
  margin-right: 20px;
  max-width:50%;
  maw-height:50%;
}
.imgnormal {

  width: 100%;
  height: 100%;
  float: none;
}

.imgrightp {

  width: auto;
  height: auto;
  object-fit: cover;
  float: right ;
  margin-right: 20px;
  max-width:50%;
  maw-height:50%;
}
</style>
      
    
       
    </head>
    <body>
       
        <br /><br />
       
        <button id= »html_code »>HTML Code</button>
        <button id= »html_preview »>HTML Preview</button>
        <button id= »html_pdf »>PDF</button>
       
        <button data-edit= »insertImage:images/map.jpg »><b>Image</b></button>
        <button onclick= »imgLeft(); »><b>Image Left</b></button>
        <button onclick= »imgCenter(); »><b>Image Center</b></button>
        <button onclick= »imgRight(); »><b>Image Right</b></button>
       
        <button data-edit= »bold »><b>B</b></button>
        <button data-edit= »italic »><i><b>I</b></i></button>
        <button data-edit= »underline »><b><u>U</u></b></button>
        <button data-edit= »strikeThrough »><b><del>U</del></b></button>
       
        <button data-edit= »superscript »><b>a</b><sup>x</sup></button>
        <button data-edit= »subscript »><b>a</b><sub>x</sub></button>
       
        <button data-edit= »backColor:red »><mark style= »background-color: red; »><b>T</b></mark></button>
        <button data-edit= »backColor:blue »><mark style= »background-color: blue; »><b>T</b></mark></button>
        <button data-edit= »backColor:yellow »><mark><b>T</b></mark></button>
        <button data-edit= »backColor:green »><mark style= »background-color: green; »><b>T</b></mark></button>
        <button data-edit= »backColor:black »><mark style= »background-color: black; color:white; »><b>T</b></mark></button>
        <button data-edit= »backColor:white »><mark style= »background-color: white; »><b>T</b></mark></button>
        <button data-edit= »backColor:pink »><mark style= »background-color: pink; »><b>T</b></mark></button>
        <button data-edit= »backColor:violet »><mark style= »background-color: violet; »><b>T</b></mark></button>
        <button data-edit= »backColor:powderblue »><mark style= »background-color: powderblue; »><b>T</b></mark></button>
       
        <button data-edit= »ForeColor:red »><b style= »color:red »>T</b></button>
        <button data-edit= »ForeColor:blue »><b style= »color:blue »>T</b></button>
        <button data-edit= »ForeColor:yellow »><b style= »color:yellow »>T</b></button>
        <button data-edit= »ForeColor:green »><b style= »color:green »>T</b></button>
        <button data-edit= »ForeColor:black »><b style= »color:black »>T</b></button>
        <button data-edit= »ForeColor:white »><b style= »color:white »>T</b></button>
        <button data-edit= »ForeColor:pink »><b style= »color:pink »>T</b></button>
        <button data-edit= »ForeColor:violet »><b style= »color:violet »>T</b></button>
        <button data-edit= »ForeColor:powderblue »><b style= »color:powderblue »>T</b></button>

        <button data-edit= »formatBlock:p »><b>P</b></button>
        <button data-edit= »insertHorizontalRule »><b>Rule</b></button>
        <button data-edit= »insertBrOnReturn »><b>␤</b></button>
   
        <button data-edit= »formatBlock:H1″><b>H</b>1</button>
        <button data-edit= »formatBlock:H2″><b>H</b>2</button>
        <button data-edit= »formatBlock:H3″><b>H</b>3</button>
        <button data-edit= »formatBlock:H4″><b>H</b>4</button>
        <button data-edit= »formatBlock:H5″><b>H</b>5</button>
        <button data-edit= »formatBlock:H6″><b>H</b>6</button>
       
        <button data-edit= »insertUnorderedList »><b>UL</b></button>
        <button data-edit= »insertOrderedList »><b>OL</b></button>
       
        <button data-edit= »justifyLeft »><b>⇤</b></button>
        <button data-edit= »justifyCenter »><b>↹</b></button>
        <button data-edit= »justifyFull »></button>
        <button data-edit= »justifyRight »><b>⇥</b></button>
        <button data-edit= »indent »>Tab In</button>
        <button data-edit= »outdent »>Tab Out</button>
        <button data-edit= »removeFormat »>&times;</button>

        <button data-edit= »selectAll »>Select All</button>
        <button data-edit= »copy »>Copy</button>
        <button data-edit= »cut »>✂</button>
        <button id= »paste » onclick= »textPaste() »>Paste</button>
        <button data-edit= »delete »>&#9003</button>
        <button data-edit= »forwardDelete »>DEL</button>
        <button data-edit= »undo »><b>↶</b></button>
        <button data-edit= »redo »><b>↷</b></button>
       
        <select id= »select_font » onchange= »changeFont(this.value); »>
            <option value= »Arial »>Arial</option>
            <option value= »Sans Serif » selected>Sans Serif</option>
            <option value= »Comic Sans MS »>Comic Sans MS</option>
            <option value= »Times New Roman »>Times New Roman</option>
            <option value= »Courier New »>Courier New</option>
            <option value= »Verdana »>Verdana</option>
            <option value= »Trebuchet MS »>Trebuchet MS</option>
            <option value= »Arial Black »>Arial Black</option>
            <option value= »Impact »>Impact</option>
            <option value= »Bookman »>Bookman</option>
            <option value= »Garamond »>Garamond</option>
            <option value= »Palatino »>Palatino</option>
            <option value= »Georgia »>Georgia</option>
           
        </select>
       
        <button id= »text_increase_size » style= »font-weight:bold; » >S+</button>
        <button id= »text_decrease_size » style= »font-weight:bold; » >S-</button>
        
        <br/>
        <br/>
        <script >
            //change Font Name
            var font = « Arial »;   
            var fontId;
            document.onselectionchange = OnChange;
        function OnChange () {
            //alert (« Document onselect « );
            document.execCommand(« fontName », false, « Arial »);
               var fontElements = window.getSelection().anchorNode.parentNode ;
               sel = window.getSelection();
          
               if(font != « Arial »){
                  font = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘face’);
             
               }
               //alert (« Font Name :  » + font );
               //size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
           
               //alert (size);
               //fontElements.removeAttribute(« face »);
               fontElements.style.fontName = font ;
               var fonts = document.querySelectorAll(« font »);
               for (var i = 1; i <= fonts.length ; ++i){
                   fontId = « font » + (fonts.length – 1).toString();
                   fontElements.setAttribute(« id » , fontId);
               }
              
    
        }
           
          
            document.getElementById(« select_font »).onclick = function() {
               // Get Selection
               sel = window.getSelection();
               aler(« Select Text :  » + sel);

            }
           
            function changeFont(font_name) {
               alert (« Font Name :  » + font_name);
               alert (« fontId :  » + fontId);
               var fontElements = document.getElementById(fontId);
               //fontElements.removeAttribute(« face »);
               fontElements.setAttribute(« face », font_name );
              
       
            }
           
           
        </script>
       
<script>
   
function imgLeft(){
var images = document.querySelectorAll(« img »);
alert (« images :  » + images );
// Get Selection
  sel = window.getSelection();
alert (« Select :  » + sel);
for (var x = 0; x < images.length; ++x) {
      /*
    if (images[x].parentNode.tagName != « QWE ») {
        images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
      }*/
      if(x == imageId){
         images[x].className = « imgleftp »;
      }
     
    }

}
function imgCenter(){
var images = document.querySelectorAll(« img »);
alert (« images :  » + images );
// Get Selection
  sel = window.getSelection();
alert (« Select :  » + sel);
for (var x = 0; x < images.length; ++x) {
      /*
    if (images[x].parentNode.tagName != « QWE ») {
        images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
      }*/
      if(x == imageId){
         images[x].className = « imgnormal »;
      }
     
    }

}

function imgRight(){
var images = document.querySelectorAll(« img »);
alert (« images :  » + images );
// Get Selection
  sel = window.getSelection();
alert (« Select :  » + sel);
for (var x = 0; x < images.length; ++x) {
      /*
    if (images[x].parentNode.tagName != « QWE ») {
        images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
      }*/
      if(x == imageId){
         images[x].className = « imgrightp »;
      }
     
    }

}

document.addEventListener(« paste », event => {
  const text = event.clipboardData.getData(« text/plain »);
  alert (text);
//window.document.execCommand(‘insertText’, false, text);
//document.execCommand(‘Paste’);

});

document.getElementById(« paste »).addEventListener(« click », function(){

//alert (« Paste Event « );
var editor = document.getElementById(« content »);
//alert(editor);
editor.focus();
//alert (« Paste Event « );
//var text = window.clipboardData.getData(‘Text/plain’);
//alert (« Paste Event « );
//alert (« Text :  » );
//editor.select();

//document.getElementById(‘paste’).addEventListener(‘paste’, handlePaste);
var text = document.execCommand(« paste »);
//var text = window.clipboardData.getData(‘Text’);
//var event = document.addEventListener(« paste »);
//const text = event.clipboardData.getData(« text/plain »);
// alert (text);
alert (« Text :  » + text );
window.document.execCommand(‘insertText’, false, text);

});

[].forEach.call(document.querySelectorAll(« [data-edit] »), function(btn) {
  btn.addEventListener(« click », edit, false);
});

function edit(event) {
  event.preventDefault();
  var cmd_val = this.dataset.edit.split(« : »);
  if(cmd_val[0] == « insertImage »){
     alert (cmd_val[1]);
     cmd_val[1] = prompt(« Please enter url of image « , « images/map.jpg »);
  }
  document.execCommand(cmd_val[0], false, cmd_val[1]);

  var images = document.querySelectorAll(« img »);
for (var x = 0; x < images.length; ++x) {
      /*
    if (images[x].parentNode.tagName != « QWE ») {
        images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
      }*/
      if(images[x].hasAttribute(« class »)){
         //images[x].className = « imgnormal »;
       }else{
         images[x].className= »imgnormal »;
       }
      //
      var imgId = x;
      //alert(« image id : « +imgId);
      images[x].setAttribute(« id »,imgId);
      images[x].setAttribute(« onclick », »storeImgId(« +x+ »); »);
    }
 
}

var imageId;
function storeImgId(id){
   imageId = id;
   alert(« Image Selected ! »);
}

//Add P Tag when press Enter
            document.addEventListener(‘keypress’, function(e){
                if(e.keyCode == ’13’) {
                   e.preventDefault();
                   document.execCommand(‘insertParagraph’, false);
                   document.execCommand(‘formatBlock’, false, ‘p’);
                }
                if(e.keyCode == ’86’) {
                   alert (« Ctl+V pressed key »);
                   e.preventDefault();
                   window.document.execCommand(‘insertText’, false, « test »);
                   //document.execCommand(‘insertParagraph’, false);
                  // document.execCommand(‘formatBlock’, false, ‘p’);
                }
                if(e.keyCode == ’67’) {
                   alert (« Ctl+C pressed key « );
                   e.preventDefault();
                  // document.execCommand(‘insertParagraph’, false);
                  // document.execCommand(‘formatBlock’, false, ‘p’);
                }
             }, false);




document.getElementById(« html_pdf »).onclick = function() {
                 var ctn = document.getElementById(« content »);
               alert (ctn.innerHTML);
var sTable = ctn.innerHTML;
/*
        var style = « <style> »;
        style = style + « img{ background-color :red;} »
        style = style + « table { background-color:red; width: 100%;font: 17px Calibri;} »;
        style = style + « table, th, td {border: solid 1px #DDD; border-collapse: collapse; »;
        style = style + « padding: 2px 3px;text-align: center;} »;
        style = style + « </style> »;
*/
        // CREATE A WINDOW OBJECT.
        var win = window.open( »,  », ‘height=700,width=700’);

        win.document.write(‘<html><head>’);
        win.document.write(‘<title>Profile</title>’);   // <title> FOR PDF HEADER.
        //win.document.write(style);          // ADD STYLE INSIDE THE HEAD TAG.
        win.document.write(‘</head>’);
        win.document.write(‘<body bgcolor= » »>’);
        win.document.write(sTable);         // THE TABLE CONTENTS INSIDE THE BODY TAG.
        win.document.write(‘</body></html>’);

        win.document.close(); // CLOSE THE CURRENT WINDOW.

        win.print();    // PRINT THE CONTENTS.
   

     }

document.getElementById(« html_preview »).onclick = function() {
                 var ctn = document.getElementById(« content »);
               alert (ctn.innerHTML);
document.body.innerHTML = ctn.innerHTML;
  //window.print();

     }

document.getElementById(« html_code »).onclick = function() {
                 var ctn = document.getElementById(« content »);
               alert (ctn.innerHTML);
     }

document.getElementById(« html_preview »).onclick = function() {
                 var ctn = document.getElementById(« content »);
               alert (ctn.innerHTML);
document.body.innerHTML = ctn.innerHTML
     }

var intSize = «  »;
            // text_decrease_size
            document.getElementById(« text_decrease_size »).onclick = function() {
              
               document.execCommand(« fontSize », false, « 7 »);
               var fontElements = window.getSelection().anchorNode.parentNode ;
               sel = window.getSelection();
            if(intSize == «  »){
              size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
              intSize = size.replace(« px », » »);
              intSize = +intSize – 10;
              intSize = intSize.toString() + « px »;
            }else {
              intSize = intSize.replace(« px », » »);
              intSize = +intSize – 10;
              intSize = intSize.toString() + « px »;
            }
            //size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
           

            alert (size);
               fontElements.removeAttribute(« size »);
               fontElements.style.fontSize = intSize ;
           
            }
           
            // text_increase_size
            document.getElementById(« text_increase_size »).onclick = function() {
              
               document.execCommand(« fontSize », false, « 7 »);
               var fontElements = window.getSelection().anchorNode.parentNode ;
               sel = window.getSelection();
            if(intSize == «  »){
              size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
              intSize = size.replace(« px », » »);
              intSize = +intSize + 10;
              intSize = intSize.toString() + « px »;
            }else {
              intSize = intSize.replace(« px », » »);
              intSize = +intSize + 10;
              intSize = intSize.toString() + « px »;
            }
            //size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
           

            alert (size);
               fontElements.removeAttribute(« size »);
               fontElements.style.fontSize = intSize ;
           
            }

</script>
       
        <div class= »scroll » id= »content » contenteditable>
            <h1>
            Hello, World!
        </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>  Praesent sit amet odio eu magna mattis vehicula. Duis egestas fermentum leo. Nunc eget dapibus eros, id egestas magna. Fusce non arcu non quam laoreet porttitor non non dui. Ut elit nisl, facilisis id hendrerit et, maximus at nunc. Fusce at consequat massa. Curabitur fermentum odio risus, vel egestas ligula rhoncus id. Nam pulvinar mollis consectetur. Aenean dictum ut tellus id fringilla. Maecenas rutrum ultrices leo, sed tincidunt massa tempus ac. Suspendisse potenti. Aenean eu tempus nisl. </p>
           
        </div>
<br/><br/>
       
       
       
       
       
       
       
       
       
       
       
    </body>
</html>

Laisser un commentaire

Concevoir un site comme celui-ci avec WordPress.com
Commencer