In StackOverflow you have these questions text editors, so you start editing the question. It has italic, bold, links / citation, and several others.
How were they made? They look like those wysiwig editors, but for example, I can not seem to do things like:
[link pro google](https://google.com)
It would look like this:
How can I do this from the link? And how do I make this little box on the question page?
The easiest way to create this type of text area is by using a library, I would advise using jquery
JQUERY
jQuery is a "lightweight" JavaScript library, easy to use in the sense of "write less, do more". This library was developed by John Resig, a Javascript programmer. The official JQuery site is at www.jQuery.com
Problem Solving
That said, you will need to include the library:
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>NextCreateresponsivejavascriptbycreatingtheeditpanel:
<scripttype="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); // convert all text areas to rich text editor on that page
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance('area1');
}); // convert text area with id area1 to rich text editor.
bkLib.onDomLoaded(function() {
new nicEditor({fullPanel : true}).panelInstance('area2');
}); // convert text area with id area2 to rich text editor with full panel.
</script>
Then create your html:
<html>
<head>
<title>How to Create textarea into a rich content/text editor using jQuery</title>
<script type="text/javascript" src="nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 200}).panelInstance('area');
new nicEditor({fullPanel : true,maxHeight : 200}).panelInstance('area1');
});
//]]>
</script>
</head>
<body>
<h4>How to Create textarea into a rich content/text editor using jQuery</h4>
<div id="sample">
<h4>Simple textarea</h4>
<textarea name="area" id="area" style="width:70%;height:200px;">
Some Initial Content was in this textarea
</textarea>
<h4>textarea with complete panel</h4>
<textarea name="area1" id="area1" style="width:70%;height:200px;">
Some Initial Content was in this textarea
</textarea>
</div>
</body>
</html>
This will work and create your edit panel.
For links you can do something like this:
In this case you can enter pure html in the form, you will only have to change to obtain the desired result.