How can I select only 1 word with formatBlock

Question

When I select a word in my application and want to give it a span, the whole sentence is included. Does anyone know how I can solve this?

I think it's up to formatBlock but I have no idea what I can use as a replacement for formatBlock.

<button id="span" type="button" class="btn btn-outline-secondary"><b>T</b></button>

<div contenteditable="true" id="textarea" name="answers" class="form-control">{!! old('answers',$task->description) !!}</div>

<textarea name="answers" id="answerstextarea" style="display:none"></textarea>





 $('#span').on('click', function () {
            document.execCommand('formatBlock', false, '<blockquote>');

            let bq = $('#textarea').find('blockquote').first().text();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-Token': parent.$('meta[name="csrf-token"]').attr('content')
                }
            });
            $.post('{{route('translate')}}', {'totranslate' : bq}, function (data) {
                $('#translate .modal-body').html(data);
                $('#translate').modal('show');

                $('#textarea blockquote').replaceWith('<span class="translated" data-vocabid="">' + bq + '</span>');
                let text = $('#textarea').html();

                $('#textarea-show').html(text);
                $('textarea#answers2textarea').html(text);

            });

        });

score 1 · Accepted Answer · answered Oct 16 '18 at 11:28

As the name applies the formatBlock command will format a line/block, it would not be applicable to selected words

The following post includes a function to do the formatting if you can not use formatBlock

Make selected text bold/unbold

here is a list of commands you can use with execCommand maybe you can do the formatting using some other command.

https://www.w3schools.com/jsref/met_document_execcommand.asp

How can I select only 1 word with formatBlock

1 Answers1