我使用了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;