<template>
  <div class="components-container">
    <div class="editor-container">
      <lu-markdown
        ref="markdownEditor"
        v-model="content1"
        height="300px"
      ></lu-markdown>
    </div>

    <lu-button
      style="margin-top:80px;"
      type="primary"
      icon="el-icon-document"
      @click="getHtml"
    >
      Get HTML
    </lu-button>
    <div v-html="html" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content1: "",
      html: "",
      languageTypeList: {
        en: "en_US",
        zh: "zh_CN",
        es: "es_ES"
      }
    };
  },
  methods: {
    getHtml() {
      this.html = this.$refs.markdownEditor.getHtml();
    }
  }
};
</script>

<style scoped>
.editor-container {
  margin-bottom: 30px;
}
.tag-title {
  margin-bottom: 5px;
}
</style>
