基于Vue和Element-UI框架的在线编辑器 vue-el-editor

vue-el-editor

在这里插入图片描述

Project setup

npm install vue-el-editor

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>

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页