Skip to main content
J
Jonathan_Fortis
Inspiring
April 22, 2012
Answered

how to implement bootstrap-wysihtml5

  • April 22, 2012
  • 1 reply
  • 25576 views

I have been told to use the above WYSIWYG as it is a good one to use, simple and clean. i went to the site http://jhollingworth.github.com/bootstrap-wysihtml5/

but its unclear to me how i attach it to and exisiting text aera and how i link it all in, has anyone used this and can show me what to do

thanks

Jon

    This topic has been closed for replies.
    Correct answer Jonathan_Fortis

    it seems you cant change the text are name and the code e.g

    <td><textarea name="welcome" cols="50" rows="5"><?php echo htmlentities($row_Recordset1['welcome'], ENT_COMPAT, ''); ?></textarea></td>

    <script>

              $('#welcome').wysihtml5();

    </script>

    if i change this i dont see the toolbar

    how am i meant to add multiple text areas?



    I got it working but just so you are aware the textarea tag need to go in the correct position which is underneathe the other script otherwise it wont work...not realy sure why??? but you can have multiple text area tags just labelled different

    <script src="lib/js/wysihtml5-0.3.0_rc3.js"></script>

    <script src="lib/js/jquery-1.7.1.min.js"></script>

    <script src="lib/js/prettify.js"></script>

    <script src="lib/js/bootstrap.min.js"></script>

    <script src="src/bootstrap-wysihtml5.js"></script>

    <script>

              $('#welcome').wysihtml5();

    </script>

    <script type="text/javascript" charset="utf-8">

              $(prettyPrint);

    </script>

    1 reply

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    April 22, 2012

    Looks to be JQuery based.  Good for a basic editor seems nice.  Basically on their page ( http://jhollingworth.github.com/bootstrap-wysihtml5/ ) they give you the following code:

    $('#textarea').wysihtml5();

    The #textarea is the ID and the wysihtml5 is the javascript function being called.  For your form textarea, just make sure the ID for that matches the ID in the above line of code.  That code can go anywhere on the page.  On the example website they put the code on line 87-89.  Then include the CSS and javascript they give you on the page.  Nothing more to it. 

    J
    Jonathan_FortisAuthor
    Inspiring
    April 22, 2012

    i just tried this but didnt work

    <html>

    <head>

    <title>wysihtml5</title>

    <script src="lib/js/bootstrap-wysihtml5.js" type="text/javascript"></script>

    <link href="lib/css/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <form name="form1" method="post" action="">

      <p>

        <label for="welcome"></label>

        <textarea name="welcome" id="welcome" cols="60" rows="5"></textarea>

      </p>

      <p> </p>

      <p>

        <input type="submit" name="button" id="button" value="Submit">

      </p>

    </form>

    <script>

              $('#welcome').wysihtml5();

    </script>

    </body>

    </html>

    J
    Jonathan_FortisAuthor
    Inspiring
    April 22, 2012

    i cant get it to work, looking at his code do you think these are required?

    <script src="lib/js/wysihtml5-0.3.0_rc3.js"></script>

    <script src="lib/js/jquery-1.7.1.min.js"></script>

    <script src="lib/js/prettify.js"></script>

    <script src="lib/js/bootstrap.min.js"></script>

    <script src="src/bootstrap-wysihtml5.js"></script>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices