nicEdit - Bootstrap 弹出窗口上的 HTML 编辑答案

【问题标题】：nicEdit - HTML editing on a Bootstrap popupnicEdit - Bootstrap 弹出窗口上的 HTML 编辑
【发布时间】：2014-01-03 11:37:31
【问题描述】：

我在 Bootstrap 弹出窗口中打开 nicEdit 实例时遇到问题。

我可以很好地编辑我的文本，唯一不能正常工作的是编辑 HTML 弹出窗口。 HTML 在 textarea 上显示良好，但我无法单击或编辑它。该弹出窗口上的其他按钮（关闭和提交）工作正常，所以唯一的问题是文本区域。

我尝试为 textarea 设置更高的 z-index，但这没有帮助。

有人遇到过这个问题吗？

编辑：对不起，这是小提琴http://jsfiddle.net/MXkY3/1/

HTML 按钮不可见，因为不包含图像文件，但它是唯一可用的按钮。

我正在正常初始化编辑器：

$(document).ready(function () {
    new nicEditor({
        buttonList: ['xhtml']
    }).panelInstance('new_page_content18');
});

并且弹出窗口的 CSS 是 Bootstrap 标准。但是可以看到 HTML 点击后生成的弹窗是不可编辑的。

EDIT2：问题不在于显示 HTML 弹出窗口，问题在于在该弹出窗口的文本区域内编辑 HTML。我什至无法选择文本。

【问题讨论】：

将您的代码放入jsfiddle.net 并发送回来，我们可以提供帮助。如果提问者没有提供有用的输入，Mods 将删除您的问题！
检查textarea 是否未被禁用。并通过 Inspect Element 检查错误。
我在 JQuery UI 对话框中遇到了同样的问题
知道这是一个非常古老的问题，但您找到解决方法了吗？
@Woody 抱歉耽搁了，但不，从未找到解决方案。最终在模式之外使用这个文本区域。

标签： javascript html css twitter-bootstrap wysiwyg

【解决方案1】：

您必须在模式中创建一个新事件并验证 html NicEdit。

//...
$('.div-element-modal').on('hide.bs.modal', function (e) {
	validarNicEditorEnModalOff();
});
$('.div-element-modal').on('shown.bs.modal', function (e) {
	validarNicEditorEnModal();
});
$('.div-element-modal').modal('show');

//...
function validarNicEditorEnModalOff() {
	$(".nicEdit-selectControl").each(function() {
		$(this).unbind("click");
	});
	$(".nicEdit-selectTxt").each(function() {
		$(this).unbind("click");
	});
	$(".nicEdit-pane").each(function() {
		$(this).parent().css("position", "absolute");
	});
}
function validarNicEditorEnModal() {
	$(".nicEdit-selectControl").each(function() {
		$(this).unbind("click");
	});
	$(".nicEdit-selectTxt").each(function() {
		$(this).unbind("click");
	});
	$(".nicEdit-selectControl").each(function() {
		$(this).click(function() {
			 setTimeout(function() {
				 $(".nicEdit-pane").parent().css("position", "fixed");
			 }, 200);
			 return true;
		});
	});
	$(".nicEdit-selectTxt").each(function() {
		$(this).click(function() {
			 setTimeout(function() {
				 $(".nicEdit-pane").parent().css("position", "fixed");
			 }, 200);
			 return true;
		});
	});
}

问候

【讨论】：