0

I am working on a simple custom text editor for my cms. But I have come across a small problem.

If my text is in a text-area and then go and highlight it and click on my bold button will not work inside the text-area.

But if I do the same but out side the text-area box it works fine in the code previews below you will find the two examples..

Codepen Code Preview

Codepen Full Page Preview

Question: How could I make sure that if I highlight any code that is in the textarea and then click on a button then it will wrap it correctly.

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>

Scripts

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>';
    }   
}

0 Answers0