Create a textarea with text editing options

Asked

Viewed 6,846 times

2

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

html form textarea
  • 1

    There are several plugins for this, one of them is the Ckeditor.

  • There are several alternatives to this. There are already many things ready for use and grautuita, just look for: "WYSIWYG textarea editor". To start I suggest this bootstrap-based plugin: https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg Other options can be found here: https://www.sitepoint.com/10-best-html-wysiwyg-plugins/

1 answer

4


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

  • 1

    I find it interesting to add in your reply the link to the library that allows these customizations, the Niceedit

  • I didn’t put the link because it might break and she might find another similar solution.

Browser other questions tagged html form textarea

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