TextEditor

This component allows you to create a text editor component.

Example

TextEditor

export default {
  name: "App",
  data() {
    return {
      form: {
        servicesDefinition: {
          type: TextEditor,
          default: "",
          "field-wrapper": { class: "is-12" },
          "field-input": {
            label: "label",
            placeholder: this.$t("placeholder", {
              key: this.$t("text").toLowerCase(),
            }),
            plainText: true,
            countWords: true,
          },
          events: {
            input: (v) => {},
          },
        },
      },
    };
  },
};

Props

NameDescriptionTypeRequiredDefault
valueIs some String containin HTML content or plain Text (plainText prop)falsenull
plainTextOn true value prop will return an object like: { html: *, plainText: '...' }Booleanfalsefalse
themeShould by one of the default themes of Quill {snow, bubble, core }Stringfalse"snow"
allowCodeBlocks-Booleanfalsefalse
allowTextDirection-Booleanfalsefalse
allowMediaAllows media like image and video links and linksBooleanfalsefalse
allowColorsAllows colors for text and text backgroundBooleanfalsefalse
validationMode-Stringfalse"aggressive"
horizontal-Booleanfalsetrue
labelInside-Booleanfalsefalse
labelOnBorder-Booleanfalsefalse
hideValidation-Booleanfalsefalse
isRequired-Booleanfalsetrue
icon-Stringfalse""
clearIconSize-Stringfalse"mdi-24px"
clearIconCustomClass-Stringfalse""
showClearIcon-Booleanfalsetrue
countWords-Booleanfalsetrue
localeLocale string {en, es ...} for display language on componentStringfalse"en"

Events

Event NameDescriptionParameters
input--
blur--
focus--
ready--