Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How Can I use Wysihtml5 with Quotes?

This discussion is related to the Wysihtml5 addon.

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

Tagged:

Comments

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited January 2013

    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.

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

  • 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.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    Wysihtml5 has an API that you can make use of:

    editor.getValue()
    

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

  • @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

  • mega6382mega6382 Ultimate Programmer ✭✭

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

  • TamaTama United Kingdom ✭✭✭
    edited June 2013

    @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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

    Tama
  • peregrineperegrine MVP
    edited June 2013

    @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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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:
  • peregrineperegrine MVP
    edited June 2013

    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 :).

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    Kasper
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I am sure kasper is having a good chuckle :).

    Yes no doubt

    peregrine
  • peregrineperegrine MVP
    edited June 2013

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    vrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • straferstrafer New
    edited June 2013

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

  • TamaTama United Kingdom ✭✭✭
    edited June 2013

    @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/

  • @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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2013

    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.

    Tamahgtonight
This discussion has been closed.