jHtmlArea is a simple, light weight, extensible WYSIWYG HTML Editor. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea.
With the following piece of code, you can have a simple jHtmlArea.
Include following two files in your project.
And the script code :
By Default the jHtmlArea provides the mentioned features.
["bold", "italic", "underline", "|", "forecolor"],
["p", "h3", "h4", "h5", "h6"],["link", "unlink", "|", "image"],
["orderedlist", "unorderedlist"],["increasefontsize", "decreasefontsize"],
["indent", "outdent"],["justifyleft", "justifycenter", "justifyright"],
["cut", "copy", "paste"]
In addition with that , you can have custom buttons.
The maximize button will be added at last as seen in the image, when you press it the size of the textarea will become the same size of your window and the icon gets changed to the minimize and when you press the minimize button the textarea will become the normal size as you had in your form and once again the icon gets changed to the maximize.
For adding Custom Button to Minimize and Maximize the textarea, add the below script and css code.
With the following piece of code, you can have a simple jHtmlArea.
Include following two files in your project.
<link rel="Stylesheet" type="text/css" href="/Styles/jHtmlArea.css" />
<script type="text/javascript" src="/Scripts/jHtmlArea-0.7.5.min.js"></script>
And the script code :
<script type="text/javascript">
$(function(){
$("textarea").htmlarea();
});
</script> By Default the jHtmlArea provides the mentioned features.
["bold", "italic", "underline", "|", "forecolor"],
["p", "h3", "h4", "h5", "h6"],["link", "unlink", "|", "image"],
["orderedlist", "unorderedlist"],["increasefontsize", "decreasefontsize"],
["indent", "outdent"],["justifyleft", "justifycenter", "justifyright"],
["cut", "copy", "paste"]
In addition with that , you can have custom buttons.
The maximize button will be added at last as seen in the image, when you press it the size of the textarea will become the same size of your window and the icon gets changed to the minimize and when you press the minimize button the textarea will become the normal size as you had in your form and once again the icon gets changed to the maximize.
For adding Custom Button to Minimize and Maximize the textarea, add the below script and css code.
<style type="text/css">
.maximize {
background: url(/Content/images/maximize.png) !important;
}
.minimize {
background: url(/Content/images/minimize.png) !important;
}
.overrate {
position: fixed;
top: 0;
left: 0; z-index: 99999;
}
.overrate1 {
position: fixed;
top: 25px; left: 0;
width: 100% !important;
background-color: white;
z-index: 99999;
}
.overrate2 {
position: fixed;
top: 0;
left: 0;
width: 100% !important;
background-color: #999999;
}
</style>
<script type="text/javascript">
$("textarea").htmlarea({
toolbar: [
["bold", "italic", "underline", "|", "forecolor"],
["p", "h3", "h4", "h5", "h6"],
["link", "unlink", "|", "image"],
["orderedlist", "unorderedlist"],
["increasefontsize", "decreasefontsize"],
["indent", "outdent"],
["justifyleft", "justifycenter", "justifyright"],
["cut", "copy", "paste"],
[{
css: 'maximize',
text: 'Maximize',
action: function (btn) {
if ($("textarea").htmlarea().parent().find('iframe').height() == 200) {
btn.removeClass('maximize');
btn.addClass('minimize');
var x = document.getElementsByClassName('minimize');
x[0].title = 'Minimize';
$("textarea").htmlarea().parent().addClass('overrate');
$("textarea").htmlarea().parent().find('div').addClass('overrate2');
$("textarea").htmlarea().parent().find('iframe').addClass('overrate1');
$("textarea").htmlarea().parent().find('iframe').css('height', '100%');
} else {
btn.removeClass('minimize');
btn.addClass('maximize');
var x = document.getElementsByClassName('maximize');
x[0].title = 'Maximize';
$("textarea").htmlarea().parent().removeClass('overrate');
$("textarea").htmlarea().parent().find('div').removeClass('overrate2');
$("textarea").htmlarea().parent().find('iframe').removeClass('overrate1');
$("textarea").htmlarea().parent().find('iframe').css('height', '200px');
}
}
}]
]
}); $("textarea").htmlarea().parent().find('iframe').css('height', '200px');
</script>