Wysihtml5 with Bootstrap and 2.1 Vanilla - no preview/save draft/post comment buttons

This discussion is related to the Wysihtml5 addon.
OnlyAnExcuseOnlyAnExcuse ✭✭
edited October 2012 in Feedback

I tried this with Vanilla 2.1 & Bootstrap theme, and there seems to be a problem.

With Button Bar installed with Bootstrap, the links for "Preview - Save Draft - Post Comment" and others pop up when the user clicks the text editing area.

This doesn't seem to be happening with the wysihtml5 plugin, so users can use the wysiwyg editor but the button to post is still hidden.

Comments

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited October 2012

    The buttons in VanillaBootstrap are hidden using Javascript. Simply apply this bit of CSS and the buttons should show up:

    .CommentFormWrap .Buttons {
        display: block !important;
    }
    

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    OnlyAnExcuse
  • Excellent, cheers!

  • Working perfectly now. Wee bit of feedback if I may?

    The button state when in use remains the same if it has been clicked or not. So for example when Bold is selected, you can't tell by looking at the buttons, until you type something and see it is bold.

    If there was a state to show a button is pressed (like there is on rollover) it might help users.

    Otherwise it's great and testing it on our site now.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited October 2012

    Your point is perfectly valid and something I've thought about quite a bit. I've used the default Vanilla styling/classes for everything in this plugin though and as such no styling has been added by me. As Vanilla doesn't have a "toggled button" state I therefore chose not to implement any "active button" styling as this would differ from theme to theme. You're however free to style it yourself as the following class gets added to active buttons: wysihtml5-command-active

    P.S.: In your case, the easiest would be to go to wysihtml5.js and find and replace all instances of wysihtml5-command-active with active, which is a class Bootstrap can utilize.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • Ahh, I can see the logic in that. I'll add the class to the stylesheet and post the code here shortly too.

    Thanks again!

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    By the way, I just pushed a small fix to the Github repo that adds missing type attributes to the input fields - these are required by Bootstrap: https://github.com/kasperisager/Wysihtml5/commit/e7fe494ec88c6b42b8712b68e253c66a63c5d3c9

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • Hi there! Thanks a lot for this plugin, it's much easier and slicker than CLEditor, however it seems to have an issue with the "Leave a comment" text in the input space.

    Upon starting to type, I assumed the "Leave a comment" placeholder would go away, however this was not the case and so the text I type overlaps it. I'm using Vanilla Bootstrap's latest version from github and query 1.7.2.

    Is there anything like a plugin that may be causing the text to not go away?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited October 2012

    You'll have to fix this manually using CSS. When I wrote VanillaBootstrap I hated WYSIWYG editing and tried making it as annoying as possible to use a WYSIWYG editor by making the default text areas utilize some cool Javscript that would obscure WYSIWYG editors. Now, I realize that I shot myself in the foot by doing this and writing a WYSIWYG plugin... Sorry!

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • cnickcnick New
    edited October 2012

    I wrote you few days back about supposedly a javascript conflict between latest bootstrap theme(comments form) and Cleditor/Wysihtml5 and now I've thinked at this to ask you.
    Since button bar appears only in comment forms but works well with bootstrap is there any way to disable Wysihtml5 appearance on comment forms so I can use both, button bar for comments and Wysihtml5 for the rest(post a discussion ...etc)

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    That would require a bit of a re-write but sure, it's possible.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • I thought could make it just deleting a piece of code so I could do it whitout breaking the plugin.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    Nope, that's not possible as Wysihtml5 hooks into Gdn_Form_BeforeBodyBox_Handler() which handles the text areas on both the "New Discussion" page as well as all individual discussions.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • i am still confused.. wysihtml5 isn't showing up though installed. What should i do?
    Where to change code?
    Here is the link to my website. http://drvser.com

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    Wysihtml5 is for Vanilla 2.1 only I'm afraid

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • so is there any other way to add wysihtml or cleditor?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    You can use the WYSIWYG editor that comes bundled with 2.1

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • DenisSDenisS My brain hurts Buriram ✭✭

    hi kasperisager, It's me again.
    I have looked for an answer to the wysiwyg to email solution?? I have tried all 4 wysiwyg plugins and I get the same on all of them. The code showing when the email arrives looks so messy, Is it in the email sending code somewhere that a mod has to be done. If so can you explain how to do it. I really only wanted to send the " Discussion Title " and the link rather than the whole body text is that possible? Because sometimes the body text can be so big.

    I have attached the email view.

    Thanks

    Denis

This discussion has been closed.