我無法在復制的文本中插入腳注
[英]I can't insert a footnote into the copied text
問題描述
我正在為用戶提供一種在文本中插入腳注的方法（如科學文章中所實現的那樣）。 我為此使用 tinymce，它作為一個插件運行。 當我鍵入文本本身時它工作正常。 但是，一旦我嘗試在復制的文本中插入一個腳注（也就是說，我從另一個站點復制了文本並想要插入一個腳注），它就會給我一個錯誤 - Uncaught ReferenceError: $node is not defined
我已經嘗試了很多嘗試，但我無法讓它工作。 你能告訴我我做錯了什么嗎？
腳注.min.js
! function () {
"use strict";
var t, e = tinymce.util.Tools.resolve("tinymce.PluginManager");
"function" != typeof Array.prototype.forEach && (Array.prototype.forEach = function (t) {
for (var e = 0; e < this.length; e++) t.apply(this, [this[e], e, this])
}), Object.defineProperty && Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get && (t = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"), Object.defineProperty(Element.prototype, "textContent", {
get: function () {
return t.get.call(this)
},
set: function (e) {
return t.set.call(this, e)
}
}));
var n = function (t, e) {
var n = t;
for (var o in e) n = n.replace(/\{(\/?[^\}]+)\}/gm, e[o]);
return n
},
o = function (t) {
var e = t.selection.getNode(),
o = "",
r = "SPAN" == e.tagName && "fnoteWrap" === t.dom.getAttrib(e, "class"),
i = "fnoteWrap" == e.className ? e.childNodes[0].firstChild.nodeValue.replace(/[^0-9]/g, "") : e.childNodes[0];
r && (o = e.name || decodeURIComponent(e.childNodes[0].getAttribute("data-content")) || ""), t.windowManager.open({
title: "Insert Contents",
size: "normal",
body: {
type: "panel",
items: [{
type: "textarea",
name: "name",
multiline: !0,
minWidth: 520,
minHeight: 100
}]
},
buttons: [{
type: "cancel",
name: "cancel",
text: "Cancel"
}, {
type: "submit",
name: "save",
text: "Save",
primary: !0
}],
initialData: {
name: o
},
onSubmit: function (e) {
var o, r, a, c, l = e.getData().name,
s = '<span class="fnoteWrap" id="#wk_ft{FOOTNOTE_INDEX}" contenteditable="false"><button type="button" class="fnoteBtn" data-content="' + l + '">{FOOTNOTE_INDEX}</button></span>',
f = t.getDoc().querySelectorAll(".fnoteBtn"),
u = f.length,
p = (r = t.selection.getNode(), a = function (t) {
var e = !1;
return (e = [].filter.call(t.parentNode.children, function (n) {
return n.previousElementSibling === t ? e = !0 : e
})).map(e => Array.from(e.querySelectorAll("fnoteBtn").length) > 0 ? $node.nextElementSibling.classList.contains("fnoteBtn") ? $node.nextElementSibling.children.children : e.querySelectorAll(".fnoteBtn") : "BODY" === t.nodeName ? [] : a(t.parentNode))
}, c = function (t, e) {
if (!e) return !1;
if (e) return $node;
var n = null;
return e.children.forEach(function () {
e && (n = c(t, this))
}), n
}, function (t, e) {
for (var n = a(e); 0 !== n.length;) {
var o = c(t, n);
if (null !== o) return o;
n = a(n)
}
return n
}(".fnoteBtn", r));
if (p.length) {
var d;
for (p = p[0], d = 0; d < u && p != f[d]; d++);
i < u ? o = n(s, {
FOOTNOTE_INDEX: $(f[i - 1]).html()
}) : (o = n(s, {
FOOTNOTE_INDEX: $(f[d]).html()
}), t.selection.collapse(0))
} else o = n(s, {
FOOTNOTE_INDEX: u + 1
}), t.selection.collapse(0);
t.execCommand("mceInsertContent", !1, o), e.close(), Array.from(t.getDoc().querySelectorAll(".fnoteBtn")).forEach(function (t, e) {
t.textContent = e + 1, t.parentNode.setAttribute("id", "#wk_ft" + (e + 1))
})
}
})
},
r = {
register: function (t) {
t.addCommand("footnotes", function () {
o(t)
})
}
},
i = {
register: function (t) {
t.ui.registry.addToggleButton("footnotes", {
icon: "fnote",
tooltip: "Footnote",
onAction: function () {
return t.execCommand("footnotes")
},
onSetup: function (e) {
return t.selection.selectorChangedWithUnbind("span.fnoteWrap", e.setActive).unbind
}
}), t.ui.registry.addMenuItem("footnotes", {
icon: "fnote",
onAction: function () {
return t.execCommand("footnotes")
}
})
}
};
e.add("footnotes", function (t) {
t.ui.registry.addIcon("fnote", '<img src="' + tinyMCE.baseURL + '/plugins/footnotes/img/fn.png">'), r.register(t), i.register(t)
})
}();
腳注.js
(function(){
'use strict';
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
if (typeof Array.prototype.forEach !== 'function') {
Array.prototype.forEach = function(cb){
for (var i = 0; i < this.length; i++){
cb.apply(this, [this[i], i, this]);
}
};
}
if (Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
&& !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{
get: function() {
return innerText.get.call(this);
},
set: function(s) {
return innerText.set.call(this, s);
}
}
);
})();
}
/**
*
* @param str
* @param data
* @returns {*}
*/
var replaceTmpl = function(str, data) {
var result = str;
for (var key in data) {
result = result.replace(/\{(\/?[^\}]+)\}/gm,data[key]);
}
return result;
};
/**
*
* @param editor
*/
var open = function (editor) {
var selectedNode = editor.selection.getNode(), name = '',
isFootNotes = selectedNode.tagName == 'SPAN' && editor.dom.getAttrib(selectedNode, 'class') === 'fnoteWrap';
var selectIndex = (function(){
if (selectedNode.className == 'fnoteWrap') {
var num = selectedNode.childNodes[0].firstChild.nodeValue.replace(/[^0-9]/g,'');
return num;
}
else {
return selectedNode.childNodes[0];
}
}());
if (isFootNotes) {
name = selectedNode.name || decodeURIComponent(selectedNode.childNodes[0].getAttribute('data-content')) || '';
}
editor.windowManager.open({
title: 'Insert Contents',
size: 'normal',
body: {
type: 'panel',
items : [
{
type:'textarea',
name: 'name',
multiline: true,
minWidth: 520,
minHeight: 100,
}
],
},
buttons: [
{
type: 'cancel',
name: 'cancel',
text: 'Cancel'
},
{
type: 'submit',
name: 'save',
text: 'Save',
primary: true
}
],
initialData: { name: name },
onSubmit: function (e) {
var newfootnoteContent = e.getData().name,
fixFootnoteContent = (function () {
return encodeURIComponent(newfootnoteContent);
}()),
htmlTemplate = '<span class="fnoteWrap" id="#wk_ft{FOOTNOTE_INDEX}" contenteditable="false"><button type="button" class="fnoteBtn" data-content="'+fixFootnoteContent+'">{FOOTNOTE_INDEX}</button></span>',
totalFootNote = editor.getDoc().querySelectorAll('.fnoteBtn'),
totalCount = totalFootNote.length,
html;
function findNextFD(node) {
var getNext = function(el) {
var nextAll = false,
elements;
nextAll = [].filter.call(el.parentNode.children, function (htmlElement) {
return (htmlElement.previousElementSibling === el) ? nextAll = true : nextAll;
});
return nextAll.map(v => {
if (Array.from(v.querySelectorAll('fnoteBtn').length) > 0) {
$node.nextElementSibling.classList.contains('fnoteBtn') ?
elements = $node.nextElementSibling.children.children :
elements = v.querySelectorAll('.fnoteBtn');
return elements
}
else {
if (el.nodeName === 'BODY') return [];
return getNext(el.parentNode);
}
})
}
var nextInDOM = function(_selector, el) {
var next = getNext(el);
while(next.length !== 0) {
var found = searchFor(_selector, next);
if(found !== null) {
return found;
}
next = getNext(next);
}
return next;
}
var searchFor = function(_selector, el) {
if (!el) {return false};
if(el) {
return $node;
}
else {
var found = null;
el.children.forEach(function() {
if (el)
found = searchFor(_selector, this);
});
return found;
}
return null;
}
var currentClassNot_NextClass = nextInDOM('.fnoteBtn', node);
return currentClassNot_NextClass;
}
var nextFD = findNextFD(editor.selection.getNode());
if(nextFD.length) {
nextFD = nextFD[0];
var foundIdx;
for(foundIdx = 0; foundIdx < totalCount; foundIdx++) {
if(nextFD == totalFootNote[foundIdx]) {
break;
}
}
if (selectIndex < totalCount) {
// modify
html = replaceTmpl(htmlTemplate,{FOOTNOTE_INDEX : $(totalFootNote[selectIndex-1]).html()});
}
else {
// anywhere add
html = replaceTmpl(htmlTemplate,{FOOTNOTE_INDEX : $(totalFootNote[foundIdx]).html()});
editor.selection.collapse(0);
}
} else {
// last add
html = replaceTmpl(htmlTemplate,{FOOTNOTE_INDEX : totalCount + 1});
editor.selection.collapse(0);
}
editor.execCommand('mceInsertContent', false, html);
e.close()
// index realignment
var fnoteBtn = Array.from(editor.getDoc().querySelectorAll('.fnoteBtn'));
fnoteBtn.forEach(function(value,idx){
value.textContent = idx+1;
value.parentNode.setAttribute('id','#wk_ft' + (idx +1))
})
}
});
};
var Dialog = { open: open };
var register$1 = function (editor) {
editor.ui.registry.addToggleButton('footnotes', {
icon : 'fnote',
tooltip : 'Footnote',
onAction: function () {
return editor.execCommand('footnotes');
},
onSetup: function (buttonApi) {
return editor.selection.selectorChangedWithUnbind('span.fnoteWrap', buttonApi.setActive).unbind;
}
});
editor.ui.registry.addMenuItem('footnotes', {
icon: 'fnote',
onAction: function () {
return editor.execCommand('footnotes');
}
});
};
var register = function (editor) {
editor.addCommand('footnotes', function () {
Dialog.open(editor);
});
};
var Commands = { register: register };
var Buttons = { register: register$1 };
function Plugin () {
global.add('footnotes', function (editor) {
editor.ui.registry.addIcon('fnote','<img src="'+ tinyMCE.baseURL + '/plugins/footnotes/img/fn.png' +'">')
Commands.register(editor);
Buttons.register(editor);
});
}
Plugin();
})()
1 個解決方案
解決方案1
0 2022-08-26 15:32:26
您正在傳入findNextFD(node) ，在 function 內部沒有名為$node的變量。 在node前面不帶$試試，並添加一些邏輯以確保node !== null在 function 開頭進行調試。
如果您嘗試使用 jQuery function $確保它已正確導入並且$已定義。
一些 例子：
// Select all "p" elements and write "Hello"
$( "p" ).text( "Hello" );
// Change the color of all "p" elements to red
$( "p" ).css( "color", "red" );
// Hide all elements with the ".shy" class
$( ".shy" ).hide();
// Show the element with the "#nav" id
$( "#nav" ).show();
如何在一個文本字段中輸入的文本實時復制到多個文本字段？
[英]How can I get text entered in one text field copied in realtime to multiple text fields?
跨瀏覽器：禁用輸入字段的不同行為（文本可以/不能被復制）
[英]Cross-Browser: Different behaviors for disabled input fields (the text can/can't be copied)
如何每隔兩個特定文本之間的n個字符插入文本？
[英]How can I insert text every n characters that isn't between two specific pieces of text?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.