How can I get the Trix editor so I can insert text?

[tkoop]

According to https://github.com/basecamp/trix#readme I can do something like this:

// Insert “Hello” at the beginning of the document
element.editor.setSelectedRange([0, 0])
element.editor.insertString("Hello")

How can I do that with this Vue component?

[hanhdt]

@tkoop You may try to use $refs to reference Trix in the Vue component.

[tkoop]

@tkoop You may try to use $refs to reference Trix in the Vue component.

I've tried this, but it's not working for me.

https://codesandbox.io/s/romantic-wildflower-dv5x0?fontsize=14&hidenavigation=1&theme=dark

When I click the "Insert" button, it should insert text into the editor, but it doesn't. Look in App.vue lines 25 and 26.

[Znarkus]

Change your insertText function to

    insertText: function () {
      console.log("Button clicked");
      this.$refs.editor.$refs.trix.editor.setSelectedRange([0, 0]);
      this.$refs.editor.$refs.trix.editor.insertString("Hello");
    },

You need to access the trix editor inside the component. this.$refs.editor in your example is only the VueTrix instance.

[Arns]

@Znarkus, this seems to work for inserting at a given position, but I cannot select a range of text: setSelectedRange([0,3]). It simply puts the cursor in the first position before all of the text no matter which arguments I provide to setSelectedRange. I cannot figure out how to make it work...