Question

我试图在文本编辑器中添加非常具体的功能。我的用户不需要任何实际的文本格式或样式，但通过将HTML元素放入文本编辑器，可以大大改善界面。

我开始在我的表单中使用jQuery Text Editor在textarea的顶部。我从标题中删除了所有格式化按钮，因此它基本上只是一个呈现html的textarea。我的用户将像文本编辑器一样键入或粘贴多行文本。对我来说棘手的部分来自于将HTML插入到textarea中。我在页面的其他地方有事件，当点击时，尝试在jqte textarea中的当前光标位置添加一个按钮。

我找到了jQuery snippet来帮助我找到插入位置。将插入位置拉出div可让我将第一个按钮插入正确的位置。为了维护我的按钮元素，我必须提取文本字段的html（），但我不知道如何在html中获取我的角色的位置，仅在文本中。我怎样才能实现这个功能？

我创建了一个jsFiddle来展示我正在做的事情。添加第一个按钮工作正常，但是一旦我添加第二个按钮，从文本字段的文本中抓取html的子字符串会使整个事情崩溃。

感谢任何帮助，谢谢！

我没有意识到你可以在没有代码的情况下链接到jsFiddle，所以这里是我的HTML，CSS和JS：

HTML

<div class='buttons'>
    <button>Item A</button>
    <button>Item B</button>
</div>
<textarea id='text'></textarea>

<div class='btn-group hidden cloneable'>
    <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>
        <span class='name'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' role='menu'>
        <li><a href='#'>Function 1</a></li>
        <li class='divider'></li>
        <li><a href='#'>Function 2</a></li>
    </ul>
</div>

CSS

.jqte_editor{
    height: 300px;
}

JS

$('#text').jqte({
    b: false,
    center: false,
    color: false,
    fsize: false,
    format: false,
    i: false,
    link: false,
    left: false,
    ol: false,
    remove: false,
    right: false,
    rule: false,
    source: false,
    sub: false,
    strike: false,
    sup: false,
    u: false,
    ul: false,
    unlink: false,
    indent: false,
    outdent: false
});

var $jqte = $('div.jqte_editor');

$('.buttons').on('click', 'button', function(e){
    e.preventDefault();
    insertHtmlAtCaret($(this).text());
});

function insertHtmlAtCaret(text){
    var position = getCaretCharacterOffsetWithin($jqte.get(0));
    var front = $jqte.html().substring(0, position);
    var back = $jqte.html().substring(position, $jqte.text().length); 

    var $group = $('div.cloneable').clone();
    $group.find('span.name').text(text);
    $group.removeClass('hidden cloneable');
    $jqte.html(front).append($group).append(back);
}

function getCaretCharacterOffsetWithin(element){
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        var range = win.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

Answer 1

花了一点时间，但发现了一个JS示例，其中包含足以让我获得我正在寻找的功能。没有Ranges的先验知识，这似乎是解决方案的主要部分：

function insertButtonAtCaret(name) {
    var node = document.createElement('div');
    node.innerHTML = $('div.cloneable').html();

    $(node).addClass('btn-group');
    $(node).find('span.name').text(name);

    var selection = document.getSelection();
    selection.getRangeAt(0).insertNode(node);
    selection.removeAllRanges();
}

整个解决方案仍然存在一些小问题（按钮名称位于文本区域并且可以更改），但这对我来说绝对足够了。

将文本/ HTML插入WYSIWYG编辑器

1 个答案: