相关疑难解决方法(0)

我有一个jQuery对话框,用于在contentEditable span中创建链接.问题是单击按钮打开对话框会导致选择丢失,对话框内的文本输入也会导致选择丢失.

我可以用-moz-user-select:none修复按钮; 但是-webkit-user-select:none在Chrome中不起作用.

我可以通过将输入包装在iframe中来修复输入,但是这很麻烦并且点击任何其他地方也会杀死选择,例如,拖动对话框.

我已经看到了如何在打开jQuery对话框时保留文本选择的解决方案,但这在许多浏览器中不适用于一个可信的元素,只有真正的输入.

我的问题有一个很好的解决方案吗？

我使用Spectrum作为颜色选择器的jquery插件,以便在contenteditable div中使用它.在chrome和firefox中它的工作完美.但是在Internet Explorer中它只是显示调色板,但是当我选择时什么也没有改变.

但是,如果我execCommand以这种方式直接执行它正在工作:

$('#btn-color_font').click(function() {
    document.execCommand('foreColor', false, "#ff0000");
});

我究竟做错了什么？请帮我在IE中如何使用它.谢谢.

的jsfiddle

片段html:

<li class="main-btn">
    <a href="#" id="btn-color_font" class="wysiwyg-color-spectrum-cF">cF</a>
</li>
<li class="main-btn" >
    <a href="#" id="btn-color_background" class="wysiwyg-color-spectrum-bF">cB</a>
</li>

片段js:

$(".wysiwyg-color-spectrum-cF").spectrum({
    showPaletteOnly: true,
    togglePaletteOnly: true,
    togglePaletteMoreText: 'more',
    togglePaletteLessText: 'less',
    color: 'blanchedalmond',
    change: function (color) {
        document.execCommand('foreColor', false, color.toHexString());
    },
    hideAfterPaletteSelect: true,
    palette: [
        ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
        ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
        ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"], …

我发现这篇文章显示了如何从一个可信的div中保存和恢复所选文本的2个功能.我有下面的div设置为contenteditable和另一个帖子的2功能.如何使用这些功能来保存和恢复所选文本.

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>

<script>
function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
</script>