How to Build a Javascript WYSIWYG Rich Text HTML Editor Textarea Replacement for Web Site Part 2

Lesson Code:
Learn how to build a Javascript WYSIWYG Rich Text HTML Editor Textarea Replacement for your PHP and MySQL driven applications. In this second video we will script our wysiwyg.js file and code out all of the functions that our HTML form is ready to call. We make use of the execCommand() method in Javascript and all of its Command Identifiers to apply specific formatting we desire to our WYSIWYG editor. Our form is submit using Javascript so we can transfer the data frome our iframe into our textarea for the normal form action to work. The form can also be submit using Ajax if you prefer, then there would be no need to transfer data from the iframe into the textarea. In part 3 we discuss the PHP and MySQL side of things, security, and filtering.


45 thoughts on “How to Build a Javascript WYSIWYG Rich Text HTML Editor Textarea Replacement for Web Site Part 2”

  1. Adam, nice tutorial as always. Works perfect, Thanks. I need to be another button to wrap a block of code like this <code>highlighted code here</code>, for code sharing.. I have seen something similar on another tutorial of yours, I cannot find it. You also had it on one of your websites.

    I'm trying to add by using


    in a function I called "codeBlock". and my button has settings like

    input type="button" onclick="codeBlock()" value="</>"

    I have searched the web tirelessly looking for way to accomplish this task. Could you kindly give a quick example, or direct me to the correct tutorial. Many Thanks

  2. We were trying to build the Java script WYSIWYG into a PHP and MySQL CMS website.
    How to Build PHP and MySQL CMS Website Software
    So in order to build the WYSIWYG editor into the backend of the CMS backend we had to replace the text box with an iframe however I cannot call up the data from the database into the iframe replacement box for editing.
    I hope the terminology is correct and thank anyone for any assistance please.

  3. Could u plz make a lesson or course on "How to build facebook like textarea which autogrows according to content without having the scroll bar and auto dectect the input language For example for arabic or urdu it change the cursor direction (right to left) and for english it change the direction (left to right)"

  4. You can also use document.execCommand with an editable div. On the button click I would use a data attribute to detect when a button is clicked, and then get the id or the data attribute id and then run the document.execCommand. This way you don't need all those functions, when you can do it in just one function.

  5. you are awesome thank you ! the thing i love in you is creating every thing custom ! now i have an idea how this works ill try to build my own WYSIWYG

  6. hai for guys wating for part3 of this series……let me give u a hint of what you can do for security.
    create this function in your php script:

    function sanitizeString($string) {
    global $conn;
    $string = stripcslashes($string);
    return $conn->real_escape_string($string);

    You can create connect to your that database first like this:

    $conn = new mysqli("dbhost, "dbusername", "dbpassword", "dbname");
    if ($conn->connect_error) die ($conn->connect_error);

    You can now then function like this

    echo sanitizeString( $_POST["heading"]);

  7. adam, thanks for all dis but, where is part 3 ? i am having trouble in submit button it is not working as it should ??
    if anyone else has worked dat out kindly reply asap ?

  8. Beautifully done! However if I may, have a small improvement to suggest; put the menu buttons outside the form – that way you can either use image buttons or css buttons and make the text editor look professional (putting image or css menu buttons inside the form will trigger the post every time you use the buttons ).


  9. I am actually getting few problems like
    1) link is getting created but it's not going to that page .
    2) when i am cliking on unlink button color of that link one is remaining as it is
    3) I am unable to upload any image
    and last
    4) submit is not working .

    please help me … I have cross checked the coding also but everything is as it is …

  10. Seems like there are a lot  of you who dont really want to learn how to  write your own stuff. Adam does all these tutorials for FREE . Why don't all you wingers actually try and learn how to program instead of  just leeching Adam for every little thing. His websites are a gold mine of useful informative easy to understand scripts / idea's that he has put a great deal of time and effort into SO be grateful for what you get  and get off yuor lazy arses and do some of your own work ! 

  11. Thanks for another awesome tutorial Adam.
    Since you mentioned the htmlentities thing, I want to say that when I use it AND some visitor is trying to write in my local language (Greek), htmlentities turn the text to symbols. I understand that it is outof the subject but I have tried some methods and I couldn't solve the problem. mysqli_set_charset into the db_connection file does not help on saving the post into the db, just when retrieving the data from the db. I'd appreciated any suggestion Tnx

Leave a Reply

Your email address will not be published. Required fields are marked *