corrosion-TALL/src/pages/rich-text/rich-text.vue

<template>
  <view class="p-2">
    <!-- <view v-if="!plugins">加载中...</view>
    <template v-else>-->
    <view class="my-3" id="container"></view>
    <!-- </template> -->
  </view>
</template>

<script>
export default {
  data() {
    return { plugins: null };
  },

  mounted() {
    // window.openModal = function () {
    //   const modal = document.getElementById('modal');
    //   modal.style.display = 'block';
    //   alert('modal显示了');
    // };
    this.getData();
  },

  methods: {
    async getData() {
      try {
        const data = await this.$u.get('/tasks');
        console.log(data);
        this.plugins = [...data.plugins] || null;
        this.renderDOM(this.plugins); // 渲染DOM
      } catch (error) {
        console.log('🚀 ~ file: rich-text.vue ~ line 33 ~ getData ~ error', error);
        this.plugins = null;
      }
    },

    /**
     * 渲染DOM
     * @param {Array | null} plugins 拿到的内置插件数据
     *
     * FIXME: 只处理了1个script标签的情况
     * FIXME: 插件命名空间 作用域未处理
     * FIXME: 插件关闭退出时, 应该移除相关的script代码
     */
    renderDOM(plugins) {
      if (!plugins || !plugins.length) return;
      const element = document.getElementById('container');
      // eslint-disable-next-line no-useless-escape
      const reg = /<script\b[^>]*>([\s\S]*)<\/script>/gim;
      let str = element.innerHTML;
      for (let item of plugins) {
        // console.log(reg.test(item), item.match(reg), RegExp.$1);
        if (reg.test(item)) {
          // code snippets 包含 script
          const scriptElement = document.createElement('script');
          const text = RegExp.$1;
          try {
            scriptElement.appendChild(document.createTextNode(text));
          } catch (error) {
            scriptElement.text = text;
          }
          document.body.appendChild(scriptElement); // 动态创建并添加了script内容
          str += item.replace(reg, ''); // 把script标签的内容去掉
        } else {
          str += `<div>${item}</div>`;
        }
      }
      element.innerHTML = str;
    },
  },
};
</script>