Wygsiwyg NPM | npm.io

Description

This wygsiwyg editor is designed for developers and easy to implement whthin few minutes,easy to customize all the widgets

Download and Install wygsiwyg Editor

Install from npm

npm install wygsiwyg --save

Import Option 1

const isat=require('wygsiwyg');

Import Option 2

import isat from 'wygsiwyg'

Usage

isat.isat_wygsiwyg_zone({ });

apply editable

here isat_editable_content=isat_editable_content is must to perform wygsiwyg

 <div isat_editable_content="isat_editable_content">this is writable</div>

usage 1

apply your own style for wydgets and then make container if you want ,which is fully developer friendly

    
  <a id="isat-left">left</a>
  <a id="isat-center">center</a>
  <a id="isat-right">right</a>
  <a id="isat-jfull">jfull</a>
  <a id="isat-indent"> isat indent</a>
  <a id="isat-outdent">outdent</a>  
  <a id="isat-insertOrderedList"> isat-insertOrderedList</a>
  <a id="isat-insertUnorderedList">isat-insertUnorderedList</a>   
  <a id="isat-bold">bold</a>  
  <a id="isat-italic">italic</a>  
  <a id="isat-strikeThrough">strikeThrough</a>  
  <a id="isat-subscript">subscript
  <a id="isat-superscript">superscript</a>    
  <a id="isat-underline"> underline</a>
  <a id="isat-createlink">createlink</a>
  <a id="isat-unlink">unlink</a>      
  <a id="isat-header-1">h1</a>
  <a id="isat-header-2">h2</a>   
  <a id="isat-undo">undo</a>
  <a id="isat-redo">redo</a>
  <a id="isat-getText">isat getText</a>   
  <a id="isat-getCode">isat getCode</a> 

 <!-- color code #aaaa or red rgb()... -->
  <select name="slct" id="isat-forecolor">
            
      <option value="red">red</option>  
      <option value="green">green</option>  
  
</select>


 <!-- color code #aaaa or red rgb()... -->
<select name="slct" id="isat-backcolor">
            
        <option value="red">red</option>  
        <option value="green">green</option>  
    
  </select>

  
  
  <!-- google fonts here -->
    <select name="slct" id="isat-fontfamily">            
              <option value="default">default</option>    
              <option value="Arial">Arial</option>    
              <option value="Tangerine">Tangerine</option>    
              <option value="Comic Sans MS">Comic Sans MS</option>    
              <option value="Calibri">Calibri</option>    
              <option value="ZCOOL KuaiLe">ZCOOL KuaiLe</option>     
              <option value="Mogra">Mogra</option>  
              <option value="Gloria Hallelujah">Gloria Hallelujah</option>  
    </select>
      

    <select  id="isat-headers" >
                  <option  value="p">Normal</option>    
                  <option  value="h1">HEADER 1</option>    
                  <option  value="h2">HEADER 2</option>    
                  <option  value="h3">HEADER 3</option>    
                  <option  value="h4">HEADER 4</option>
                  <option  value="h5">HEADER 5</option>
                  <option  value="h6">HEADER 6</option>
    </select>

Example Code

<!-- Add Own Style -->
 <a id="isat-bold">bold</a>  
 <a id="isat-italic"> italic</a>
 <!-- Editable Area -->
 <div isat_editable_content="isat_editable_content">Editable area</div>

const isat=require('wygsiwyg');
isat.isat_wygsiwyg_zone({
     editor_style:"border: 1px solid;padding: 10px;box-shadow: 5px 10px;",
     trigger:1,
   
});

options

contentEditable style

isat.isat_wygsiwyg_zone({
    // apply css style in string 
     editor_style:"border: 1px solid;padding: 10px;box-shadow: 5px 10px;",
    
   
});

Triggers

contenteditable default value is 2 ->dblclick if triiger:1 ->click

isat.isat_wygsiwyg_zone({
     trigger:1,
   
});

For Disable wygsiwyg

isat.isat_wygsiwyg_zone({
     disable:false,
   
});

Manually apply size of image preview

  
 <input class="tool-items fa fa-file-image-o" type="file" accept="image/*"   id="isat-image" >
 <!-- Editable Area -->
 <div isat_editable_content="isat_editable_content">Editable area</div>

isat.isat_wygsiwyg_zone({
 
 imgMode:{
         height:40,
         width:50
    },

});

##get html or plain text

  
 <!-- Editable Area -->
 <div isat_editable_content="isat_editable_content">Editable area</div>  
<!-- Add Own Style with your element -->
<a id="isat-getText">isat getText</a>
  
<a id="isat-getCode">isat getCode</a> 

  <div id="mycode">Output</div>

isat.isat_wygsiwyg_zone({
 

dataMode:{
     attribute:document.getElementById("mycode")
    }


});

Get HTML Code

isat.getCode()

Get Plain Text

isat.getText()

scripts

isat.isatExec({cmd:"bold"});
isat.isatExec({cmd:"italic"});
//justify left.....
isat.isatExec({cmd:"jleft"});
isat.isatExec({cmd:"jright"});
isat.isatExec({cmd:"jcenter"});
isat.isatExec({cmd:"jfull"});
//indent and utdent
isat.isatExec({cmd:"indent"});
isat.isatExec({cmd:"outdent"});
//order and unorder list
isat.isatExec({cmd:"ol"});
isat.isatExec({cmd:"ul"});
//sub and supper script
isat.isatExec({cmd:"subscript"});
isat.isatExec({cmd:"supscript"});
//underline and strikethrough
isat.isatExec({cmd:"strikethrough"});
isat.isatExec({cmd:"underline"});
//undo and redo
isat.isatExec({cmd:"undo"});
isat.isatExec({cmd:"redo"});
isat.isatExec({cmd:"createlink",link:"http://google.com",name:"google"});
isat.isatExec({cmd:"unlink"});
//colour code, rgb and rgba...
isat.isatExec({cmd:"forecolor",color:"red"});
isat.isatExec({cmd:"backcolor",color:"green"});
// heades h1,h2,h3,h4,h5 and h6
isat.isatExec({cmd:"headers",tag:"h1"});
// google fonts
isat.isatExec({cmd:"fontfamily",type:"Mogra"});

Props

Props	Datatype	Default
editor_style	string	none
trigger	integer	2
disable	boolean	false
imgMode:{ height:40, width:50 },	int	none(full image aspect ratio)
dataMode:{ attribute:document.getElementById("mycode") }	element	none