Right now formatting options allows to use p, blockquote, h1, h2, h3 and h4. It would be beneficial for me to only allow using p and h1.

Is such change possible?

The semantic mode is pretty sweet, but it was removing all the br tags,
I added a function to replace the br tags with p tags.

sementicCode: function(force){
    this.syncCode(force);

    if(this.o.semantic){
        this.sementicTag('b', 'strong');
        this.sementicTag('i', 'em');
        this.sementicTag('strike', 'del');

        this.paragraphTag(); // Added this function
        this.removeTag('br');

        this.$e.val(this.$editor.html());
    }
},

paragraphTag: function() {
    this.$editor.contents().filter(function() {
        return this.nodeType == 3;  // Only text nodes
    }).wrap('<p></p>');
},

Hi Alex-D,

Thanks for trumbowyg, it rocks!

Would it be possible to introduce event handler for the case when user clicks outside WYSIWYG area?

I would like to be able to fire "save" event manually.

Cheers!

I can't type words with accents in my editor. It prints the letters without the proper accent.
Is there any way to set a charset for my lang file?

Is this released under MIT or other open source license?

Great editor, but am experiencing the strangest bug. It's fairly easy to replicate. I found this after I downloaded the package and started evaluating the demo.

1. Remove all default content from the demo textarea.
2. Start typing

What you may notice is that the cursor doesn't continue typing a line as you'd expect. Instead, you get something like this (I copied the following text exactly as it appeared in my editor):

W

h

y

is

th

i

s

e

di

t

or

do

i

n

g

 t

hi

s

NOTE: This behavior DOES NOT happen in the examples that are pure divs with contenteditable enabled. It ONLY happens in the textareas (i.e., marked with the standard <textarea> tag). I have confirmed this behavior in the latest versions of Chrome and Firefox.

In IE, things get a little stranger (no one should be surprised). The pattern example I listed above continues for a few lines and then about six lines or so in, the typing returns to normal, meaning I can type a continuous line of text just as you'd expect in any editor.

Now, when I peek at the raw code within the textarea, this is a sample of what's being generated:

[Sorry, github markdown is not playing nice with me for some reason. What was supposed to appear here is that every line break above is caused because of how paragraph tags are wrapping - like around one or two characters at a time]

I suspect it has something to do with the editor function responsible for wrapping nodes, but I'm not sure. It seems that whatever this function is doing works great in the divs but not so much in the textareas.

Hi,

I'm using this fantastic plugin but I have one question.

When I hit ENTER key and then I choose the editor view, the paragraphs are enclosed in <div> instead of <p>

Any idea how to solve it ?

Thanks

Hello

We like this WYSIWYG editor and it lacks only 2 options.

1. Paste without formatting
2. Remove formatting button in toolbar

Can you add these so that we can actually use it ? We need this feature as a lot of our users are going to copy-paste stuff in this editor from word files / web but we need to save it as text without formatting.

I think it would be great for so amazing editor like this.

I'm missing something on Trumbowyg callbacks, so my rest-in-place/trumbowyg integration is kind of ugly: https://gist.github.com/ringe/8332578

Could you help?

Hi,

I just implemented your editor and it works pretty sweet, thanks! I noticed that it doesn't work on several devices:

• iPad Mini Retina (iOS 7.0.4)
• iPad 3 (iOS 7.0.4)

It does work fine on these

• iPhone 4 and iPhone 5s (iOS 7.0.4)
• Nokia Lumia 520 (Windows Phone 8.0)
• Microsoft Surface 2 (Windows RT 8.0)
• Asus Nexus 7 (Android 4.4.2)

Mobile
It does seem to work better with mobile: false (default), as soon as i set mobile to true, it seems to break and just show the default textarea.

Tablets
Just noticed that the same things goes for the tablets. When i turn the tablet support off (tablet: false) it works on the iPads i mentioned before.

Any thoughts on this?

like "inline:true" param in tinymce editor

DISCLOSURE: I'm evaluating editors for use by heavy-duty writers (novelists) who will do very evil things like copy and paste from Word. I'm testing the paste behavior of this editor very carefully because of the types of end-users it will be subjected to.

I noticed when copying and pasting from Word that the source code generated within the editor contains the "apple-" span tags. I've never seen this before in any of the other WYSIWYG editors I've evaluated. Not sure what is triggering this behavior, and this is happening in Chrome, Firefox AND IE (hard to believe those three editors are consistent on ANYTHING).

TO REPLICATE:
Copy and paste anything into the editor - pasting from Word is a GREAT stress test. Then, look at the raw HTML code. It doesn't matter if the underlying structure is a textarea or div, the results are the same - you will have text peppered with "apple-" span tags.

Once these issues are more sorted I can then focus on porting my Word Cruft remover functions. :)

This seems to be a know bug for several WYSIWYG editors. CKEditor seems to have found a solution for this, which might be useful for you aswell,

http://dev.ckeditor.com/ticket/10945

When i input many line in many textarea it appear.
i'm use rails 4

Great addition to the October Plugins :)

In the fields.yaml for posts etc, also comment out the "preview:" section, as this will remove the "edit" tab which will no longer be in use - might be worth adding this to the docs also :)

Hi Alex,

is it possible to use the main translation file for plugin translation? In the moment you have to translate every plugin file. Wouldn't it be easier to extend the main translation file?

Need support target property support in insertion links

Hi Alex-D. I've forked your repository and created a Rails engine RubyGem out of it.
I took a few shortcuts since it's a first (skipping Compass dependency, for instance.)

I would like to do it more properly - as in easy upgrade from your repo, if we could find a meaningful approach for us both.

Would you take a look? https://github.com/ringe/Trumbowyg

Hi,

I've seen that you were trying to add an image upload plugin. So you have to put a PHP file on your server, configure it, etc ...

Is it possible instead to stay in HTML5 ? Imagine a drag/drop file upload, just adding a base64 URL in the HTML. No upload needed, no PHP needed.

When a formatting is selected by pressing button from the button pane (Bold, Italic, Unordered list, Ordered list), there is no indication which formatting is selected. The button is not darkened or changed in some way showing the selected formatting(s).

Hi Alex,
First off - great work! I have been playing with trumbowyg for the last few hours and it looks very, very promising. I can't believe I have never heard of it before.

One little problem I noticied - the fullscreen mode doesn't play nice with bootstrap modals:

1. Open a bootstrap modal with an editor in it.
2. Start fullscreen mode (the editor sets the inline style="overflow: hidden;")
3. Stop fullscren mode (the editor sets overflow: auto;)

After the 3 step the modal is broken and the user scrolls the body instead of the modal.
As a suggestion - maybe the editor can check if the overflow of the body is already set to hidden, before trying to set it.
And using a class to set the overflow would be better, because clearing the overflow:auto from the inline style="" is not that trivial and this means that until the next page reload all modals will be broken.

What do you think?

One thing I would like to see implemented is image resize within the edit frame - and also where you can select images by clicking on them :)

I am using your plugin (BTW, great work) on a page that also uses jQuery validation. Every time when I want to add link or image (pop-up appears), JS error is thrown "TypeError: c is undefined" and jQuery validation is referenced.

I have validated that erros are not thrown when page is not using jQuery validation.

Edit: still works, error does not prevent from further using.

If you try to insert the link using editor when there is no text selected (when area is empty or there is a new line), then nothing is happening and no link is inserted.

This only happens with FireFox browser on Windows or Iceweasel on Linux, so this might be a browser specific issue.

Tested on FireFox v30.0 and Iceweasel v24.6.0.

Can anybody confirm that this problem exists? And is there a way to fix this problem?

Regards,
-Vytautas

Chrome on MAC OS at 125% zoom

It looks like no API to empty content?
Please ignore this if there is one...

I've put in a small function in my copy:

empty: function(){
    this.$e.val('');
    this.syncCode(true);
},

here you find a german translation

$.trumbowyg.langs.de = {
viewHTML: "HTML anzeigen",

  formatting: "Formatieren",
  p: "Absatz",
  blockquote: "Zitat",
  code: "Code",
  header: "Überschrift",

  bold: "Fett",
  italic: "Kursiv",
  strikethrough: "Durchgestrichen",
  underline: "Unterstrichen",

  strong: "Wichtig",
  em: "Betont",
  del: "Gelöscht",

  unorderedList: "Ungeordnete List",
  orderedList: "Geordnete Liste",

  insertImage: "Bild einfügen",
  insertVideo: "Video einfügen",
  link: "Link",
  createLink: "Link einfügen",
  unlink: "Link entfernen",

  justifyLeft: "Links ausrichten",
  justifyCenter: "Zentrieren",
  justifyRight: "Rechts ausrichten",
  justifyFull: "Blocksatz",

  horizontalRule: "Horizontale Linie einfügen",

  fullscreen: "Vollbild",

  close: "Schliessen",

  submit: "Bestätigen",
  reset: "Abbrechen",

  invalidUrl: "Ungültige URL",
  required: "Benötigt",
  description: "Beschreibung",
  title: "Titel",
  text: "Text"

}

Have you looked into making the upload plugin friendly to <IE10 browsers? I can see two immediate issues to be solved.

The first and easiest, allow for a fallback in browsers that can't do multiple file uploads:

                            try {
                                // Multiple files allowed, we just get the first.
                                file = ev.target.files[0];
                            } catch (err) {
                                // In ie8, multiple files not allowed
                                console.log(err);
                                file = ev.target.value;
                            }

Second issue: getting the file from the file input to the $.ajax call with something in addition to/other than the FormData() object. I'm a little stuck on this one...

EDITED by the repository Owner (@Alex-D) : duplicate of #62

1. Start typing a text
2. Select Bold or Italic
3. Type a character

Expected:
All signs typed from here are in the chosen formatting

Actual:
Only the first sign is in the chosen formatting. Then the cursor is moved before the last typed character and all the typing form here is done before this character and with no formatting

Tested on Chrome, Firefox and IE. In IE there is no such bug

Any plans to support bower?

Hi,

do you plan an option to use existing glyphicons or / and fontawesome icons? Would be a nice option if a project has already the icon set included, it would generalise the icons and strip down the included source.

Cheers

I am getting some bizarre results when I use the editor and just paste in a url without trying to link it.

Consider the following 'note' added using the editor:

First line
http://www.google.com
Last line

I am getting the following returned:

<div>
    <p>First line</p>
    <p>
        <a href="http://www.google.com&lt;/p&gt;&lt;p&gt;Last">http://www.google.com
    </p>
    <p>
        Last</a> line
    </p>
</div> 

Notice where the start and closing tags are... this is totally messed up.

Also is there a setting / option I can use to turn this off. Despite this rather annoying issue with it not making the hyperlink properly we don't want to have this feature unless we specifically make a link.

It would be great to have a table button for inserting tables, rows, and columns.

I'm having an extremely challenging time trying to find an wysiwyg editor that supports this :(

It seems relatively simple?

http://jsfiddle.net/HBEzc/343/

Is there a way I can do this with Trumbowyg?

Is it possible to override the path to the php file responsible for managing image uploads? I'm talking about this line in particular: https://github.com/Alex-D/Trumbowyg/blob/master/plugins/upload/trumbowyg.upload.js#L36

I'm using Laravel and I'd like to point the script to my own route and manage file uploads my way.

Hi, I'm using your editor in a form. I really like it.
The editor is below other fields in the form.
A typical use of this form is fill a field, TAB to the next field, etc...
But when I press the TAB key in the previous field, the cursor jumps to the "bold" button at the toolbar.

Is there any way to skip the toolbar when pressing tab, and jump right to the textarea editor?

thanks!

I am not sure it is a bug report or a feature request, but it would be nice if I could see the selected text's current status on the button panel (e.g.: if I bold the selected text and then I select it again the bold button is still off)

Great component!
Adding some color and baground color would be awesome!

'insertHorizontalRule' (mentioned in the documentation) didn't work for me. Then I changed it to the following and it worked fine.

var btnsGrps = jQuery.trumbowyg.btnsGrps;

$('.simple-editor').trumbowyg({
btns: ['viewHTML',
'|', 'formatting',
'|', btnsGrps.design,
'|', 'link',
'|', 'insertImage',
'|', btnsGrps.justify,
'|', btnsGrps.lists,
'|', 'horizontalRule']
});

y isnt it allowed?

When I change font style (strong, emphasis) with button or keyboard shortcut cursor skips before the tag after few seconds/few letters. Or if I switch to strong, and write nothing, after a second style turns off. I hope picture will be more explanatory.

I tried Opera, Chrome, Firefox.

1. Select a text
2. Press 'CTRL+ B' or 'CTRL + I'
3. The text is formated
   Expected:
   The cursor is at the end of the formatted text
   Actual:
   The cursor is before the formatted text

Hi, I need to add a button to the dropdown color plugin to permit user to use a specific html color (ex : #FF0000).
I've modified the plugin buildDropdown function, if tou want to add this to the plugin :

  function buildDropdown(func){
  /* ... not modified : $.each ... */

    // add free color btn
    var btn = '_'+func+'_color_free';
    $.trumbowyg.opts.btnsDef[btn] = {
        func: function (params, tbw){
            tbw.openModalInsert( "Specific Color",{
                    html_value: {
                        label: 'HTML',
                    },
                },
                // callback
                function(values){
                    tbw.execCmd(func,values['html_value']);

                    return true;
                }
            );
        },
        text:'#',
        // style adjust for displaying the text
        style:'text-indent: 0px;line-height: 20px;padding: 0 5px;'
    };
    dropdown.push(btn);

    return dropdown;
}

Heyho, I like your WYSIWYG-Editor very much, I would use it, but there is no BBCode-Support :(
Is something like this planned?
Would be happy if this will be answered, thanks and good greetings from germany,

Tim

I'm trying to show a live preview where a partial content is being edited in "Trumbowyg". I tried multiple events including keyup, change, twbfocus, twbblur but none give the desired effect. The keyup event works great when a user is changing something manually in the editor but nothing else works when editor's toolbar is used (i.e. some text made bold) until user types in something. Also, the "native" event (twbfocus, twbblur) examples here don't fire at all: https://alex-d.github.io/Trumbowyg/documentation.html#events

Is there a way to know when content in the editor was changed?

Thanks!

We need a lightweight editor like this in Dart!

This looks like a pretty nice wysiwyg editor, but the very first thing I tried (typing some bolded text) doesn't work. :(

Steps:

1. Hit the 'Bold' button
2. Type "Foobar"
   What actually comes out is "oobarF".

This is from the demo on the front page of http://alex-d.github.io/Trumbowyg/.