1

I wanted to add font style here like there is an option if you want the font to be arial,san-serif etc... But now the font and font sizes not display in vue2-editor. Can anyone help me?

You can access the code here :

https://codesandbox.io/s/liz23?file=/src/App.vue:0-553

this is the code:

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
    <div v-html="content"></div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      content: "<p>Some initial content</p>"
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>
TechDev
  • 415
  • 5
  • 18
  • My assumption here is that you want to set this font and color throughout the app? Why not just use html *{ } in your index.vue file? – Jamie Jul 15 '21 at 13:28
  • 1
    @Jamie CSS isn't ideal, if OP for example wants to persist the style directly in the richtext itself. – Terry Jul 15 '21 at 13:33
  • @Terry my mistake I misread where they wanted their styles. – Jamie Jul 15 '21 at 13:37

1 Answers1

2

My answer is based of the excellent answers over at How to add font types on Quill js with toolbar options?. The only thing that I need to change is to use const fonts = Quill.import('formats/font');. vue2-editor exports the Quill object, so you can simply import it as such:

import { VueEditor, Quill } from "vue2-editor";

Then, it is mostly copy-and-pasting the solution in this posted answer. The vue2-editor unfortunately does not expose the default toolbar settings, so you will need to copy it verbatim from the source code and then add your font dropdown manually:

customToolbar: [
    // Copied from source
    // https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js
    [{ header: [false, 1, 2, 3, 4, 5, 6] }],
    ["bold", "italic", "underline", "strike"], // toggled buttons
    [
      { align: "" },
      { align: "center" },
      { align: "right" },
      { align: "justify" }
    ],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ color: [] }, { background: [] }],
    ["link", "image", "video"],
    ["clean"],

    // This is what I have added
    [{ 'font': fonts.whitelist }],
]

See proof-of-concept here: https://codesandbox.io/s/vue2-editor-demo-forked-35wo1?file=/src/App.vue

Terry
  • 63,248
  • 15
  • 96
  • 118