wysiwyg editor get value in PHP
code:-
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>text editor</title>
</head>
<body onload="editmode();">
<div class="head">
<h1>create new post</h1>
</div>
<div class="title">
<span>Title</span><input type="text" name="title">
</div>
<!-- editor box -->
<div class="editor-box">
<div class="editor-tool">
<button onclick="editor('bold');"><i class="fa fa-bold"></i></button>
<button onclick="editor('italic');"><i class="fa fa-italic"></i></button>
<button onclick="editor('underline');"><i class="fa fa-underline"></i></button>
<button onclick="editor('strikeThohrough');"><i class="fa fa-strikethrough"></i></button>
<button onclick="editor('justifyLEft');"><i class="fa fa-align-left"></i></button>
<button onclick="editor('justifyCenter');"><i class="fa fa-align-center"></i></button>
<button onclick="editor('justifyRight');"><i class="fa fa-align-right"></i></button>
<button onclick="editor('justifyFull');"><i class="fa fa-align-justify"></i></button>
<button onclick="editor('cut');"><i class="fa fa-cut"></i></button>
<button onclick="editor('paste');"><i class="fa fa-paste"></i></button>
<button onclick="editor('copy');"><i class="fa fa-copy"></i></button>
<button onclick="editor('indent');"><i class="fa fa-indent"></i></button>
<button onclick="editor('dedent');"><i class="fa fa-dedent"></i></button>
<button onclick="editor('undo');"><i class="fa fa-undo"></i></button>
<button onclick="editor('insertUnorderedList');"><i class="fa fa-list-ul"></i></button>
<button onclick="editor('insertOrderedList'');"><i class="fa fa-list-ol"></i></button>
<button onclick="editor('redo');"><i class="fa fa-repeat"></i></button>
<button onclick="editor('insertParagraph');"><i class="fa fa-paragraph"></i></button>
<button onclick="editor('superscript');"><i class="fa fa-superscript"></i></button>
<button onclick="editor('subscript');"><i class="fa fa-subscript"></i></button>
<select onchange="editorfont('formatBlock',this.value);">
<option VALUE="H1">H1</option>
<option VALUE="H1">H2</option>
<option VALUE="H1">H3</option>
</select>
<button onclick="editor('insertHorizontalRule');">hr</button>
<button onclick="editorfont('createLink',propmpt('enter a url','http://'));"><i class="fa fa-link"></i></button>
<button onclick="editor('unlink');"><i class="fa fa-unlink"></i></button>
<button onclick="source();"><i class="fa fa-code"></i></button>
<button onclick="sourceedit();">edit</button><br><br>
<select onclick="editorfont('fontName',this.value);">
<option value="arial">arial</option>
<option value="arial">courier</option>
</select>
<select onchange="editorfont('fontSize',this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
forcolor<input type="color"onchange="editorfont('foreColor',this.value);">
background<input type="color"onclick="editorfont('hiliteColor',this.value);">
<button onclick="editorfont('createLink',propmpt('enter a image',''));"><i class="fa fa-file-image-o"></i></button>
<button onclick="editor('italic');">select all</button>
<button onclick="editor(table);">table</button>
</div>
<form action="submit.php" method="post" id="submit">
<textarea name="textarea"id="textarea" style="display: none"></textarea>
<iframe name="richTextField"style="width=100%;height: 500px" id="editorbox"></iframe>
</div>
</form>
<button onclick="formsubmit();">post</button>
<span id="view"></span>
<script type="text/javascript">
function editmode()
{
richTextField.document.designMode = 'on';
}
function editor(cmd)
{
richTextField.document.execCommand(cmd,false);
var b=document.getElementById('editorbox');
var a = richTextField.document.getElementByTgName('body')[0].textContent;
alert(a);
}
function editorfont(cmd,arg)
{
richTextField.document.execCommand(cmd,false,arg);
}
function formsubmit()
{
document.getElementById('textarea').value = window.frames['richTextField'].document.body.innerHTML;
document.getElementById('submit').submit();
}
</script>
<style type="text/css">
.editor-box{
with:100%;
}
.editor-tool{
}
#editorbox{
width: 100%;
}
.title{
margin:20px;
}
.title input{
padding: 10px;
font-size: 20px;
}
span{
font-size:25px;
margin: 10px;
}
button{
border-radius: 2px;
padding: 5px;
font-size: 16px;
border:none;
outline:none;
}
</style>
</body>
</html>
Post a Comment
If you have any doubts, Please let me know
Thanks!