Source code / HTML

WYSIWYG Editor - Source Code

by Libz
28 Dec 2015 at 09:50hrs | 3980 Views
This is the full source code for a custom WYSIWYG Editor, described in "How to create a WYSIWYG Text Editor - Part 1" and "How to create a WYSIWYG Text Editor - Part 2"

<html>
<head>
<title>WYSIWYG Editor</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$("#save_btn").click(function(){
var body_html = $("#body_txt").html();
$("#body").val(body_html);

//Evaluate and Submit form
$.post("your_processing_script.php", $("#smart_editor").serialize(), function(data) {
if (data === 'success') {
$("#form_response").html('<div class="success">' + data + '</div>');
} else {
$("#form_response").html('<div class="error">' + data + '</div>');
}
});
});
});
//Bold function
function doBold() {
document.execCommand('StyleWithCSS', false, null);
document.execCommand('bold', false, null);
}
//Justify left function
function doJustifyLeft() {
document.execCommand('justifyLeft', false, null);
}
//Justify center function
function doCenter() {
document.execCommand('justifyCenter', false, null);
}
//Justify function
function doJustifyFull() {
document.execCommand('justifyFull', false, null);
}
//Justify right function
function doJustifyRight() {
document.execCommand('justifyRight', false, null);
}
//Unordered list function
function doUl() {
document.execCommand('insertunOrderedList', false, null);
}
//Ordered list function
function doOl() {
document.execCommand('insertOrderedList', false, null);
}
//Italic function
function doItalic() {
document.execCommand('StyleWithCSS', false, null);
document.execCommand('italic', false, null);
}
//Create hyper link function
function doLink() {
var urlLink = prompt('Enter url link', '');
if (urlLink != null) {
document.execCommand('createLink', false, urlLink);
}
}
//Unlink function
function doUnLink() {
document.execCommand('unlink', false, null);
}
//Insert an image function
function doImage() {
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null) document.execCommand('insertimage', false, imgSrc);
}
//Insert a horizontal line function
function doRule() {
document.execCommand('inserthorizontalrule', false, null);
}
//Underline function
function doUnderline() {
document.execCommand('underline', false, null);
}
//Remove formating function
function doDeformat() {
document.execCommand('removeformat', false, null);
}
//Undo function
function doUndo() {
document.execCommand('undo', false, null);
}
//Insert HTML code function
function insertCode() {
var urlLink = prompt('Enter your code', '');
if (urlLink != null) {
document.execCommand('insertHTML', false, urlLink);
}
} - See more at: http://accessingcode.com/Web/HTML/1#sthash.q51e4H5v.dpuf
</script>
<style>
#editor_form {
padding:50px 10px;
}

#editor_btns {
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
background:#f2f2f2 none repeat scroll 0 0;
border-color:#e3e3e3;
border-image:none;
border-style:solid solid none;
border-width:1px 1px medium;
height:44px;
padding-left:5px;
width:100%;
}

#editor_bar {
margin-bottom:20px;
}

#editor_bar .editor_buttons {
height:35px;
}

#editor_buttons i {
background:#cdcdcd none repeat scroll 0 0;
border-radius:4px;
color:#fff;
cursor:pointer;
margin:8px 0 0 5px;
padding:8px;
}

#body_txt {
background:#fff none repeat scroll 0 0;
border:1px solid #e3e3e3;
height:550px;
margin-bottom:10px;
overflow-y:scroll;
padding:10px;
width:100%;
}

#save_btn{
padding:5px;
font-size:110%;
cursor:pointer;
}
</style>
</head>
<body>

<form id="smart_editor">
<div>
Title/Subject <input type="text" name="subject" value="">
</div>

<div id="editor_bar">
<div id="editor_buttons">
<i class="fa fa-bold" style="color:#fff;" onclick="doBold()"></i>
<i class="fa fa-code" style="color:#fff" onclick="insertCode()"></i>
<i class="fa fa-italic" style="color:#fff" onclick="doItalic() "></i>
<i class="fa fa-align-left" style="color:#fff" onclick="doJustifyLeft()"></i>
<i class="fa fa-align-justify" style="color:#fff" onclick="doJustifyFull()"></i>
<i class="fa fa-align-center" style="color:#fff" onclick="doCenter()"></i>
<i class="fa fa-align-right" style="color:#fff" onclick="doJustifyRight()"></i>
<i onclick="doImage()" style="color:#fff" class="fa fa-file-image-o"></i>
<i class="fa fa-list-ul" style="color:#fff" onclick="doUl()"></i>
<i class="fa fa-list-ol" style="color:#fff" onclick="doOl()"></i>
<i class="fa fa-link" style="color:#fff" onclick="doLink()"></i>
<i class="fa fa-unlink" style="color:#fff" onclick="doUnLink()"></i>
<i class="fa fa-underline" style="color:#fff" onclick="doUnderline()"></i>
<i class="fa fa-undo" style="color:#fff" onclick="doUndo()"></i>
</div>
</div>

<div id="body_txt" contenteditable="true"></div>
<input id="body" type="hidden" name="subject" value="">
<div>
<button type="button" class="btn btn-primary" id="save_btn">Primary</button>
</div>
<div id="form_response"></div>
</form>
</body>
</html>

See: Demo


Source - accessing{Code}



Chat Login

Register | Forgot password