Trumbowyg: Insert at caret

[MACscr]

Informations

Chrome 60.x
OSX Sierra
1080p

How to reproduce the bug?

I am trying to figure out a way to interact with the editor externally and be able to insert values at the current position of the cursor. There is a jquery plugin called insertatcaret, but it works with textareas and not with the editor, so cant use that.

This is what I currently have: https://jsfiddle.net/vj90s9fb/106/ (I removed that plugin since it wasnt relevant).

There must be an internal function of Trumbowyg that I could use. Thanks so much for your time!

[Alex-D]

I did not understand your need. Why did you not create a Trumbowyg plugin for that?

[MACscr]

Because it's not going to be integrated into the toolbar itself and I want more flexibility on its layout, etc. I only provided a basic example in the fiddle.

• Mark

On Sep 21, 2017, at 7:39 PM, Alexandre Demode [e-mail] wrote:

I did not understand your need. Why did you not create a Trumbowyg plugin for that?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[patrickRocketVisor]

@MACscr
I believe what you're looking for is the execCmd function within Trumbowyg.

Heres an example of how to use the insertText command to insert text at the current cursor location.

$('#my-editor').trumbowyg('execCmd', {
    cmd: 'insertText',
    param: 'TextToInsert',
    forceCss: false,
});

The param argument should contain the text you wish to add.

In the future, you should know that you can use any Commands from the official documentation for Document.execCommand() found here.

[chinleung]

@patrickRocketVisor

The problem with execCmd is that it does not insert at the current cursor location if you trigger it on click.

In my scenario, I have tried to execute it via the Google Console, and it works properly. However, if I trigger the execCmd on a click event of a button, it no longer works.

For example, if I have the following button:

<span id="button" class="button" data-text="Hello World">Click</span>

Then I bind the event with JavaScript:

const btn = document.getElementById('button');
btn.addEventListener('click', function(event){
    $('#my-editor').trumbowyg('execCmd', {
        cmd: 'insertText',
        param: event.target.getAttribute('data-text'),
        forceCss: false
    });
});

Now when I click on my button... no matter where the caret position was previously, it will append the text at the beginning of the editor.

[Alex-D]

Yep, because when you click on the button you blur the content editable and you lost your selection.

So, you need to use 'saveRange' and 'restoreRange' APIs before use the 'execCmd' one.

[chinleung]

I'm leaving this here for those who are having the same issue as me.

const btn = document.getElementById('button');
btn.addEventListener('click', function(event){

    // Restore the previous position
    $('#my-editor').trumbowyg('restoreRange');

    // Insert text at the current position
    $('#my-editor').trumbowyg('execCmd', {
        cmd: 'insertText',
        param: event.target.getAttribute('data-text'),
        forceCss: false
    });
});