1

Im using wagtail and i have added a button to the richtext editor that adds 'pre' tag to selected text once the button is clicked, but im struggling to create the code to unwrap the text. Similar to what Joss has done here: https://jossingram.wordpress.com/2014/07/24/add-some-blockquote-buttons-to-wagtail-cms-wysiwyg-editor/

So basically like the bold or italics does once highlighted if it already has a 'pre' tag before remove it if not, then add it. i have tried using parentElement and parentNode and other functions but for some reason the lastSelection function returns an undefined value and it doesn't want to work.

 (function() {
  (function($) {
    return $.widget("IKS.prebutton", {
      options: {
        uuid: '',
        editable: null
      },
      populateToolbar: function(toolbar) {
        var button, widget;

        widget = this;
        button = $('<span></span>');
        button.hallobutton({
          uuid: this.options.uuid,
          editable: this.options.editable,
          label: 'Pre Tag',
          icon: 'fa fa-backward',
          command: null
        });
        toolbar.append(button);
        return button.on("click", function(event) {
          var insertionPoint, lastSelection;

          lastSelection = widget.options.editable.getSelection();
          insertionPoint = $(lastSelection.endContainer).parentsUntil('.richtext').last();
          
          var elem;
          elem = "<pre>" + lastSelection + "</pre>";
          if ($(lastSelection).find('pre').length) {
            console.log('Selected Word Contains Pre')
            // add function to remove tag
          }else{
            console.log('No Pre Tag in Selected Word')
            var node = lastSelection.createContextualFragment(elem);

            lastSelection.deleteContents();
            lastSelection.insertNode(node);

            return widget.options.editable.element.trigger('change');
          }

        });
      }
    });
  })(jQuery);

}).call(this);
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>
JaredOzzy
  • 123
  • 1
  • 1
  • 12
  • the snippet is not working Add JQUery to libraries – Alejandro Teixeira Muñoz Jan 15 '18 at 11:59
  • I have added it, but it still gives errors in the snippet. The code is working as planned , i am struggling to create the function that will remove the tags that have been created. I need to add an if statement to check wether the parentNode of lastSelection contains pre then remove the tag. I saw a function .wrap and .unwrap that i tried to get to work but couldn't get that working either. – JaredOzzy Jan 15 '18 at 12:04
  • 1
    I made a correction, adding jquery.ui to allow $.widget. Check it plz – Alejandro Teixeira Muñoz Jan 15 '18 at 12:05
  • You can check this answer to check if a node contains certain child inside: https://stackoverflow.com/a/9833917/3617531 – Alejandro Teixeira Muñoz Jan 15 '18 at 12:14
  • I have added the code change i have made, yet everytime i click the button it returns the 'no pre tag in selected word' part of the statement. so is there something wrong with my if statement? – JaredOzzy Jan 15 '18 at 12:28
  • I cannot see that change, nor a button on the snippet.. It has no HTML... – Alejandro Teixeira Muñoz Jan 15 '18 at 12:36
  • anyway, if not possible to add the full HTML or code here, could you copy or show us how are you calling it?? – Alejandro Teixeira Muñoz Jan 15 '18 at 12:37
  • I register the js file in the wagtailhooks.py folder. this allows hallo.js to see the js file and add it to the richeditors toolbar. just like any other button like Bold/italics/h1 etc. – JaredOzzy Jan 15 '18 at 12:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163189/discussion-between-jaredozzy-and-alejandro-teixeira-munoz). – JaredOzzy Jan 15 '18 at 12:48
  • The piece of code is unusable in the snippet. There is not an example of the structure your HTML has.. or there is no DOM elements to test the function. Anyway, as I see, you write `elem = "
    " + lastSelection + "
    ";` then, lastSelection will NEVER have a 
     inside, as it will be inside a PRE... and the 
     will be the parent... am I right?
     – Alejandro Teixeira Muñoz Jan 15 '18 at 12:48
  • The `pre` is most certainly outside of the selection. If you peek at the source code of the built-in link plugin, you'll see that the selection is expanded when [checking for the presence of element](https://github.com/wagtail/wagtail/blob/61698981feda84729b562eec5424b90365b15650/wagtail/wagtailadmin/static_src/wagtailadmin/js/hallo-plugins/hallo-wagtaillink.js#L13-L18) and when [removing the link](https://github.com/wagtail/wagtail/blob/61698981feda84729b562eec5424b90365b15650/wagtail/wagtailadmin/static_src/wagtailadmin/js/hallo-plugins/hallo-wagtaillink.js#L144-L153). – Loïc Teixeira Jan 15 '18 at 23:50

0 Answers0