vue-el-editor

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

How to use

import VueElEditor from 'vue-el-editor/src/components/editor.vue'

Demo

<template>
  <div id="app">
    <el-form
      ref="createForm"
      :model="createForm"
      :rules="createRules"
      label-position="left"
      :inline="true"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item :label="`Editor Label`" prop="templateContent">
            <editor
              v-model="createForm.templateContent"
              class="form-wd"
              :init-content="initContent"
              :config="config"
              size="medium"
            ></editor>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div>
      <el-button type="primary" @click="saveHandler">Save</el-button>
    </div>
  </div>
</template>

<script>
import editor from 'vue-el-editor/src/components/editor.vue';

export default {
  name: "App",
  components: {
    editor
  },
  data() {
    return {
      createForm: {},
      createRules: {
        templateContent:{
          required:true,
          trigger:['change','blur']
        }
      },
      initContent: "",
      config: {
        width: 850, // px
        height: 400, // px
        contentReadOnly: false,
        isShowToolBar: true,
        disabled: false,
        buttonsOption: [
          {
            componentName: "BtnServTpl",
            isShow: true
          }
        ]
      }
    };
  },
  methods: {
    saveHandler() {
      if (this.$refs.createForm) {
        this.$refs.createForm.validate();
      }
    }
  }
};
</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>