Add button to toolbar

[ghost]

I need to add a custom function to the toolbar, to change the text color.

Here is exactly what I want to do with the standard Trix editor https://jsfiddle.net/javan/egg7fgvv/. Here's a snippet of that code:

Trix.config.textAttributes.red = { 
    style: { color: "red" },
  parser: function(element) {
    return element.style.color === "red"
  },
  inheritable: true
 }

I'm trying to achieve the same thing but with VueTrix rather than Trix and I'm stuck, I just can't see how to get it to work. Does anyone have any ideas?

Thanks for your help :)

[avioli]

I thought the config will do it, but apparently it doesn't work.

You can add trix to your package.json and then simply import it:

<template>
  <div id="app">
    <vue-trix ref="trixRef" v-model="text" @trix-initialize="trixInit" />
  </div>
</template>

<script>
import VueTrix from "vue-trix";
import Trix from "trix";

Trix.config.textAttributes.red = {
  style: { color: "red" },
  parser(element) {
    return element.style.color === "red";
  },
  inheritable: true,
};

export default {
  name: "App",
  components: {
    VueTrix,
  },
  data() {
    return {
      text: 'Hello <span style="color: red">red</span>',
    };
  },
  methods: {
    trixInit() {
      const buttonHTML =
        '<button type="button" class="trix-button" data-trix-attribute="red" tabindex="-1">RED</button>';
      this.$el
        .querySelector(".trix-button-group--text-tools")
        .insertAdjacentHTML("beforeend", buttonHTML);
    },
  },
};
</script>

<style>
#app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

Codesandbox: https://codesandbox.io/s/immutable-cookies-dljk0?file=/src/App.vue

NOTE: if you have hot-reload - make sure you close the tab and re-open is since, trix registers itself as a custom element, and importing it in your code again will try to re-register it.

[jringeisen]

@avioli this doesn't seem to work for me. I get the following error:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "trix-toolbar" has already been used with this registry

I exited out of hot-reload like your note states and recompiled and I'm still getting this error. Not sure how to get around it.

[jringeisen]

@avioli nevermind, I was able to get it to work. I had to delete the node modules, reinstall, and recompile then it worked for me.