I recently started learning Vue and am trying to implement a text editor. It is necessary that at the same time the active class is removed when the button is double-clicked and that when this button is pressed, the active class is not removed from the elevated one, so that you can see which editors are currently active on the text function + to all this, in addition to changing the style of the button itself, you need to change v-icon color on click
<script lang="js">
import Vue from 'vue'
export default Vue.extend({
methods: {
formatDoc(cmd, value = null) {
if (value) {
document.execCommand(cmd, false, value);
} else {
document.execCommand(cmd);
}
})
</script>
<template>
<div class="container" id="app">
<div class="toolbar">
<div class="btn-toolbar">
<div class="text-style">
<button type="button" @click="formatDoc('bold')">
<v-icon>mdi-format-bold</v-icon>
</button>
<button type="button" @click="formatDoc('underline')">
<v-icon>mdi-format-underline</v-icon>
</button>
<button type="button" @click="formatDoc('italic')">
<v-icon>mdi-format-italic</v-icon>
</button>
</div>
<div class="text-align"></div>
<button type="button" @click="formatDoc('justifyLeft')">
<v-icon>mdi-format-align-left</v-icon>
</button>
<button type="button" @click="formatDoc('justifyCenter')">
<v-icon>mdi-format-align-center</v-icon>
</button>
<button type="button" @click="formatDoc('justifyRight')">
<v-icon>mdi-format-align-right</v-icon>
</button>
</div>
<div class="text_list">
<button type="button" @click="formatDoc('insertOrderedList')>
<v-icon>mdi-format-list-numbered</v-icon>
</button>
<button type="button" @click="formatDoc('insertUnorderedList')
<v-icon>mdi-format-list-bulleted</v-icon>
</button>
</div>
</div>
</div>
</div>
</template>
I will be grateful for any help!
I can't comment on your post to ask for clarification. So I will assume you are for now only asking about changing the class of a button based on the state of that button (for example clicked once, or clicked again).
If that is your question, then you would have the class of that button bound to a computed property. For example:
<button type="button" @click="formatDoc('bold')" :class="boldisClicked">
<v-icon>mdi-format-bold</v-icon>
</button>
Then in your computed section:
methods: {
formatDoc(..) {
....
.... // your regular code
this.boldButtonState = 'clicked'
}
},
computed: {
boldisClicked() {
return boldButtonState == 'clicked'
}
}
And so on ...
With that said, instead of reinventing the wheel. There are actual text editor libraries you can use. See here
Finally, I would suggest you focus on your app logic and leave the cosmetic (CSS and such) functionality to a framework like Vuetify.