Skip to content

Instantly share code, notes, and snippets.

@malikkurosaki

malikkurosaki/w3editor.php

Created March 29, 2018 03:41
Show Gist options
  • Save malikkurosaki/0123d25fccc8a10367f3f98d6badf28f to your computer and use it in GitHub Desktop.
Save malikkurosaki/0123d25fccc8a10367f3f98d6badf28f to your computer and use it in GitHub Desktop.
Download ZIP
text editor v4
Raw
w3editor.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
</head>
<body>
<script>
/*
author : malik kurosaki
contact : WA 081338929722
*/
//==========
var data = {
background:"w3-red w3-pink w3-purple w3-deep-purple w3-indigo w3-blue w3-light-blue w3-cyan w3-aqua w3-teal w3-green w3-light-green w3-lime w3-sand w3-khaki w3-yellow w3-amber w3-orange w3-deep-orange w3-blue-grey w3-brown w3-light-grey w3-grey w3-dark-grey w3-black w3-pale-red w3-pale-yellow w3-pale-green w3-pale-blue w3-transparent",
textColor:"w3-text-red w3-text-green w3-text-blue w3-text-yellow w3-text-grey w3-text-dark-grey w3-text-black w3-text-white w3-text-pink w3-text-purple w3-text-teal w3-text-light-green w3-text-lime w3-text-deep-purple w3-text-indigo w3-text-light-blue w3-text-blue-grey w3-text-cyan w3-text-aqua w3-text-amber w3-text-orange w3-text-deep-orange w3-text-sand w3-text-khaki w3-text-brown",
round:"w3-round w3-round-small w3-round-medium w3-round-large w3-round-xlarge w3-round-xxlarge w3-round-jumbo",
padding:"w3-padding-small w3-padding w3-padding-large w3-padding-16 w3-padding-24 w3-padding-32 w3-padding-48 w3-padding-64",
margin:"w3-margin w3-margin-top w3-margin-right w3-margin-bottom w3-margin-left w3-section",
border:"w3-border w3-border-top w3-border-right w3-border-bottom w3-border-left w3-border-0 w3-border-color w3-bottombar w3-leftbar w3-rightbar w3-topbar",
container:"w3-container w3-panel w3-badge w3-tag w3-ul w3-display-container w3-code w3-codespan",
card:"w3-card w3-card-2 w3-card-4",
responsive:"w3-row w3-row-padding w3-content w3-half w3-third w3-twothird w3-quarter w3-threequarter w3-col w3-rest w3-hide-small w3-hide-medium w3-hide-large w3-image w3-mobile",
layout:"w3-cell-row w3-cell w3-cell-top w3-cell-middle w3-cell-bottom",
navigation:"w3-bar w3-bar-block w3-bar-item w3-collapse w3-main",
button:"w3-button w3-btn w3-ripple",
input:"w3-input w3-check w3-radio w3-select w3-animate-input",
modal:"w3-tooltip w3-text w3-leftbar w3-image w3-center w3-right w3-container",
animation:"w3-animate-top w3-animate-left w3-animate-bottom w3-animate-right w3-animate-opacity w3-animate-zoom w3-animate-fading w3-spin w3-animate-input",
font:"w3-tiny w3-small w3-large w3-xlarge w3-xxlarge w3-xxxlarge w3-jumbo w3-wide w3-serif",
effect:"w3-opacity w3-opacity-off w3-opacity-min w3-opacity-max w3-grayscale-min w3-grayscale w3-grayscale-max w3-sepia-min w3-sepia w3-sepia-max "
}
var pOption = ["newLine","tool","remove","link","image","save"];
var gData = Object.keys(data);
var cEdit = cdv("");
var cTbl = ctb();
var r = [ctr(),ctr(),ctr(),ctr()];
var d = [ctd(""),ctd(""),ctd(""),ctd("")];
var t = gcl("ptab");
var ttl = [cdv('w3Editor')];
var p = [data.background.split(" "),data.textColor.split(" "),data.round.split(" "),data.padding.split(" "),data.margin.split(" "),data.border.split(" "),data.container.split(" "),data.card.split(" "),data.responsive.split(" "),data.layout.split(" "),data.navigation.split(" "),data.button.split(" "),data.input.split(" "),data.modal.split(" "),data.animation.split(" "),data.font.split(" "),data.effect.split(" ")];
var ipt = []
var desc = [cdv("your title here"),cdv("short description here"),cdv(new Date())];
//==========
document.body.style.cssText = "";
r[3].style.cssText = "";
d[3].style.cssText = "";
//=====================
cEdit.setAttribute("class","w3-content w3-responsive");
cTbl.setAttribute("class","w3-table-all w3-light-grey");
r[0].setAttribute("class","");
d[3].setAttribute("class","");
d[0].setAttribute("class","w3-blue-grey");
d[1].setAttribute("class","w3-grey");
ttl[0].setAttribute("class","w3-tiny");
desc[0].setAttribute("id","ptitle");
desc[1].setAttribute("id","pdesc");
desc[2].setAttribute("id","ptime");
desc[0].setAttribute("class","ptitle edit");
desc[1].setAttribute("class","pdesc edit");
desc[2].setAttribute("class","ptime edit w3-blue-grey");
desc[0].contentEditable = true;
desc[1].contentEditable = true;
desc[2].contentEditable = true;
//==========
document.body.appendChild(cEdit);
cEdit.appendChild(cTbl);
cTbl.appendChild(r[0]);
cTbl.appendChild(r[1]);
cTbl.appendChild(r[2]);
cTbl.appendChild(r[3]);
r[0].appendChild(d[0]);
r[1].appendChild(d[1]);
//r[2].appendChild(d[2]);
r[3].appendChild(d[3]);
d[3].appendChild(desc[0]);
d[3].appendChild(desc[1]);
d[3].appendChild(desc[2]);
//==========
//option menu
d[0].appendChild(ttl[0]);
for(var i =0;i<pOption.length;i++){
var op = btn(pOption[i]);
op.setAttribute("id",pOption[i]);
op.setAttribute("class"," w3-text-blue-grey w3-tiny");
d[0].appendChild(op);
}
// tab menu
for(var i = 0;i<gData.length;i++){
var pData = btn(gData[i]);
pData.setAttribute("class","panel w3-text-blue-grey w3-tiny");
pData.setAttribute("id",gData[i]);
d[1].appendChild(pData);
}
// tab container
for(var i=0;i<p.length;i++){
var pTd = ctd("");
pTd.setAttribute("id",gData[i] +"a");
pTd.setAttribute("class","ptab w3-blue-grey w3-hide");
r[2].appendChild(pTd);
dtab(p[i],t[i]);
}
//============
// bar item contain css item
function dtab(...arg){
var tp = arg[0];
for(var i=0;i<tp.length;i++){
var cTab = btn(tp[i]);
cTab.setAttribute("id",tp[i]);
cTab.setAttribute("class",arg[0][i] +" w3-tiny cssitem");
arg[1].appendChild(cTab);
}
}
// click panel
var gg = gcl("panel");
var hh = gcl("ptab");
for (var i=0;i<gg.length;i++){
gg[i].onclick = function(e){
for(var z = 0;z<hh.length;z++){
hh[z].classList.add("w3-hide");
gid(e.target.id +"a").classList.remove("w3-hide");
}
}
}
//create new line
var newline = gid("newLine");
newline.onclick = function(){
var cnw = cdv("edit me");
cnw.setAttribute("class","edit ");
d[3].appendChild(cnw);
};
//make content editable
document.body.onmouseover = editable;
function editable(e){
var imm = document.getElementsByTagName("img");
var edt = gcl("edit");
for(var i = 0;i<edt.length;i++){
edt[i].contentEditable = true;
edt[i].onmouseover = function(e){
e.target.classList.add("w3-border");
}
edt[i].onmouseout= function(e){
e.target.classList.remove("w3-border");
}
}
//set image style
for(var i=0;i<imm.length;i++){
imm[i].style.cssText = "margin:16px;";
imm[i].setAttribute("class","w3-round w3-border w3-border-white edit");
}
//remove element
var rm = gid("remove");
rm.onmousedown = function(){
window.getSelection().anchorNode.parentElement.classList.toggle("w3-hide");
}
//create link
gid("link").onmousedown = function(){
var prm = prompt("select the text firs than fill in url here");
if(prm != null){
var lk = clk(prm);
if(window.getSelection){
window.getSelection().getRangeAt(0).surroundContents(lk);
}
}
}
//insert new image
gid("image").onmousedown = function(){
var prm = prompt("you just insert url of image or drag n drop from google strike to line editor");
if(prm != null){
var nim = cimg(prm);
if(window.getSelection){
window.getSelection().getRangeAt(0).surroundContents(nim);
}
}
}
gid("save").onmousedown = function(){
var cimg2 = document.getElementsByTagName("img");
if(cimg2.length == 0){
alert("please insert image one or more");
}else{
var pg = prompt("give the name of your page name to save");
var cef = gcl("edit");
for(var i = 0;i<cef.length;i++){
cef[i].contentEditable = false;
}
if(pg != null){
var hr = document.createElement("div");
hr.appendChild(document.createTextNode("-"));
hr.setAttribute("class","edit w3-padding-large w3-input w3-text-light-grey");
d[3].lastChild.appendChild(hr);
var serializer = new XMLSerializer ();
var doc =encodeURI(serializer.serializeToString(d[3]));
var Xht = new XMLHttpRequest();
Xht.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
location.reload();
}
};
var enc = encodeURI(cimg2[0].src);
Xht.open("GET","save.php?p=" + doc +"&&n="+ pg +"&&t="+ gid("ptitle").innerHTML +"&&d="+ gid("pdesc").innerHTML +"&&i="+ enc,true);
Xht.send();
}
}
}
}
// check the child elemen of d[3] is empty
document.body.onclick = function(){
//check that selection is empty
if(window.getSelection().toString()){
//c("selsected");
}else{
//c("not selected);
}
//check that editor line is empty
if(d[3].childElementCount == 0){
}else{
}
}
//event css
var stl = gcl("cssitem");
for(var x=0;x<stl.length;x++){
stl[x].onclick = function(e){
if(window.getSelection){
window.getSelection().anchorNode.parentElement.classList.toggle(e.target.id);
}
}
}
//toogle tool panel
d[1].classList.add("w3-hide");
gid("tool").onclick = function(){
d[1].classList.toggle("w3-hide");
var gpt = gcl("ptab");
for(var i =0;i<gpt.length;i++){
gpt[i].classList.add("w3-hide");
}
}
// core ===========
//create new image
function cimg(...arg){
var nimg = document.createElement("img");
nimg.setAttribute("src",arg[0]);
return nimg;
}
//create new link
function clk(...arg){
var nlk = document.createElement("a");
nlk.setAttribute("href",arg[0]);
return nlk;
}
//create table
function ctb(...arg){
return document.createElement("table");
}
//create tr
function ctr(...arg){
return document.createElement("tr");
}
//create th
function cth(...arg){
var th = document.createElement("th");
var txh = document.createTextNode(arg[0]);
th.appendChild(txh);
return th;
}
//create td
function ctd(...arg){
var td = document.createElement("td");
var txd = document.createTextNode(arg[0]);
td.appendChild(txd);
return td;
}
//get id
function gid(...arg){
return document.getElementById(arg[0]);
}
//create div
function cdv(...arg){
var a = document.createElement("div");
var b = document.createTextNode(arg[0]);
a.appendChild(b);
return a;
}
//get element by class name
function gcl(...arg){
return document.getElementsByClassName(arg[0]);
}
//short console log
function c(...arg){
console.log(arg[0]);
}
function cfm(...arg){
return document.createElement("form");
}
function inpt(...arg){
var aipt = document.createElement("input");
aipt.setAttribute("placeholder",arg[0]);
return aipt;
}
function btn(...arg){
var abtn = document.createElement("button");
var bbtn = document.createTextNode(arg[0]);
abtn.appendChild(bbtn);
return abtn;
}
document.onmousemove = function(){
if( window.getSelection().anchorNode.parentElement.className.includes("edit")){
}else{
getSelection().removeAllRanges();
}
}
function srl(...arg){
var srl = new XMLSerializer ();
var doc = encodeURI(srl.serializeToString(arg[0]));
return doc;
}
</script>
<div id="tlist" class="w3-padding">
<table class="w3-table-all w3-round">
<tr class="w3-teal">
<td>file exist</td>
<td></td>
<td></td>
<td id="uplimg" class="w3-blue-grey w3-center w3-tiny">
<button id="upl">upload</button>
</td>
</tr>
<?php
$ht = "";
$dir = "page";
if(is_dir(($dir))){
$rdir = scandir($dir);
$sdir = array_diff($rdir,array(".",".."));
foreach($sdir as $fdir){
echo '<tr><td id="'.$fdir.'a" class=""><a href="index.php?pg='.basename($fdir,".html").'">'.basename($fdir,".html").'</a></td><td id="'.$fdir.'" class="w3-hover-grey toedit">edit</td><td id="'.$fdir.'" class="w3-hover-grey toremove">remove</td id="imglib"><td></td></tr>';
}
}else{
mkdir("lib");
mkdir("og");
if(mkdir($dir,0700)){
echo "<script>alert('folder page created');</script>" ;
}else{
echo "<script>alert('create folder page failed , create it one manualy');</script>" ;
}
}
// check the save file is exist
if(file_exists("save.php")){
}else{
$vv = '<?php if(isset($_GET["p"])){if(file_put_contents(dirname(__FILE__)."/page/".$_GET["n"].".html",$_GET["p"])){echo "saved";$ct = $_GET["t"]."\n".$_GET["d"]."\n".$_GET["i"];file_put_contents(dirname(__FILE__)."/og/".$_GET["n"].".txt",$ct);}else{echo "some errror";}}if(isset($_GET["r"])){if(unlink("page/".$_GET["r"])){echo "removed";$dur = str_replace(".html",".txt",$_GET["r"]);unlink("og/".$dur);}else{echo "error";}}if(isset($_GET["h"])){$a = scandir("page/");$b = array_diff($a,array("..","."));foreach($b as $c){include_once "page/".$c;}}?>';
if(file_put_contents("save.php",$vv)){
echo "<script>alert('save file created');</script>";
}else{
echo "<script>alert('create file save is error, reinstall it');</script>" ;
}
}
//=============
if(file_exists("log.php")){
}else{
}
if(file_exists("index.php")){
}else{
}
?>
</table>
</div>
<script>
var toedit = gcl("toedit");
for(var i=0;i<toedit.length;i++){
toedit[i].onmousedown = function(e){
var xm = new XMLHttpRequest();
xm.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var nedit = document.createElement("div");
nedit.innerHTML = this.responseText;
nedit.cloneNode(true);
d[3].appendChild(nedit);
}
};
xm.open("GET","page/"+ e.target.id,true);
xm.send();
}
}
var toremove = gcl("toremove");
for(var i=0;i<toremove.length;i++){
toremove[i].onmousedown = function(e){
var xmr = new XMLHttpRequest();
xmr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
if(this.responseText.includes("removed")){
location.reload();
}
}
};
xmr.open("GET","save.php?r="+ e.target.id,true);
xmr.send();
}
}
</script>
<form id="frmimg" action="save.php" method="post" enctype="multipart/form-data">
<input id="in" type="file" name="img">
<input name="fl">
</form>
<script>
gid("in").onchange = function(){
gid("frmimg").submit();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment