插入Bootstrap所见即所得

Question

I want to insert this script ( https://mindmup.github.io/bootstrap-wysiwyg/ ) to my site, but I don't know how to do that exactely. Can anyone explain how to insert this into my HTML-code? Or is there a better bootstrap plugin for text editing?

Right now my code looks like this:

<form action="" method="POST">

    <div class="form-group">
        <label for="artikel-titel">Titel</label>
        <input type="text" class="form-control" id="artikel-titel" name="titel" placeholder="Titel">
    </div>

    <div class="form-group" id="editor">
        <label for="artikel-content">Innehåll</label>
        <textarea rows="10" class="form-control" id="artikel-content" name="content"></textarea>
    </div>

    <input type="submit" value="Spara" class="btn btn-primary">

</form>

Edit:
I found this script and that fits my project better, so now I wounder how I insert it on my site (the code is above) and how to activate the translations?

http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/

Answer 1

Download or copy paste code of file from here , put this file in your project directory.

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

To include bootsrap wysiwyg plugin in current scope - only if you're in the same directory as bootstrap-wysiwyg.js file script, if you not, you must give path to bootstrap-wysiwyg.js file from current scope localisation.

Next place some div with specific id attribute - that will be your wysiwyg container:

<div id="your_id_name" style="overflow:scroll; max-height:300px"></div>

(You can declare style in main style file or wherever you want write: #your_id_name is the reference) or leave it in attribute like above.

Last thing is initiate plugin, write this after div or place initiation code between script tags in your main javascript file:

<script type="text/javascript"> $('#your_id_name').wysiwyg(); </script>

Also make sure you have jQuery on board, if not:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>