用标签onclick包装/解包最后选择的文本

时间:2018-01-15 11:58:22

标签: javascript jquery wagtail hallo-js

我使用了wagtail,我在richtext编辑器中添加了一个按钮,添加了' pre'单击按钮后标记为选定文本,但我正在努力创建解包文本的代码。类似于乔斯在这里所做的: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);
&#13;
 <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>
&#13;
&#13;
&#13;

0 个答案:

没有答案