Question

我正在为我的cms开发一个简单的自定义文本编辑器。但我遇到了一个小问题。

如果我的文字位于文字区域然后突然显示并点击我的粗体按钮将无法在文字区域内显示。

但是，如果我做同样但在文本区域框外面它在下面的代码预览中工作正常，你会发现两个例子..

问题：我如何确保如果我突出显示textarea中的任何代码，然后单击按钮，那么它将包装它正确。

HTML

<div class="container">

<hr/>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<button type="button" id="bold" onclick="bold()" data-toggle="tooltip" data-placement="top" title="Bold">B</button>
<button type="button" id="italic" onclick="italic()" data-toggle="tooltip" data-placement="top" title="Italic"><i>I</i></button>
<button type="button" id="code" onclick="code()" data-toggle="tooltip" data-placement="top" title="Code">{}</button>    
</div>
</div>

<hr/>

<p>Testing Not Inside Textarea</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<hr/>

<p>Testing Inside Textarea</p>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<textarea class="form-control" cols="15" rows="15"></textarea>
</div>
</div>

</div>

脚本

function bold() {

    var text, sel, range;

    if (window.getSelection) {

        text = window.getSelection().toString();
        sel = window.getSelection();

        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(range.createContextualFragment('<b>'+text+'</b>'));
        }

    } else if (document.selection && document.selection.createRange) {

        text = document.selection.createRange().text;
        range = document.selection.createRange();
        range.innerHTML = '<b>'+text+'</b>';
    }   
}

function italic() {

    var text, sel, range;

    if (window.getSelection) {

        text = window.getSelection().toString();
        sel = window.getSelection();

        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(range.createContextualFragment('<i>'+text+'</i>'));
        }

    } else if (document.selection && document.selection.createRange) {

        text = document.selection.createRange().text;
        range = document.selection.createRange();
        range.innerHTML = '<i>'+text+'</i>';
    }   
} 

function code() {

    var text, sel, range;

    if (window.getSelection) {

        text = window.getSelection().toString();
        sel = window.getSelection();

        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(range.createContextualFragment('<pre>'+text+'</pre>'));
        }

    } else if (document.selection && document.selection.createRange) {

        text = document.selection.createRange().text;
        range = document.selection.createRange();
        range.innerHTML = '<pre>'+text+'</pre>';
    }   
}

按钮突出显示在textarea内部不起作用

0 个答案: