Think we should add some plain english config for the toolbar buttons. You already have a nice editor-- no need to convolute it by making folks edit the template to add more options. Maybe something like an array of options to include? Like--

   $('#textarea').wysihtml5("simple|advanced", 
   ['link', 'outline', 'heading'], 
   { headingName: 'className' });

Just a thought. What say you, @jhollingworth?

Just wondering whether (in random order)

• Labels
• Badges
• Wells
• Blockquotes
• Float left/float right
  will make an appearance any time soon?

I want to use the editor with dynamically created textarea, but when I try to I get an error:
TypeError: Cannot read property 'parentNode' of undefined
It can be reproduced using the following code:

var textarea = $('<textarea></textarea>');
textarea.appendTo(document.body);
textarea.wysihtml5();

I'd like to see this fixed. Thanks!

The Bootstrap grid system disappears after editing... :-(

Is it possible to utilize the ng-model: directive into the textarea that is being used with wysihtml5? Currently whenever I add the ng-model="someBinding" the form does not submit the text inside of the rich text editor.

Do you have any idea why?

don't seem like there is option for this ?

How do I listen for specific key presses like Ctrl+K etc. on the editor? I was using the jQuery hotkeys plugin on the plain textarea, but how do I do the same for the rich text editor?

Am having trouble populating the editor after it has been initialised.

The documentation says you can access the instance and write to it via something like.

$('#textarea-id').wysihtml5().data("wysihtml5").editor.setValue('test');

However this only populates the hidden <input type="textarea"> as opposed to the editor itself.

If I go to the demo (http://xing.github.com/wysihtml5/examples/advanced.html) and execute ...

editor.setValue("foobar");

... then the editor gets updated and shows "foobar". Correctly.

I can use the editor.setValue as above to populate the editor, but I have multiple editors on a singe plage, so ideally i'd use the first scenario where i can target the instance I want to write to.

Any advice/suggestions?

I've got bootstrap-wysihtml5 (using wysihtml5 v0.3.0_rc1) implemented in a Rails 3.2.2 app.

The form loads without any issue – no errors in the browser console, just the "heya" message from wysihtml5.js. The text area in my form appears as it should, with the dropdown and button groups for styling text. The iframe appears correctly in the page source, and I can style text within the text area.

However, when I submit the form, I'm getting the wrong HTML on the server side. Specifically, only <br> tags are posted, and any other tags are appearing as <span>.

For example, an ordered list that appears fine in the text area arrives at the server as follows:

<span><span>One<br></span><span>Two<br></span><span>Three<br></span></span>

I'm not sure if this is Rails sanitizing the input, or wysihtml5 wrapping it incorrectly. Any ideas?

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.

I saw you mentioned this in a previous issue, but being able to choose the link text would be great, as many users like to select their own link text, especially as it helps with seo. Thanks for considering!

Hi,

When you have two or more editors on the same page, only the last one behaves like it should.

From a UI perspective I found it confusing that indent was on the left and outdent was on the right.

Indent has a right arrow and visually looks like it will push something to the right, so I expected it to be on the right.

This is how Microsoft Word is setup also, which is many people's reference point: http://cl.ly/2o2F1e1j1a1j1h0d051x

In general looks like it's coming along nicely though. Awesome work!

The ability to nest lists into outlines would be pretty cool.

If the wysihtml5 text area is marked required, it will have the required styling (including red text) even after text has been entered in it. This is obviously due to the markup being entirely different (iframe n' all) from what Bootstrap expects. Maybe a workaround is possible?

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.

class : "wysihtml5-toolbar"(line 82) causes an exception from YUI js compressor.

Doesn't display the buttons and no short cut work on Firefox. On Chrome it works

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

This is similar to the original request in #5.

I'd love to see support for pressing "tab" when in a list and that automatically creating a nested list.

Is that possible?

Please attach a license to your project.

Hi, when I try to instantiate the editor I'm getting the error I type on the title.

Thanks :)

Underline should be implemented as a valid text style in addition to bold and italics.

Hi. I found wysihtml5 doesn't degrade to normal textarea in IE8. However bootstrap-wysihtml5 does. Is that by design?

either by making it easy to set templates for modals or being able to set custom per editor callbacks for when modals are show,shown etc

I want to customise both link and image modalsbut am in a quandry about to way to achieve this

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();

It's really unclear from the readme how to get started.

A few questions that I think should be answered:

• For the two bootstrap-wysihtml5 files, wysihtml5, and bootstrap: where do they all need to be located relative to one another ot have access to each other (this is the biggest one)
• Which of the possible files do I need to include at the top of a page to get it work
• Do I need to download ALL of files for each of the libraries or can I just get the "end use" files?

If there were answered in the "getting started" code block in the readme, that would be really helpful.

Image upload features? Are there plans to introduce an image uploader for image support I mean.

Figuring out which button represents bullets vs numbers isn't very intuitive with the current icons.

Hey guys,

Might be totally stupid here but I have a textarea in modal and every time I open it I want to flush the form (aka remove all text from the textareas).

I used this

 var flushform = "";
 $('input[name="addtstepshortdesc"]').val(flushform); 
 $('textarea[name="addtsteplongdesc"]').val(flushform);
 $('textarea[name="addtstepexpected"]').val(flushform);

But it does not seem to work... any ideas.

The default parserRules object contains rules only for 11 tags. This means, for example, if I add <blockquote> or <p> tags, they will be removed when switching between WYSIWYG view and HTML view.

This of course can be changed in client code, but maybe default parserRules can be extended as well?

It seems the default parserRules set for "a" is not working. target and rel are not being set after submitting the input and hitting the database. I've checked the .val() before submission and it shows no signs of the attributes being set.

I'm using Rails 3.2 with the script.

It would be great to be able to toggle back and forth between the wysiwig and source (html) views.

Hi,

I'm trying to acces into an wysihtml5 editor object. I'm doing this by this way:

$(document).ready(function () {
$('.someLink').live('click', function () {
var wysihtml5Editor = $('#textarea').wysihtml5().editor;
console.log('wysihtml5Editor: '+wysihtml5Editor);
wysihtml5Editor.composer.commands.exec("bold");
});
});

Chrome console returns:

wysihtml5Editor: undefined
Uncaught TypeError: Cannot read property 'composer' of undefined

So, the point is.

Which is the way to acces into an wysihtml5 object?

The point of everything is insert some html code into my textarea.

Does anyone else have this issue? When i press the image button, a broken image tag shows up. If I press Cancel, it stays there. If I add an image url, the image is placed in the editor, but the broken image tag remains.

Edit: So I just noticed that the issue only happens in Firefox(I am on 12.0 beta). Chrome and Safari work fine. The demo app at http://jhollingworth.github.com/bootstrap-wysihtml5 also has this issue in Firefox.

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!

Trying to add a link on the demo page of the project throws this error:

TypeError: 'null' is not an object (evaluating 'attributes.text') wysihtml5-0.3.0_rc3.js:6912

Using Safari 5.1.5, OS X Lion 10.7.3

add .DS_Store into the .git/config/exclude patterns

Using the demo at http://jhollingworth.github.com/bootstrap-wysihtml5/, you can reproduce by:

1. Use the text box dropdown to select the "Heading 1" text style
2. Type "Heading 1"
3. Hit "Enter" to move to the next line
4. Use the text style dropdown to select the "Normal" text style
5. Type "Normal"
6. Select some text in "Heading 1"

Actual Result (Bug):
The text style dropdown maintains the "Normal" text style selection

Expected Result:
The text style dropdown updates to select the "Heading 1" text style

Notes:
This does not reproduce when using the bold and italic text styles; the state of those buttons is corectly updated depending on the style of the selected text.

When the styles dropdown is open, auto-closing doesn't work if the user clicks in the textarea. Only the area outside of the textarea properly closes the dropdown. This is an issue because the user can focus on the textarea while the dropdown is still open, which can be annoying.

It's not possible to license this code under Apache license if it uses wysihtml5 which is GPL licensed. http://www.apache.org/licenses/GPL-compatibility.html

Does Bootstrap wysiwyg editor support Markdown at all? As in saving as markdown?

I have a wysihtml5-bootstrap enabled textarea in a modal. When I click the insert link or image I get a new modal box on top of my existing modal box. Now click I close or save and all modals gets dismissed instead of the top on that I would expect.

I have not looked into the code but from the top of my head a solution would be to create modal box and close the modal box with a jQuery snippet like so: $("#wysihtml5-add-image").modal('hide'); instead of using data-dismiss="modal"

It'd be really more intuitive and easier to be able to attach events to the wysihtml5 editor if we could pass callbacks in via the options collection. Events: https://github.com/xing/wysihtml5/wiki/Events

Current syntax:

var textarea = $('#my-textaera').wysihtml5()
textarea.data('wysihtml5').editor.on('change', someCallback);

I think this would be nicer:

$('#my-textaera').wysihtml5({
  events: {
    'change': someCallback
  }
})

I have found that it is impossible to use a class name, or even an element name to initialize the plugin. You can only use an ID.

This definitely needs to be fixed.

Simple change to allow for creation of elements that have not yet been added into the dom by changing lines 145,146:
var editor = new wysi.Editor(this.el.get(0), {
toolbar: this.toolbar.get(0),
parserRules: parserRules
});

previously was:
var editor = new wysi.Editor(this.el.attr('id'), {
toolbar: this.toolbar.attr('id'),
parserRules: parserRules
});

this is also better performance as it does not require lookup of element by id by instead just passing in the node directly.

It would be nice if you could pass translated button labels (and menu items) as arguments to $('#textarea').wysihtml5()

Can anyone provide an example of a "create link" button that functions similarly to the "insert link" menu item in this example:?

http://tifftiff.de/wysihtml5/examples/advanced.html

Thanks!

Using the editor, i'm using wysihtml5.commands.exec('insertHtml', "..."); to insert images, which works fine.
I'm trying to add a resize functionality for the images, have set allowObjectResizing option of the editor to "true", but nothing happens.
Is this option really working?