I've added a basic internationalization support to bootstrap-wysihtml5, by replacing the static string in toolbar into locale specific ones. This way, a new option "locale" can be passed to the wysihtm5() method in order to translate it.

Example (translate to Brazilian Portuguese):

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

$('#some-textarea').wysihtml5({locale: "pt-BR"});

The default is English ("en") if no locale option is given. I've added the Brazilian Portuguese translation as well. Other translations may be added in the src/locales directory.

Please let me known if something went wrong :)

Chrome vRetail

Created a Header 1, added a numbered list, added a simple list, added a Header 2 then created a new paragraph with "lorem ipsum dolor sit amet", copied that snipped and pasted it to fill the paragraph, all styling is gone on the entire textarea.

Limitations:

• No pretending to have backwards-support.
• Escape doesn't dismiss modals
• Input on modals doesn't get focus
• Default styling is now dark to match btn-default
• Formatting buttons don't show whether they are active or not since I removed a.btn.wysihtml5-command-active style. The correct way to do this would be to set class='active' on the button when wysihtml5-command-active but I don't know how to do that.
• Probably other things, but it works and doesn't look bad.

I don't expect this PR to be merged as-is. My company is using our fork until @jhollingworth puts out a proper new build.

So I've been trying to get this plugin to work with jschr's Bootstrap Modal (https://github.com/jschr) but it just doesn't want to cooperate. The files I'm calling in the header look like this:

script src="js/vendor/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
script src="js/vendor/bootstrap.min.js"
script src="js/vendor/bootstrap-modal/js/bootstrap-modalmanager.js"
script src="js/vendor/bootstrap-modal/js/bootstrap-modal.js"
script src="js/vendor/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"

I've tried putting the bootstrap-wysihtml5.js file before the modalmanager as well, but it made no difference.

What's happening is that the iframe's body isn't getting the correct js passed to it (from what I can tell). As a result, the editing area is uneditable and the toolbar is able to modify and affect everything on the page (including the content in the background).

The body tag inside of the iframe is empty and just shows this:

body marginwidth="0" marginheight="0"

Any help on this would be greatly appreciated.

Not really an issue with bootstrap-wysihtml5 directly, but figured I'd ask.

I'm having trouble getting capybara to fill out the textarea, or the body inside the iframe for testing.

Was wondering if anyone found a way to do this. Thanks!

First pull request ever, so go easy on me, but I added the ability to specify a JSON URL, which then populates a list of image URL's in the image input window. I think this makes it a lot easier to use in many cases, where there is a list of files elsewhere.

using Chrome on ubuntu 11.10 The error is thrown from line number 145 of file bootstrap-wysihtml5.js when initializing a text area with the following line.

$('#some-text-area').wysihtml5();

this is more of a query than an issue. I want to insert a piece of text/html into the editor after i fetch it from the server. How can i set that value in the already existing wysihtml5 editor instance. i tried doing following

var editor = $('#sometextarea').wysihtml5().data('wysihtml5').editor; editor.setValue('some value i want to set'); or $('#sometextarea').val('some value'); or $('#sometextarea').html('some html'); none of these seem to work. can help me out on this. thanks

Hi and thanks for the very nice integration of wysihtml5 and bootstrap.

I just noticed that the default toolbar buttons appear in the regular tab order when navigating a wysihtml5 enriched form. I suggest setting tabindex="-1" for all toolbar buttons so that they are skipped from tab order instead.

Thanks, Carsten

Hello, first of all, thank you for sharing your work with us but damn, give us some documentation next time, it took me almost 2 hours to figure out how to retrieve the modified data from the "textarea" and sure it could be done easier than I did.

<section id="useless" class="editable-section">
    You can use the following commit from hinrik to make tags work properly.
    https://github.com/hinrik/bootstrap-wysihtml5/commit/d9c43dedf7be76a4e7fd3a072d573aa4c130e63d
</section>
<section id="useless" class="editable-section">
    &nbsp;
</section>

And here goes the implementation, it sucks but works:

$(function() {

    $('.editable-section').each(function(index) {
        $(this).wrapInner('<div class="editable" />');
        //$(this).children("div.editable").load("load.php", {id: 'something'});
        $(this).append('<a id="edit-section" href="#"><i class="icon-edit"></i> Edit</a>');
    });

    $("a#edit-section").live("click", function(){
        $("#save-section").click();     //save and remove other active editors so we can create a new one
        $(this).before('<textarea id="editable"></textarea>');
        $(this).prev().html($(this).prev().prev().html());
        $(this).prev().prev().hide();
        $(this).prev().show();
        $(this).prev().wysihtml5();
        $(this).parent().append('<a id="save-section" href="#"><i class="icon-share"></i> Save</a>');
        $(this).hide();
    });

    $("a#save-section").live("click", function(){
        $(this).parent().children("div.editable").html($('#editable').val());    //fixed
        $(this).parent().children("div.editable").show();
        var content = $('#editable').val();    //fixed
        $(this).parent().find("iframe.wysihtml5-sandbox").contents().find("html").remove(); //remove iframe html
        $("#editable-wysihtml5-toolbar").remove();
        $(this).parent().find("iframe.wysihtml5-sandbox").prev().remove();
        $(this).parent().find("iframe.wysihtml5-sandbox").remove(); //remove iframe
        $(this).parent().children("#editable").remove();    //remove textarea
        $().remove(wysihtml5);
        $(this).prev().show();      //show edit button
        $(this).remove();   //remove save button

        //finally, update server content
        //$.post("save.php", { id: 'something', html: content } );
    });

});

Have a good day.

i initialized as follows:

$('#test').wysihtml5({
"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": false, //Button which allows you to edit the generated HTML. Default false
"link": false, //Button to insert a link. Default true
"image": false, //Button to insert an image. Default true,
"color": true //Button to change color of font  
});

The colour button does not appear. Why is that?

We are working on the ReDoS problem and detected 2 vulnerable regex(es) from your repository.

1: :((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))? in bootstrap-wysihtml5/lib/js/jquery-1.7.2.min.js 2: ((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*) in bootstrap-wysihtml5/lib/js/jquery-1.7.2.min.js

Please try the following:

var pattern = ":((?:[\\w\\u00c0-\\uFFFF\\-]|\\\\.)+)(?:\\((['\"]?)((?:\\([^\\)]+\\)|[^\\(\\)]*)+)\\2\\))?";
var input = ":\\\b(\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b";
var re = new RegExp(pattern);
var matched = input.match(re);

var pattern = "((?:\\((?:\\([^()]+\\)|[^()]+)+\\)|\\[(?:\\[[^\\[\\]]*\\]|['\"][^'\"]*['\"]|[^\\[\\]'\"]+)+\\]|\\\\.|[^ >+~,(\\[\\\\]+)+|[>+~])(\\s*,\\s*)?((?:.|\\r|\\n)*)";
var input = "[\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b";
var re = new RegExp(pattern);
var matched = input.match(re);

We didn’t create a pull request because we're not sure if these cases are possible to take place in your program, we also do not understand the functionality of these regexes as you do. Thank you for your understanding.

Is there an option to hide/show sub menu items. I want for example to hide h1 (in addition to insert image). I used the following working workaround. Is there a natural option for that? thank you:

<script>
if(jQuery().wysihtml5){
$(".wysihtml5").wysihtml5( {"image": false});
$('a[data-wysihtml5-command-value="h1"]').hide();
}
</script>

Dear,

Can anyone help em with this plugin.

Once i fixed the focus blank. Now modal is not showing, only black screen comes.

I will really appriciate.

Regards, Ankit

code working properly and I can change heading style for any line . my issue is that I can't change header in the same line . each line only can get one heading style.

style1

style2

but i can't write both in the same line . i

is there any solution for this issue?

Hello, We have a bug with chrome browser v64.0 when we click on buttons "insert link" or "insert image" : bootstrap-wysihtml5.min.js Uncaught TypeError: Failed to execute 'focus' on 'HTMLElement': parameter 1 ('options') is not an object.

To fix temporarily this, we had to make the following changes at lines 279 and 341

if (!activeButton) {
    self.editor.currentView.element.focus();    // instead of ...element.focus(false);
    caretBookmark = self.editor.composer.selection.getBookmark();

Can you do the necessary to fix this bug.

thank you

mchabou