jhollingworth / bootstrap-wysihtml5 Goto Github PK

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

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

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

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?

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

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

Thanks :)

Hi,

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

Please attach a license to your project.

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.

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?

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

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!

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!

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!

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

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.

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 nice if you could pass translated button labels (and menu items) as arguments to $('#textarea').wysihtml5()

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.

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
  }
})

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

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

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!

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

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?

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.

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.

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?

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.

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

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!

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.

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 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.

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

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'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

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"

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

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?

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?

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?

don't seem like there is option for this ?

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

Just wondering whether (in random order)

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

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

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

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?

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?