Create a textarea with text editing options

Question

Create a textarea with text editing options

Navigation

#1 by (1 votes)

0

I need to put a textarea where the person can edit the text. Ex: choose the font size, apply bold, change the color of the text, add photos along with the text (one paragraph, 1 photo, one more paragraph, 2 photos). Can anyone help me get a light on how to get started?

html textarea forms

asked by anonymous 06.10.2017 / 01:01

1 answer

Problem when rotating an object continuously Create list with column contents

score 1 · Accepted Answer

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