No announcement yet.

On getting the WYSIWYG editor working in Chrome

This topic is closed.
  • Filter
  • Time
  • Show
Clear All
new posts

  • On getting the WYSIWYG editor working in Chrome

    So I decided to try and get vBulletin's WYSIWYG editor working in Google Chrome and here are my results.

    First I edited is_browser to identify Chrome and is_wysiwyg_compatible to allow the WYSIWYG editor in Chrome. I also edited vbulletin_global.js to identify chrome in the is_chrome variable and fix the false positive with is_saf when it's really chrome.

    Now when loading a thread I get a non-functioning WYSIWYG editor in Chrome.

    Now to get the editor to work, the blocker is a couple of lines in vbulletin_textedit.js. I made some changes and the WYSIWYG editor now partially works.

    vbulletin_textedit.js about line 1620
    // changed this
    //var newss = this.editdoc.createElement('style');
    //newss.type = 'text/css';
    // this line throws a NO_MODIFICATION_ALLOWED_ERR exception
    //newss.innerHTML = wysiwyg_csstext;
    // to this
    var newss = this.editdoc.createElement('div');
    newss.innerHTML = '<style type="text/css">' + wysiwyg_csstext + '</style>';
    Observations for the Quick Reply box:
    • Clicking the quick reply postbit icon takes you to the quick reply
    • Most formatting works- bold, italic, underline, remove formatting, color
    • Inserting a URL fails
    • Inserting a picture works
    • Quote button fails
    • Switching to and from WYSIWYG mode works

    Observations for the full editor:
    • The switch editor mode and expand editor buttons aren't floated to the right.
    • On initial load, the fonts and sizes dropdowns look right, but after clicking in the editor they go empty (but you can still select fonts/sizes)
    • Most formatting works, but some fail. The ones that fail are trying to use createRange where it doesn't exist. I think the key to getting it to work is to use window.getSelection()

    Anyway, I'll leave it up to the devs to see if integration is possible.

  • #2
    For the NO_MODIFICATION_ALLOWED_ERR, I have maybe something:

    See the text below 'Found the cause of a Safari problem'.

    I think this bug is common between Chrome and Safari, if we can find a fix for Chrome, I think it should work for Safari

    Edit: I think this error is the only thing which fails for having a WYSIWYG editor with Chrome/Safari.

    I've tested with Safari 3.1.2 + latest build of WebKit (r36117) the WYSIWYG editor and the same problem occurs. And if you're searching for 'DOM Exception 7 innerHTML' in the WebKit bug tracker, you'll see a long list of bugs.

    For me, this is a WebKit bug. If someone can confirm my opinions...
    Last edited by Yves Rigaud; Sat 6 Sep '08, 12:19pm.

    vBulletin QA - vBulletin Support French - Lead Project Tools developer

    Next release? Soon(tm)


    • #3
      The best workaround for the NO_MODIFICATION_ALLOWED_ERR is to manipulate the DOM instead of using innerHTML. Here's the code that now works fine:

      I commented out the line causing the problem and added 2 lines below.
      var newss = this.editdoc.createElement('style');
      newss.type = 'text/css';
      //newss.innerHTML = wysiwyg_csstext;
      var newsscontent = this.editdoc.createTextNode(wysiwyg_csstext);
      Now the main thing causing problems is vBulletin's use of createRange.


      • #4
        A friendly reminder that code discussions are meant to be held on, the sister resource/customization website.


        • #5
          what's going on guys we are already in 2010 and we still don't have WYSIWYG support here for chrome.

          It's the only thing that is missing for me in this wonderful browser.
          IDANTECH Forums
          Facebook Status


          • #6
            Still waiting for that, it looks like a ball match here some ppl point to Chrome responsability on Chrome they send us back here, all i know is using other systems with fully working editors make me feel the problem is move vb side...


            • #7
              I hope to see WYSIWYG support in chrome soon too It's a superb browser and it'll certainly have the necessary JS features to facilitate the functionality.
              Dean Clatworthy - Web Developer/Designer


              • #8
                seeing how wordpress supports Chrome just fine...
                ManagerJosh, Owner of 4 XenForo Licenses, 1 vBulletin Legacy License, 1 Internet Brands Suite License
                Director, | Gaming Hosting Administrator,, Urban Online Entertainment


                • #9
                  In deterministic results from wysiwyg editor using IE 7

                  Hi Guys,

                  I am trying to format some data with the wysiwyg and it appears to be inconsistent when it comes to new lines being automatically entered once saved.

                  I am a newbie, so if there are alaternative ways that are better please let me know.

                  I enter the following in the editor.

                  As you don't support tables in this editor, its a little difficult for me to show so I'll do my best to describe.

                  I enter html code <center>
                  The create a single row 2 column table
                  add the following contents
                  This is the title1
                  1st Fred
                  2nd Jack
                  3rd Peter
                  This is title2
                  1st June
                  2nd Jolly
                  3rd Ian

                  When I save it, I get more newlines than expected between tables.

                  In fact, if I just edit, then save. Each time additional new lines appear between tables.

                  This is a pain, how do I work around this feature, or is it a bug in the editor?


                  • #10
                    My thought exactly. The 2008 thread said it was premature to ask for it during beta. What about now?


                    • #11
                      One thing I think I know needs to change is using names for the colors.

                      It needs to be hex numbers.
                      Unless Chrome has added the ability to do the names which I don't think it has.
                      Quarrels and Quills - always in need of more members
                      RPG Tools


                      • #12
                        Chrome recognizes the html color names in stylevar, all three options for html color reference work great: hex, rgb, and html color name. So I'm guessing the vB team knows how to do it. Is the issue, integrating a third party editor?
                        Last edited by skrabler; Sat 19 Jun '10, 1:08pm. Reason: I missed the point and found it again.


                        • #13
                          Nope, 4.0.4 doesn't have it. Perhaps 4.1.

                          Thank god for Safari 5 extensions


                          • #14

                            I was all excited that there was a thread about this, surely it was fixed. Then found the 2008 thread, now this thread, and still nothing.

                            Can't someone at vBulletin dev contact Google Chrome dev team to work this out? You guys are two big companies, call each other or go have lunch or something!


                            (infinite loop) Boo...

                            And we want a fix that is backwards compatible, some of us don't plan to upgrade to 4.x anytime soon.



                            • #15
                              I recently upgraded to VB 4.1.9 from 4.1.8
                              Now this wysiwyg editor is not working in my forum.
                              Here I found 4.19 and with the same firefox version of browser I am able to use this quick reply editor?
                              I tried disabling all plugins and also tried using all different style IDs and the settings also correct for mobile version as "None" in Style > Languages as advised in many solutions when I searched for help.
                              Can anybody tell me, how it is working here in in the same 4.1.9 version?
                              advanced thanks.


                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.