editor for TEXTAREA's in the website back end.

Posted on 2011-10-25
Last Modified: 2012-06-27
I am building a small CMS for my website using PHP. I have some textarea's where I would like to have something like CKEditor. I have tried to add a few to my textarea's but I couldn't seem to do it. I am looking for a free one if possible. Thanks in advance.
Question by:RNB
    LVL 17

    Accepted Solution

    LVL 107

    Expert Comment

    by:Ray Paseur
    No points for this, please.  TinyMCE is free, but takes a little configuration.  I've used it in several sites and IIRC it is the editor WordPress uses.

    Author Comment

    Any tips on configuration before I dive in?
    LVL 107

    Expert Comment

    by:Ray Paseur
    Yes, just one.  Don't waste your time trying to have more than one TinyMCE TEXTAREA on the same page.  Design your app so that will never be needed!
    LVL 17

    Expert Comment

    Agreed - and for how to configure - when you download tinymce, either the normal JS, or the jquery version, there is an "example" folder that contains a working example html file (run from a local webserver to see) - you can simply look at the source to see how it works - in general, all the "tinymce magic" is in the headers of the html file, so you will need that in your page as well obviously, and the crux is to basically simply ensure that your textarea is of the correct class as per below:

    <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" class="tinymce">
          This is some example text

    You do however also need to make sure that the tinymce files are copied to your webserver as well into the paths that are being called by the page, eg, <script type="text/javascript" src="../jscripts/tiny_mce/jquery.tinymce.js"></script>
    LVL 34

    Expert Comment

    by:Beverley Portlock
    Ray said: "Yes, just one.  Don't waste your time trying to have more than one TinyMCE TEXTAREA on the same page.  Design your app so that will never be needed!"

    Why? It is not THAT hard. Just add mode : 'textareas' and it should do all of them. To stop a textarea being used give it this class in the tag editor_deselector : "mceNoEditor"

    <!-- tiny editor
         tinyMCE.init({   mode : 'textareas',
                          theme: 'advanced',
                          plugins: 'table,media',
                          theme_advanced_buttons1 : 'pasteword,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,separator,link,unlink,code,removeformat,formatselect',
                          theme_advanced_buttons2 : 'tablecontrols,media,image',
                          theme_advanced_buttons3 : '',
                          theme_advanced_blockformats : 'h1,h2,h3,h4,pre',
                          force_br_newlines : false,
                          content_css: './gembizMce.css',
                          extended_valid_elements: 'object[classid|codebase|width|height|align|type|data|style],param[id|name|type|value|valuetype<DATA?OBJECT?REF],embed[quality|type|pluginspage|width|height|src|align],iframe[align<bottom?left?middle?right?top|class|frameborder|height|id|longdesc|marginheight|marginwidth|name|scrolling<auto?no?yes|src|style|title|width],script[type|language|src]',
    			  	  editor_deselector : "mceNoEditor"
    // -->

    Open in new window

    LVL 33

    Expert Comment

    greetings RNB, all of the javascript text editors like tinymce can be useful for a see what you get editor. however they all take some time to learn (usually not alot of time), but you will do well to EXPERIMENT, take time to read the instructions for the OPTIONS, and then try several of the OPTIONS, and see what difference it makes, remember, to experiment in javascript you do not have to load these on the server, just use them on your computer first.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now