How Can I use Wysihtml5 with Quotes?

pinguisl

Hi, I have installed both plugins but when I enable the Wysihtml5 plugin Quote doesn't work.
Thanks.

Kasper

Short version: You can't

Long version: The Quotes plugin has hardcoded compatibility with plugins like "CLEditor" and does not seem to allow for hooking into and extending the JS that handles insertion of quotes. However, it can rather easily be hacked to add support for Wysihtml5 - it's a fairly simple matter of creating a new case and then adding this case to ApplyQuoteText(). I wouldn't attempt this unless you know what you're doing though.

strafer

More specific question: how can i get/change textbox of wysihtml5? I'm trying to get innerHTML/data/value/etc of "TextBox wysihtml5-editor" and "wysihtml5-sandbox" class fields, but can't get anything except "undefined" (as alert reports to me).

I try to adopt QuotesSelection addon for wysihtml5.

Kasper

Wysihtml5 has an API that you can make use of:

editor.getValue()

donbilet

@kasperisager said:

Long version: However, it can rather easily be hacked to add support for Wysihtml5 - it's a fairly simple matter of creating a new case and then adding this case to ApplyQuoteText(). I wouldn't attempt this unless you know what you're doing though.

Can you hack it? Thanks

mega6382

@pinguisl I have tested that plugin and I haven't found any way to make it work. So its mean it is not possible.

Tama

@mega6382 said:
pinguisl I have tested that plugin and I haven't found any way to make it work. So its mean it is not possible.

Have a look at this reply

@kasperisager said:
Short version: You can't

Long version: The Quotes plugin has hardcoded compatibility with plugins like "CLEditor" and does not seem to allow for hooking into and extending the JS that handles insertion of quotes. However, it can rather easily be hacked to add support for Wysihtml5 - it's a fairly simple matter of creating a new case and then adding this case to ApplyQuoteText(). I wouldn't attempt this unless you know what you're doing though.

vrijvlinder

You could just add that to the quotes plugin no?

Under the callback function (note: not sure about the preg replace if this is correct)

case 'Wysihtml5':
            $Sender->EventArguments['Object']->Body = preg_replace_callback("/(< blockquote\s+(?:class=\"(?:User)?Quote\")?\s+rel=\"([^\"]+)\">)/ui", array($this, 'QuoteAuthorCallback'), $Sender->EventArguments['Object']->Body);
            $Sender->EventArguments['Object']->Body = str_ireplace('< /blockquote >','< /p >< /div >< /blockquote >',$Sender->EventArguments['Object']->Body);
            break;


Under the format quote function 
  
          case 'Wysihtml5':
               $Attribution = sprintf(T('%s said:'), UserAnchor($Data, NULL, array('Px' => 'Insert')));
               $QuoteBody = $Data->Body;

                     $Quote = <<<BLOCKQUOTE
< blockquote class="Quote" >

< div class="QuoteAuthor" >$Attribution< /div >
 < div class="QuoteText" >$QuoteBody< /div >
< /blockquote >

BLOCKQUOTE;

               break;

If you copy this to try , remove the spaces I added between the < > so the would show here. I recommend studying the quotes plugin well before doing anything. But if you break it just remove it and install a fresh one.

peregrine

@vrijvlinder said:

You could just add that to the quotes plugin no?

At what point in time will
($Sender->EventArguments['Object']->Format)
ever be equal to 'Wysihtml5 (rhetorical question - never is my guess, unless you did something else).

so how could it ever reach case 'Wysihtml5' since the switch is based on $Sender->EventArguments['Object']->Format

this whole thread is the most tangled cryptic discussion I have seen.

one would think the js has to be changed.

also no mention of quote plugin version, wysihtml5 version or vanilla version, makes for a very good confusing discussion going places - to who knows where.

with suggested changes to references without filenames makes it especially cryptic.

Ideally, the coulda's coulda' and shoulda' be tested and if it works post the exact changes and in which files, versions. in a summary comment.

vrijvlinder

sure , you would need to add the case to everything that requires it

Gdn_Quotes.prototype.ApplyQuoteText = function(QuoteText) {
      QuoteText = QuoteText+"\n";
      var Editor = this.GetEditor();
      Editor.val(Editor.val() + QuoteText);
      
      switch (this.InsertMode) {
         case 'Wysihtml5':
            Editor.val(Editor.val() + "
");
            Editor.get(0).editor.updateFrame();
         break;
         
         case 'default':
         default:

peregrine

and how does that change:

$Sender->EventArguments['Object']->Format

referring to:

http://vanillaforums.org/discussion/comment/185085/#Comment_185085

eventually someone will tire of the hypotheticals and post the summary of changes that work .

I am sure kasper is having a good chuckle .

vrijvlinder

I am sure kasper is having a good chuckle .

Yes no doubt

peregrine

here is a very dirty fix with the least amount of changes.

in quotes.js in quotes version 1.6.6 in vanilla 2.1



      // Determine what mode we're in (default, cleditor... ?)
      $('div.cleditorMain').livequery(function(){
         Quotes.SetInsertMode('cleditor', this);
      });


with


      // Determine what mode we're in (default, cleditor... ?)
      $('div.TextBoxWrapper').livequery(function(){
         Quotes.SetInsertMode('cleditor', this);
      });

change in config.php

$Configuration['Garden']['InputFormatter'] = 'Wysiwyg';

the one flaw is that when quoting it loads a new web page. but it does quote.

who will take the next quotes challenge ???? will it be you?
test before you post and give us your method.

vrijvlinder

the one flaw is that when quoting it loads a new web page. but it does quote.

yea it does that on 2.0 not sure if it is from my user photo mods or if that is how 2.0 reacts with that plugin.

strafer

How apply styles to content of textbox, in particular blockquote tag?

Tama

@strafer said:
How apply styles to content of textbox, in particular blockquote tag?

edit your theme's custom.css to have

blockquote,
.QuoteIdIfyouhaveone {
     /* styling goes here */
     background: #CCC; /* lets background colour it */
     color: #000; /* change me if the text is hard to read on your chosen background :D */
     border-left: 3px solid #000; /* Hey I want a border on one side too ! */
}

you can use hex colours -> '#000000' or just write the name of the colour, personally I would recommend hex colours for good practice .

You can google hex colours or have a look at http://html-color-codes.com/

strafer

@Tama , you didn't understand me, i know how apply styles, but i can't apply style to blockquote (or other tags) within wysihtml5 textbox: i want that quote during comment composition looks like in published comment.

vrijvlinder

You want the content of the rich text editor to look like the style of the page once posted?

You need to edit the js and/or css file of the editor. Which ever it is.

example :

In cleditor you would edit the font color in the js for cleditor and the rest of the style like the background of the box in the cleditor css file.

You must add the styles you want for the text/aka block quote and it's background by adding it to the .cleditorMain in the cleditor css file.