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

OnlyAnExcuse

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.

Kasper

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

OnlyAnExcuse

Excellent, cheers!

OnlyAnExcuse

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.

Kasper

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.

OnlyAnExcuse

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!

Kasper

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

astrolander

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?

Kasper

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!

cnick

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)

Kasper

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

cnick

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

Kasper

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.

nutjob

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

Kasper

Wysihtml5 is for Vanilla 2.1 only I'm afraid

nutjob

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

Kasper

You can use the WYSIWYG editor that comes bundled with 2.1

DenisS

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