How to make the box of the question page?

Asked

Viewed 46 times

0

Stackoverflow has these question text editors, so you start editing the question. Has italics, bold, links/citation, and several others.

How were they made? They look like those wysiwig editors, but for example, I can’t do some things like:

[link pro google](https://google.com)

that was gonna show up like this:

google pro link

How do I do this from the link? And how do I do this little box from the question page?

html

1 answer

0

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. Jquery’s official website is at www.jQuery.com

Solving Problem

That said, you will need to include the library:

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>

Then create javascript responsible for creating the edit panel:

<script type="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:

http://jsfiddle.net/T2Q89/10/

In this case allows you to insert pure html into the form, just change it to get the desired result.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.