How do I change the text font and background color with the editor toolbar?

[jh12c]

hello.

I want to change the text font and text background color with the editor toolbar. I could change the text color using the Color Syntax Plugin. Is there a way to change the text font and background color as well?

I am using @toast-ui/vue-editor . I would appreciate it if you could give me a guide on how to change the text font and background color.

[suhail-chouhan]

@jh12c I've done it by downloading the 64bit image and through photoshop I replace the color according to my theme

and then I import the new png image in my project and just update the CSS. find scss below

.toastui-editor-defaultUI-toolbar { .toastui-editor-toolbar-group { .toastui-editor-toolbar-icons { background: url('~/assets/images/editorIcons.png') no-repeat; background-size: 466px 146px; background-position-y: 3px !important; &:not(:disabled).active { background-position-y: -23px !important; } &.heading { background-position-x: 3px !important; } &.bold { background-position-x: -23px !important; } &.italic { background-position-x: -49px !important; } &.strike { background-position-x: -75px !important; } &.hrline { background-position-x: -101px !important; } &.quote { background-position-x: -127px !important; } &.quote { background-position-x: -127px !important; } &.bullet-list { background-position-x: -153px !important; } &.ordered-list { background-position-x: -179px !important; } &.task-list { background-position-x: -203px !important; } &.table { background-position-x: -283px !important; } &.image { background-position-x: -309px !important; } &.link { background-position-x: -334px !important; } &.code { background-position-x: -361px !important; } &.codeblock { background-position-x: -388px !important; } &.more { background-position-x: -412px !important; } } } } here you go:

I know it's alot of work by I've come up with this solution only. Hope It resolve your problem.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!

[Marim99]

you need to change the style after the editor initialzed this is my soluation to change the style of the editor 1- create a method to change the style 2- call the method in @load

setEditorStyle() {
  if (this.$refs.toastUiEditor) {
    const container = this.$refs.toastUiEditor.$el
    const toolbar = container.querySelector(
      '.toastui-editor-defaultUI-toolbar'
    )
    const toolbarIcons = container.querySelector(
      '.toastui-editor-defaultUI-toolbar button'
    )
    const toastContents = container.querySelector(
      '.toastui-editor .toastui-editor-contents'
    )
    if (toolbar) {
      toolbar.style.backgroundColor = '#fff'
      toolbarIcons.style.border = 'none'
      toastContents.style.zIndex = '1'
    }
  }

and the templet should be like this
`
      <editor
        ref="toastUiEditor"
        :options="textEditorOptions"
        initial-edit-type="wysiwyg"
        @caretChange="setEditorStyle"
        @load="setEditorStyle"
      />

`