SWEditor v0.2.0

Developer
Moncho Varela
Size
7,467 Kb
Views
26,312
  1. SWEditor v0.2.0 Previews
  2. SWEditor v0.2.0 HTML Codes
  3. SWEditor v0.2.0 CSS Codes
  4. SWEditor v0.2.0 JS Codes

How do I make an sweditor v0.2.0?

WYSIWYG editor Added flat colors and more font types.. What is a sweditor v0.2.0? How do you make a sweditor v0.2.0? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

SWEditor v0.2.0 Previews
IQ Test

SWEditor v0.2.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SWEditor v0.2.0</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <!--- call editor --> <div id="editor_panel"></div> <textarea id="editor_area">
<!-- Sample data -->
<h1 style="text-align: center;"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif"><font color="#1abc9c"><br></font></font></h1><h1 style="text-align: center;"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif"><font color="#1abc9c"><br></font></font></h1><h1 style="text-align: center;"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif"><font color="#1abc9c">S</font><font color="#f39c12">W</font><font color="#e74c3c">E</font><font color="#95a5a6">ditor</font> </font><font size="3" face="Consolas, monaco, monospace" color="#bdc3c7">v0.2.0</font><br></h1><p style="text-align: center;"><font color="#d35400" face="Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif">Added more fonts and added flat colors</font></p><p style="text-align: center;"><a href="http://twitter.com/nakome"><font color="#c0392b">@</font><font color="#3498db">nakome</font></a></p><p style="text-align: center;"><br></p><p></p><div style="text-align: center;"><b>Note:</b></div><div style="text-align: center;"><i><font color="#95a5a6">Text editor is responsive but for this demo the class main have 800px&nbsp;</font></i></div><div style="text-align: center;"><i><font color="#95a5a6">remove if you like.</font></i></div><div style="text-align: center;"><i><font color="#1abc9c">Thanks</font><font color="#95a5a6">.</font></i></div> </textarea>
</div> <script src="js/index.js"></script>
</body>
</html>

SWEditor v0.2.0 - Script Codes CSS Codes

/* Demo css after plugin css */
/* = ICONS
------------------- */
@import url('http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
/* = PLUGIN
------------------- */
pre{ margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;
}
#toolBar2{ background: #2c3e50; padding-left: 5px;
}
#thisForm{ margin:5px 5px 5px 5px; display:block; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; border: 0;
}
.intLink{ cursor:pointer; color: #ecf0f1; text-decoration:none; margin:6px 2px; padding:2px 5px; display:inline-block; outline:none;
}
#toolBar2 select{ font-size:13px; font-weight:bold; border: 0; width:22px; height:30px; color: #000000; background:#FFF; margin-top:2px;
}
#textBox{ min-height:200px; border:0; padding:3px; overflow:auto; background:#FFF; border-top:2px solid #BDC3C7; border-left:0; border-right:0;
}
#textBox:focus{ border-top: 2px solid #5FD3F7; border-left: 0; border-right: 0; outline: none;
}
#textBox #sourceText{ margin: 0; padding: 5px; background: #FFF; color: #4B4B4B;
}
#editMode{ background:#E74C3C; padding:5px 10px; display:inline-block; color:#ECF0F1;
}
#editMode label{ cursor:pointer;
}
input[type=checkbox]{ display:none; outline:none;
}
input[type=checkbox]:checked + label{ background:#575757; color:#FCFDFF; text-shadow:0 1px 1px #303030;
}
input[type=checkbox]:checked + label .handle{ margin-left:45px;
}
label.custom-select{ position:relative; display:inline-block;
}
.custom-select select{ display:inline-block; padding:4px 3px 3px 5px; margin:0; font:inherit; outline:none; line-height:1.2; -webkit-appearance:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
}
@media screen and (-webkit-min-device-pixel-ratio:0){ .custom-select select { padding-right:10px; }
}
.custom-select:after{ font-family:FontAwesome; position:absolute; top:0; right:0; bottom:0; font-size:14px; line-height:30px; padding:0 7px; background: #2c3e50; height:30px; margin-right:0; margin-top:2px; color: #ecf0f1; pointer-events:none;
}
.fonthd:after{ content: "\f040";}
.fontFam:after{ content:"\f034";}
.fontSi:after{ content:"\f035";}
.fontCol:after{content:"\f031";}
.fontBck:after{ content:"\f043";}
.fonthd:hover:after,.fontFam:hover:after,
.fontSi:hover:after,.fontCol:hover:after,
.fontBck:hover:after,.send-btn:hover,
.intLink:hover{ color:#1AC0F5; cursor: pointer; -webkit-transition:background 1s ease; -moz-transition:background 1s ease; -o-transition:background 1s ease; transition:background 1s ease;
}
.no-pointer-events .custom-select:after{ content:none;
} /* = DEMO MODE
------------------*/
body{background:#1abc9c;} #thisForm {box-shadow: 0 5px 25px 10px #35AC8B;} #textBox{ height:500px;} #editor_area {width: 98.5%;min-height: 200px;margin:2px} .main{ width:800px; margin:0 auto; } .head-title{ text-align:center; color:#FFFFFF; text-shadow:0 4px 3px #6D6D6D; } .head-title a { padding: 5px 10px; background: #FFF; text-decoration: none; color: #333; transition:color 1s ease; } .head-title a:hover { color: #f55; transition:color 1s ease; } .code{ background: #333; padding: 10px; border: 5px solid #1CD9E0; color: #13DCE4; } .body-text {color:white;} @media screen and (max-width: 480px;){ .main{ width:100%; margin:30px auto; } }

SWEditor v0.2.0 - Script Codes JS Codes

/** * Plugin name:SWEDitor * Author: Moncho Varela / nakome * Date: 20/10/2013 ten day for my birthday LOL * @nakome on twitter */
(function(window) { 'use strict'; function getTemplate(el) { // Template html var html = '<div class="box-editor">' + '<div id="thisForm">' + '<input type="hidden" name="myDoc">' + '<div id="toolBar2">' + '<label class="custom-select fonthd">' + '<select class="selectThis" data-chg="formatblock">' + '<option selected>:: Formatting </option>' + '<option value="h1">Header &lt;h1&gt;</option>' + '<option value="h2">Header &lt;h2&gt;</option>' + '<option value="h3">Header &lt;h3&gt;</option>' + '<option value="h4">Header &lt;h4&gt;</option>' + '<option value="h5">Header &lt;h5&gt;</option>' + '<option value="h6">Header &lt;h6&gt;</option>' + '<option value="p">Paragraph <p></option>' + '<option value="pre">Preformatted <pre></option>' + '</select>' + '</label>' + '<label class="custom-select fontFam">' + '<select class="selectThis" data-chg="fontname">' + '<option class="heading" selected>:: Font</option>' + '<option value=\' Arial, "Helvetica Neue", Helvetica, sans-serif\'>Arial</option>' + '<option value=\' "Arial Black", "Arial Bold", Gadget, sans-serif\'>Arial Black</option>' + '<option value=\' "Arial Narrow", Arial, sans-serif\'>Arial Narrow</option>' + '<option value=\' "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif\'>Arial Rounded MT Bold</option>' + '<option value=\' "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif\'>Avant Garde</option>' + '<option value=\' Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif\'>Calibri</option>' + '<option value=\' Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif\'>Candara</option>' + '<option value=\' "Century Gothic", CenturyGothic, AppleGothic, sans-serif\'>Century Gothic</option>' + '<option value=\' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif\'>Franklin Gothic Medium</option>' + '<option value=\' Futura, "Trebuchet MS", Arial, sans-serif\'>Futura</option>' + '<option value=\' Geneva, Tahoma, Verdana, sans-serif\'>Geneva</option>' + '<option value=\' "Gill Sans", "Gill Sans MT", Calibri, sans-serif\'>Gill Sans</option>' + '<option value=\' "Helvetica Neue", Helvetica, Arial, sans-serif\'>Helvetica Neue</option>' + '<option value=\' Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif\'>Impact</option>' + '<option value=\' "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif\'>Lucida Grande</option>' + '<option value=\' Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif\'>Optima</option>' + '<option value=\' "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif\'>Segoe UI</option>' + '<option value=\' Tahoma, Verdana, Segoe, sans-serif\'>Tahoma</option>' + '<option value=\' "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif\'>Trebuchet MS</option>' + '<option value=\' Verdana, Geneva, sans-serif\'>Verdana</option>' + '<option value=\' Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif\'>Baskerville</option>' + '<option value=\' "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif\'>Bodoni MT</option>' + '<option value=\' "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif\'>Book Antiqua</option>' + '<option value=\' "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif\'>Calisto MT</option>' + '<option value=\' Cambria, Georgia, serif\'>Cambria</option>' + '<option value=\' Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif\'>Didot</option>' + '<option value=\' Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif\'>Garamond</option>' + '<option value=\' Georgia, Times, "Times New Roman", serif\'>Georgia</option>' + '<option value=\' "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif\'>Goudy Old Style</option>' + '<option value=\' "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif\'>Hoefler Text</option>' + '<option value=\' "Lucida Bright", Georgia, serif\'>Lucida Bright</option>' + '<option value=\' Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif\'>Palatino</option>' + '<option value=\' Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif\'>Perpetua</option>' + '<option value=\' Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif\'>Rockwell</option>' + '<option value=\' "Rockwell Extra Bold", "Rockwell Bold", monospace\'>Rockwell Extra Bold</option>' + '<option value=\' TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif\'>TimesNewRoman</option>' + '<option value=\' "Andale Mono", AndaleMono, monospace\'>Andale Mono</option>' + '<option value=\' Consolas, monaco, monospace\'>Consolas</option>' + '<option value=\' "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace\'>Courier New</option>' + '<option value=\' "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace\'>Lucida Console</option>' + '<option value=\' "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace\'>Lucida Sans Typewriter</option>' + '<option value=\' Monaco, Consolas, "Lucida Console", monospace\'>Monaco</option>' + '<option value=\' Copperplate, "Copperplate Gothic Light", fantasy\'>Copperplate</option>' + '<option value=\' Papyrus, fantasy\'>Papyrus</option>' + '<option value=\' "Brush Script MT", cursive\'>Brush Script MT</option> ' + '</select></label>' + '<label class="custom-select fontSi">' + '<select class="selectThis" data-chg="fontsize">' + '<option class="heading" selected>:: Size</option>' + '<option value="1">Very small</option>' + '<option value="2">A bit small</option>' + '<option value="3">Normal</option>' + '<option value="4">Medium-large</option>' + '<option value="5">Big</option>' + '<option value="6">Very big</option>' + '<option value="7">Maximum</option>' + '</select>' + '</label>' + '<label class="custom-select fontCol">' + '<select class="selectThis" data-chg="forecolor">' + '<option class="heading" selected>:: Color</option>' + '<option value="#1abc9c" style="background:#1abc9c;"> turquoise</option>' + '<option value="#16a085" style="background:#16a085;"> greensea</option>' + '<option value="#2ecc71" style="background:#2ecc71;"> emerald</option>' + '<option value="#27ae60" style="background:#27ae60;"> nephritis</option>' + '<option value="#3498db" style="background:#3498db;"> peterriver</option>' + '<option value="#2980b9" style="background:#2980b9;"> belizehole</option>' + '<option value="#9b59b6" style="background:#9b59b6;"> amethyst</option>' + '<option value="#8e44ad" style="background:#8e44ad;"> westeria</option>' + '<option value="#34495e" style="background:#34495e;"> wetasphalt</option>' + '<option value="#2c3e50" style="background:#2c3e50;"> midnightblue</option>' + '<option value="#f1c40f" style="background:#f1c40f;"> sunflower</option>' + '<option value="#f39c12" style="background:#f39c12;"> orange</option>' + '<option value="#e67e22" style="background:#e67e22;"> carrot</option>' + '<option value="#d35400" style="background:#d35400;"> pumpkin</option>' + '<option value="#e74c3c" style="background:#e74c3c;"> alizarin</option>' + '<option value="#c0392b" style="background:#c0392b;"> pomegranate</option>' + '<option value="#ecf0f1" style="background:#ecf0f1;"> clouds</option>' + '<option value="#bdc3c7" style="background:#bdc3c7;"> silver</option>' + '<option value="#95a5a6" style="background:#95a5a6;"> concrete</option>' + '<option value="#7f8c8d" style="background:#7f8c8d;"> abestos</option>' + '</select>' + '</label>' + '<label class="custom-select fontBck">' + '<select class="selectThis" data-chg="backcolor">' + '<option class="heading" selected>:: Background </option>' + '<option value="#1abc9c" style="background:#1abc9c;"> turquoise</option>' + '<option value="#16a085" style="background:#16a085;"> greensea</option>' + '<option value="#2ecc71" style="background:#2ecc71;"> emerald</option>' + '<option value="#27ae60" style="background:#27ae60;"> nephritis</option>' + '<option value="#3498db" style="background:#3498db;"> peterriver</option>' + '<option value="#2980b9" style="background:#2980b9;"> belizehole</option>' + '<option value="#9b59b6" style="background:#9b59b6;"> amethyst</option>' + '<option value="#8e44ad" style="background:#8e44ad;"> westeria</option>' + '<option value="#34495e" style="background:#34495e;"> wetasphalt</option>' + '<option value="#2c3e50" style="background:#2c3e50;"> midnightblue</option>' + '<option value="#f1c40f" style="background:#f1c40f;"> sunflower</option>' + '<option value="#f39c12" style="background:#f39c12;"> orange</option>' + '<option value="#e67e22" style="background:#e67e22;"> carrot</option>' + '<option value="#d35400" style="background:#d35400;"> pumpkin</option>' + '<option value="#e74c3c" style="background:#e74c3c;"> alizarin</option>' + '<option value="#c0392b" style="background:#c0392b;"> pomegranate</option>' + '<option value="#ecf0f1" style="background:#ecf0f1;"> clouds</option>' + '<option value="#bdc3c7" style="background:#bdc3c7;"> silver</option>' + '<option value="#95a5a6" style="background:#95a5a6;"> concrete</option>' + '<option value="#7f8c8d" style="background:#7f8c8d;"> abestos</option>' + '</select>' + '</label>' + '<input type="checkbox" name="switchMode" id="switchBox"/>' + '<label for="switchBox" class="intLink"><i class="icon-code"></i></label>' + '<a href="javascript:void(0);" class="intLink" title="Clean" id="getClean">' + '<i class="icon-eraser"></i></a>' + '<a href="javascript:void(0);" class="intLink" title="Print" id="getPrint">' + '<i class="icon-print"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Undo" data-fn="undo">' + '<i class="icon-undo"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Redo" data-fn="redo">' + '<i class="icon-repeat"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Remove formatting" data-fn="removeFormat">' + '<i class="icon-remove"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Bold" data-fn="bold">' + '<i class="icon-bold"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Italic" data-fn="italic">' + '<i class="icon-italic"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Underline" data-fn="underline">' + '<i class="icon-underline"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Left align" data-fn="justifyleft">' + '<i class="icon-align-left"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Center align" data-fn="justifycenter">' + '<i class="icon-align-center"></i>' + '</a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Right align" data-fn="justifyright">' + '<i class="icon-align-right">' + '</i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Numbered list" data-fn="insertorderedList">' + '<i class="icon-list-ol"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Dotted list" data-fn="insertunorderedList">' + '<i class="icon-list-ul"></i></a>' + '<a href="javascript:void(0);" class="intLink" title="Quote" id="quote" data-fn="blockquote">' + '<i class="icon-quote-left"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Add indentation" data-fn="indent">' + '<i class="icon-indent-right"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Delete indentation" data-fn="outdent">' + '<i class="icon-indent-left"></i></a>' + '<a href="javascript:void(0);" class="intLink" title="Hyperlink" id="getLink" data-fn="createlink">' + '<i class="icon-link"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Unlink" data-fn="unlink">' + '<i class="icon-unlink"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Select all" data-fn="selectall">' + '<i class="icon-copy"></i></a>' + '<a href="javascript:void(0);" class="intLink formatBlock" title="Get hr" data-fn="inserthorizontalrule">' + 'HR </a>' + ' <a href="javascript:void(0);" class="intLink" title="Get img" id="getImg" data-fn="insertImage">' + '<i class="icon-picture">' + '</i></a>' + ' </div>' + '<div id="textBox" contenteditable="true">' + '</div></div></div>'; // render html el.innerHTML = html; } function initDoc(fm, bx) { var elem = bx, sDefTxt; sDefTxt = bx.innerHTML; if (fm.checked) { setDocMode(true); } } function formatDoc(obj, val) { if (validateMode()) { document.execCommand(obj, false, val); } } function validateMode() { var thisForm = document.querySelector('#thisForm'); if (!thisForm.checked) { return true; } alert("Uncheck \"Show HTML\"."); return false; } function setDocMode(source, oDoc) { var sDefTxt = oDoc.innerHTML; var oContent; if (source) { oContent = document.createTextNode(sDefTxt); oDoc.innerHTML = ""; var oPre = document.createElement("pre"); oDoc.contentEditable = false; oPre.id = "sourceText"; oPre.contentEditable = true; oPre.appendChild(oContent); oDoc.appendChild(oPre); } else { if (document.all) { sDefTxt = oDoc.innerText; } else { oContent = document.createRange(); oContent.selectNodeContents(oDoc.firstChild); oDoc.innerHTML = oContent.toString(); } oDoc.contentEditable = true; } } // print function function printDoc(el) { if (!validateMode()) { return; } var oPrntWin = window.open("", "_blank", "width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oPrntWin.document.open(); oPrntWin.document.write('<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">' + el + '<\/body><\/html>'); oPrntWin.document.close(); } // extend options function extend(a, b) { for (var key in b) { if (b.hasOwnProperty(key)) { a[key] = b[key]; } } return a; } function sweDitor(elem, options) { // The div of editor this.elem = elem; // The options ex. this.options.type = hello this.options = extend(this.defaults, options); // Get Template getTemplate(elem); // Start init this._init(); } sweDitor.prototype = { // this.options.type defaults: { textArea: 'editor_area', showTextarea: true }, // this._init(); _init: function() { var self = this; // Div of content this.box = document.querySelector('#textBox'); // array for change event this.selects = Array.prototype.slice.call(this.elem.querySelectorAll('.selectThis')); // array for click event this.formats = Array.prototype.slice.call(this.elem.querySelectorAll('.formatBlock')); // get print id this.getPrint = document.getElementById('getPrint'); // The textarea this.textArea = document.getElementById(this.options.textArea); // get clean id this.getClean = document.getElementById('getClean'); // get link id this.getLink = document.getElementById('getLink'); // get img id this.getImg = document.getElementById('getImg'); // get switchbox this.quote = document.getElementById('quote'); // get switchbox this.switchBox = document.getElementById('switchBox'); // Init Doc function initDoc(this, this.textArea); this._initEvents(); }, // this._initEvents(); _initEvents: function() { var self = this; //Show or hide textarea if (this.options.showTextarea === true) { self.textArea.style.display = 'block'; } else { self.textArea.style.display = 'none'; } // On ready copy text of text area this.box.innerHTML = this.textArea.textContent; // On keyup copy text on textarea this.box.addEventListener('keyup', function() { self.textArea.textContent = self.box.innerHTML; }, false); // On keydown copy text on textarea this.box.addEventListener('keydown', function() { self.textArea.textContent = self.box.innerHTML; }, false); // add event on change for all selects this.selects.forEach(function(el, i) { el.addEventListener('change', function() { formatDoc(this.getAttribute('data-chg'), this.value); self.textArea.textContent = self.box.innerHTML; }, false); }); // get print this.getPrint.addEventListener('click', function() { printDoc(self.textArea.textContent); self.textArea.textContent = self.box.innerHTML; }, false); // get clean this.getClean.addEventListener('click', function() { if (validateMode() && confirm('Are you sure?')) { self.box.innerHTML = ''; } self.textArea.textContent = self.box.innerHTML; }, false); // link listener this.getLink.addEventListener('click', function() { var sLnk = prompt('Write the URL here', 'http:\/\/'); if (sLnk && sLnk !== '' && sLnk !== 'http://') { formatDoc(this.getAttribute('data-fn'), sLnk); self.textArea.textContent = self.box.innerHTML; } }, false); // img listener this.getImg.addEventListener('click', function() { var simg = prompt('Write the URL of image here', 'http:\/\/'); if (simg && simg !== '') { formatDoc(this.getAttribute('data-fn'), simg); self.textArea.textContent = self.box.innerHTML; } }, false); // all other formats this.formats.forEach(function(el, i) { el.addEventListener('click', function() { formatDoc(this.getAttribute('data-fn')); self.textArea.textContent = self.box.innerHTML; }, false); }); // blockquote this.quote.addEventListener('click', function() { formatDoc('formatblock', this.getAttribute('data-fn')); self.textArea.textContent = self.box.innerHTML; }, false); // swich pre code this.switchBox.addEventListener('change', function() { setDocMode(this.checked, self.box); self.textArea.textContent = self.box.innerHTML; }, false); } }; // add to global namespace window.sweDitor = sweDitor;
})(window);
// Init editor
new sweDitor(document.getElementById('editor_panel'),{ textArea: 'editor_area', //id of textarea showTextarea: false // if true show hidden text area
});
SWEditor v0.2.0 - Script Codes
SWEditor v0.2.0 - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 7,467 Kb
Views 26,312
Do you need developer help for SWEditor v0.2.0?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Name
Get color on click
Responsive table with json data.
Youtube videos
Html demos with data uri
One page theme
A Pen by Moncho Varela
Neo minimal theme
Calendar with json events mobile concept
Simply Redirect to
Another Gallery
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!