mindmup / bootstrap-wysiwyg Goto Github PK

If you add an image and remove it, you will be unable to add the same image again unless you actually add another image first.

A markdown export should be very useful to provide an advanced editor.

hi,
my scenario: i'm using the editor part, and upon pressing command+p, i pop open a dialog. additionally, on every keyup i launch a callback to "save" my text using a call to editor.cleanHtml().

when pressing command+p, the dialog window opens, and then cleanHtml get called due to keyup - and for some reason, the call to $(this).html() actually pastes the html into the editor itself ?!

any ideas why and what can be a workaround?

thx!

The createLink command is not working in FF 20, IE9, and IE10. This appears to only happen if you have no text selected when you try to insert the link.

This bug is present in the demo and my own use of the editor.
It is working in Safari 6 and Chrome 26

Error : empty string passed by getElementById();
Occurs when using navbar and li class="dropdown"

I need to add somewhere the name="" attribute so that whatever is entered into the box it gets saved to the database how can i do this?

When aligning to the right (for RTL languages) and using numbered list, the numbers appear of the left instead of on the right

I would like to load ajax content and add it at the current cursor position of the editor.

I have a dropdown, when I change it brings the new Html data from server which needs to be added in the current position of the editor.

Is there any extenstion method name insertHtmlAtCurrentPosition() like cleanHtml()?

How can I implement?

Maybe this is something that users should fix via styling themselves, but I figured I'd open an issue about it here:

This is in Chrome.

e.g. when bold text is selected, bold button should have active state.

I want to submit a form with data from editor, but I can't assign it to textarea.

The markSelection method does the following:

restoreSelection();
document.execCommand('hiliteColor', 0, color || 'transparent');
saveSelection();
input.data(options.selectionMarker, color);

The execCommand call is using hiliteColor but it looks like IE does not support hiliteColor. I think the equivalent for IE is backColor.

Chrome adds <div>
Firefox adds <br>

How to go about cross-browser compatibility? Can you suggest a solution?

The toolbar's buttons are updated with active classes when their corresponding command is acting on the selected text. It should only do this for text selected in the editor but it does so for any text selected on the page.

To reproduce select some bold text or a list item or underlined text, etc on the page and then mouse in and mouse out of the editor. The toolbar buttons will change to reflect the state of the selected text even though the text is not in the editor.

If you click the insert hyperlink button in IE you will receive the drop down menu to enter the url, but you can not set focus on the textbox to enter a URL. This has been tested in IE9 and IE10 on Windows 7.

Hi,

I'm a designer and not a programmer, so this stuff is a little beyond me, but based on the instructions I figured this would have been relatively straightforward to set up. Unfortunately I am tearing my hair out trying to get this editor to work correctly, but the toolbar simply doesn't do anything to the text in the editor div. I don't understand what I'm doing wrong. Are there some additional steps for setup that aren't included in the wiki?

Here's how I've called everything in a simple test.html file:

link rel="stylesheet" href="css/bootstrap.min.css">
link rel="stylesheet" href="css/font-awesome.min.css">
link rel="stylesheet" href="css/main.css">

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
script src="js/jquery-hotkeys/jquery.hotkeys.js"></script>
script src="js/vendor/bootstrap.min.js"></script>
script src="js/bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>

script>$(function() { $('#editor').wysiwyg(); });</script

The first line of the toolbar looks like this:
div class="btn-toolbar wysiwyg-toolbar" data-role="editor-toolbar" data-target="#editor">

And the editor div looks like this:
div id="editor" class="text-editor"></div

Am I missing something here?

Any help would be greatly appreciated.

P.S. I had to remove some of the brackets so that the text would show up.

Hi,

I am using the bootstrap-WYSIWYG Editor in my application and the link button in toolbar doesn't seem to work properly. When I click the Link button and try to enter the text in Input box, it gets disappears. The other issue is that we are using the single editor for different section in a page and when I try to add the link in second section, it is getting added to the first section. The position of placing the link is not working properly. Please consider the issue and help me to resolve the same.

Thanks

Is there a way to disable wisywyg to show generated content and edit HTML?
tnx

Add a view source button ( or most probably a Tabbable nav on the bootom ) to display the source code of the HTML you just created.

I created a superscript and subscript buttons like this:

<a class="btn" data-edit="subscript"><b>X<sub>2</sub></b></a>

On Chrome 26 when I select a text and click the button, the text is converted to subscript. When I click a second time nothing happens. The text should be reverted to normal.

It works correctly on IE10 and FF20

The ability to change float image and margin/padding size.

When I open a modal window with an editor in it, I can't type in the editor - at the first keystroke, the Bold button lights up (first button in my toolbar) and that's it. No text can be typed into the editor.

If I dismiss the modal and re-open it, everything works perfectly.

Any idea what could be going on? I can provide more info at request - just don't know what would be helpful here...

To reproduce:

1. Type in some text
2. Center align the text
3. Left align the text

At this point (and sometimes earlier) an exception is thrown in the restoreSelection method when calling selection.removeAllRanges:

Could not complete the operation due to error 800a025e

This error did not happen when tested in IE10.

When I'm applying this plugin I'm not have some icons:

How to fix it?

Here u can see in action: http://wpxchange.host56.com/wysiwyg

Hi, now it does <font size=1> for example, but I want a <h1> instead, because of the SEO. Is that possible?

Awesome work!
I was just wondering if you would know offhand how to add a button which would open a bootstrap modal, and have content clicked from within it inserted back into the wysiwyg area? (think image-manager, or emoticons etc.)

cheers

  $.fn.wysiwyg_destroy = function (userOptions) {
        var editor = this,
            options = $.extend({}, $.fn.wysiwyg.defaults, userOptions),
            toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
        editor.off();
        $(window).off('touchend');
        var toolbar = $(options.toolbarSelector);
        toolbar.find(toolbarBtnSelector).off();
        toolbar.find('[data-toggle=dropdown]').off();
        toolbar.find('input[type=text][data-' + options.commandRole + ']').off();
        toolbar.find('input[type=file][data-' + options.commandRole + ']').off();
    };

Take a look here for a good implementation:
destroy()

This is a bug report on the page http://mindmup.github.io/bootstrap-wysiwyg/.

When I ⌘-left click any link outside of the editor in Firefox 20, nothing happens. I expect a new tab to open to the page the link was for.

This works in Chrome 26.0.1410.43 and in Safari 6.0.3. If I enable NoScript in Firefox, ⌘-click works as expected, opening links in new tabs.

Browser: Firefox 20.0
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:20.0) Gecko/20100101 Firefox/20.0
OS: OSX 10.8.3

When you don't have text selected and you try to activate more than 1 of these buttons, it only activates the last one you clicked.

However, shortcuts do seem to work in this situation?

I'm getting the error "Invalid argument" in IE10 in the function updateToolbar when calling document.queryCommandState("fontSize 5").

Should this be working? I see that some people report it working in IE10.

Hi,

With Firefox 20/IE 10 the items in the font/font-size drop downs don't have the pointer cursor but the (less intuitive) text one (probably because the <a />s don't have an href attribute. Anyway adding something like

.dropdown-menu a {
    cursor: pointer;
}

this to the CSS should do the trick.

If you have a bunch of divs on the page with the same class ( .rte for instance), and apply the .wysiwyg method to them, they work perfectly with the hotkeys but the buttons don't work.

If however, you apply a div to each one ( #rte1 #rte2 etc) it does work. This is OK, and for me I can easily do that programmatically in the flow of my application. But it's not standard and caused a little bit of confusion for me, and perhaps a lot of hair pulling for others.

Hi,

I've noticed an error into the firebug console :

Erreur : NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.queryCommandState]
Fichier Source : http://mindmup.github.io/bootstrap-wysiwyg/bootstrap-wysiwyg.js
Ligne : 49

Just for the report.

Cheers.

Is that possible to use font-size inline style rather than font tag itself?

Hi,
I was wondering what functionality is tied to bootstrap in the editor?

Is it just styling or is using some bootstrap javascript?

Thanks in advance,
Mark

The selection is being lost when using a text input (eg insert link) in the toolbar. This bug happens to appear on the demo page so its easy to reproduce:

1. Select some text in the editor
2. Click the insert link button in the toolbar
3. Click the insert link input text box
4. Type in a url
5. Mouse over the editor
6. Click the insert link add button

At this point the link is inserted at the beginning of the editor.

From what I can tell the code here:

editor.attr('contenteditable', true)
.on('mouseup keyup mouseout', function () {
    saveSelection();
    updateToolbar();
});

is running after step 5. The call to saveSelection grabs the current selection from the window which is in the insert url text box. Then after step 6 the text is inserted at the beginning of the editor because the selectedRange is no longer in the editor.

I am happy to discuss possible fixes and will post ideas here when I have some.

On the example page (http://mindmup.github.io/bootstrap-wysiwyg/), the hyperlink button has rounded corners on the right side when it should be flat.

is it possible to bind to text area instead of div ???

Please do not use the blockquote element when indenting, blockquote != indent, blockquote has rich semantics: http://developers.whatwg.org/grouping-content.html#the-blockquote-element. Do like other savvy text editors do and use a semantically meaningless element e.g. div.

Hello,

is it possible get the result in a BB Code format or what are your thoughts on achieving bb codes?

Thank you,
Max

Would it be possible to get a button that enabled the user to add color to a text?

Well, perhaps add the posibility to add a table in the data.

It is mentioned in the docs that jQuery HotKeys is a dependency. But I interpreted this as "a dependency - if you intend to use the hotkey feature" ... and without it, the core functionality would still work. This is a standard terminology that other libraries use.

It took me a while to realise that the jQuery HotKeys REALLY is a dependency. i.e. the whole thing relies on it. I think this should be made very, very clear in the instructions/documentation.

tinyMCE has this function:

tinyMCE.execInstanceCommand('content', "mceInsertContent", false, "Text To Insert Here");

It just inserts a string at the current cursor position. How can I do this using your WYSIWYG?

I would like to add a tooltip button in the editor which allows us to add a tool tip to the selected text. Any options available to do the same?

It's jarring when your lose your selection while typing the URL for a link to add. Can we wrap the selection in a that mimics the style of selected text?

When I move over a button I clearly see all the buttons on his right move.
I'm using firefox 20 on Fedora 18.

Usually a .btn-group .btn has a computed left margin of
-1px
When hovering a .btn, the .btn next to him pass from having a margin-left of -1px to a margin-left of 0px, resulting in the visible effect of all the next buttons to move on the right.

Press Tab at the start of a newline. It adds a couple of spaces and also something that looks like a blockquote.

Later when we go to a newline, the tab spacing is continued and there is no way to return back to the normal mode. (even backspace doesn't work)

Is there a possibility to assign a color to text?