<!--
 * @Date: 2024-07-12 13:20:15
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-08-01 11:51:07
 * @FilePath: /data-table/src/views/test.vue
 * @Description: 文件描述
-->
<template>
  <div class="tinymce-box">
    <TEditor ref="refEdit" ></TEditor>
    <div @click="getValue">获取内容</div>
    <div @click="setValue">设置内容</div>
  </div>
</template>

<script setup>
  import TEditor from "@/components/TEditor/index.vue";

  const refEdit = ref(null);

  // refEdit.value.handleGetContent()
  const getValue = () => {
    console.warn(refEdit.value.handleGetContent());
  }

  const setValue = () => {
    refEdit.value.handleSetContent(table)
  }

  const table = `
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>34</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>广州</td>
      </tr>
    </tbody>
  </table>
  `
</script>

<style>
.tinymce-box {
  width: 100%;
}
</style>