WYSIWYG q-editor lazy rules

[Gorgc]

How can i make :rules for q-editor to validate that it cannot be empty?

[suleiman_as]

@gorgc I don’t think it has rules like text inputs, but you can always validate the value yourself.

[Lurrik]

Hi @Gorgc,

It’s not beauty, but that’s works :

TEMPLATE

<div>
           <i
            aria-hidden="true"
            v-show="showWarning"
           role="presentation"
           class="absolute-top-right q-pt-xs q-pr-sm material-icons q-icon notranslate text-negative"
          style="font-size: 25px"
           >error</i>

           <q-editor
            v-model="message"
            :style="styleWYSIWYG"
            @blur="checkMessage"
            :toolbar="[
             // Your config
            ]"
            :fonts="{
             // Your config
            }"
          />
 </div>

SCRIPT

export default {
  name: "",
  data() {
    return {
      message : "",
      styleWYSIWYG:  "border: 1px solid;border-color: #D1CDC8;border-radius:5px;",
      styleWarningWYSIWYG: "border: 2px solid;border-color: #C10015;border-radius:5px;",
      styleBasicWYSIWYG: "border: 1px solid;border-color: #D1CDC8;border-radius:5px;",
      showWarning: false,
    };
  },
methods: {
    checkMessage() {
      if (this.message == "") {
        this.styleWYSIWYG = this.styleWarningWYSIWYG;
        this.showWarning = true;
      } else {
        this.styleWYSIWYG = this.styleBasicWYSIWYG;
        this.showWarning = false;
      }
    },
 }
}

[Gorgc]

Wah thanks guys