1

我正在使用 wagtail，并且我在富文本编辑器中添加了一个按钮，一旦单击该按钮，该按钮就会向选定的文本添加“pre”标签，但我正在努力创建代码来解开文本。与 Joss 在这里所做的类似：https ://jossingram.wordpress.com/2014/07/24/add-some-blockquote-buttons-to-wagtail-cms-wysiwyg-editor/

所以基本上就像粗体或斜体一样，如果它已经有一个'pre'标签，如果没有，则删除它，然后添加它。我曾尝试使用 parentElement 和 parentNode 以及其他函数，但由于某种原因，lastSelection 函数返回一个未定义的值并且它不想工作。

 (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>

4

0 回答 0