我正在尝试构建一个WYSIWYG编辑器，我在弹出窗口中设置了工作按钮。每当可编辑的div被悬停时它会显示一个边框，当点击这个div时，一个按钮会淡入，其中显示弹出窗口上的按钮。我已经在下面包含了js代码：
$.fn.nitspopupeditor = function () { //Function to format editable items.
this.each(function () {
setTimeout(function () {}, 100);
var $this = $(this);
var selected_text = null;
var uniquid = "nits" + new Date().getTime();
$this.attr('data-nitsselect', uniquid); //set element unique id
function getSelected() { //get selected text
var selection = window.getSelection();
range = selection.getRangeAt(0);
return range;
}
function waitForPasteData(context, content) { //wait for paste data
if (context.childNodes && context.childNodes.length > 0) {
processPaste(context, content);
} else {
that = {
e: context
, s: content
};
that.callself = function () {
waitForPasteData(that.e, that.s);
}
setTimeout(that.callself, 20);
}
}
function getHTMLOfSelection() {
var range;
if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
return range.htmlText;
} else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
return div.innerHTML;
} else {
return '';
}
} else {
return '';
}
}
function processPaste(context, content) {
paste_data = context.innerHTML;
context.innerHTML = content;
var $div = $('<div></div>');
$div.html(paste_data);
$(context).append($div.text());
}
$this.on('mouseup', function () {
selected_text = getSelected(); //get current selected text
});
$this.on('paste', function (e) {
var saved_content = $(this).html(); //manipulate paste-text
if (e && e.clipboardData && e.clipboardData.getData) {
if (/text\/html/.test(e.clipboardData.types)) {
$(this).html(e.clipboardData.getData('text/html'));
} else if (/text\/plain/.test(e.clipboardData.types)) {
$(this).html(e.clipboardData.getData('text/plain'));
} else {
$(this).html('');
}
waitForPasteData($(this)[0], saved_content);
if (e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
return false;
} else {
$(this).html('');
waitForPasteData($(this)[0], saved_content);
return true;
}
});
$('[data-nitsedittag]').on('click', function (e) {
var selection = window.getSelection();
var $parent = $(selection.anchorNode.parentElement);
if ($parent.data('nitsselect') == uniquid && $parent.is(':focus')) {
var tag = $(this).data('nitsedittag');
switch (tag) {
default: document.execCommand(tag);
}
}
e.preventDefault();
});
})
};
function closep() { // Function to close the popup on close button.
$('[data-nitstextpopup]').fadeOut(400);
$('[data-nitstextbutton]').show();
}
$(function () {
var mouseX;
var mouseY;
var modal = false;
$(document).mousemove(function (f) {
mouseX = f.pageX;
mouseY = f.pageY;
});
var openPopup = function (e) { //Function to open popup
$(e).fadeIn(400);
$('[data-nitstextpopup]').fadeIn(400).css({
'top': mouseY
, 'left': mouseX
}).draggable();
$('[data-nitstextbutton]').hide();
};
var closePopup = function () { // Function to close the popup
$('[data-nitstextpopup]').fadeOut(400);
$('[data-nitstextbutton]').show();
};
$('[data-nitspagelabel]').hover(function () { // to hover only editable items
$(this).css('border', 'solid 1px #777');
}, function () {
$(this).css('border', 'none');
});
$('[data-nitspagelabel]').click(function () { //click function on editable div to get editable buttons
$(this).attr('contenteditable', 'true');
var labeltype = $('[data-nitspagelabel]').data("nitslabeltype");
if (labeltype == "text") {
if (modal == false) {
modal = true;
$('[data-nitstextbutton]').css({ //popup text editing buttons
'top': mouseY
, 'left': mouseX
}).fadeIn(400).click(function (e) {
var popupbox = $(this).attr('href');
openPopup(popupbox); // opens the editing tools popup
$('[data-nitspagelabel]').nitspopupeditor; // formatting buttons in action
});
}
}
});
$(document).click(function (e) { // clicking outside closing the popup
closePopup();
modal = false;
$('[data-nitstextbutton]').hide();
});
$('[data-nitstextpopup]').click(function (e) { // setting execption areas for closing popup
e.stopPropagation();
});
$("#btnedit").click(function (e) { // setting execption areas for closing popup
e.stopPropagation();
});
$("#editable").click(function (e) { // setting execption areas for closing popup
e.stopPropagation();
});
$(document).keyup(function (e) { // setting esc button close popup
if (e.keyCode == 27) {
closePopup();
modal = false;
$('[data-nitstextbutton]').hide();
}
});
});
有关详细信息，请查看JS小提琴：
https://jsfiddle.net/nitishkmr09/c56hzmmt/1/
暂时我只是用粗体和斜体来检查工作功能。请帮助我，因为我没有得到结果。
答案 0 :(得分：0)
我删除了if statement按钮上的$('[data-nitsedittag]')，直接称为switch statement，如下所示：
$('[data-nitsedittag]').click(function (e) {
var selection = window.getSelection();
var $parent = $(selection.anchorNode.parentElement);
var $focusedElement = $("*:focus");
var tag = $(this).data('nitsedittag');
switch (tag) {
case 'link':
var sLnk = prompt('Write the URL here', 'http:\/\/');
if (sLnk && sLnk != '' && sLnk != 'http://') {
document.execCommand('createlink', false, sLnk);
}
break;
case 'Fontname':
debugger;
if (this[this.selectedIndex].value == 'Select Font') {
break;
} else {
document.execCommand(tag, false, this[this.selectedIndex].value);
selectedIndex = 0;
}
case 'formatblock':
document.execCommand(tag, false, this[this.selectedIndex].value);
selectedIndex = 0;
case 'fontSize':
document.execCommand(tag, false, this[this.selectedIndex].value);
selectedIndex = 0;
default:
document.execCommand(tag);
}
e.preventDefault();
});