vue 文本编辑器

<template>
  <div>
    <textarea v-model="editorContent" @input="updateEditor"></textarea>
    <div v-html="formattedContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorContent: ''
    };
  },
  computed: {
    formattedContent() {
      // 简单的格式化逻辑，例如将换行符转换为<br>
      return this.editorContent.replace(/\n/g, '<br>');
    }
  },
  methods: {
    updateEditor(event) {
      // 当文本框内容更新时触发
      console.log('Editor content updated:', event.target.value);
    }
  }
};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 200px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 <textarea> 元素来作为文本编辑器。
   • 使用 v-model 指令将 textarea 的值绑定到组件的 data 中的 editorContent 属性。
   • 使用 @input 事件监听器来监听用户输入，并调用 updateEditor 方法。
   • 使用一个 <div> 来显示格式化后的内容，使用 v-html 指令来插入 HTML 内容。

2. 脚本部分 (<script>):

   • 定义了 data 函数，返回一个对象，其中包含 editorContent 属性，用于存储文本编辑器的内容。
   • 使用 computed 计算属性 formattedContent 来格式化文本内容。这里简单地将换行符 \n 替换为 HTML 的 <br> 标签。
   • 定义了 methods 对象中的 updateEditor 方法，当用户在 textarea 中输入内容时会触发此方法，并打印出当前的编辑器内容。

3. 样式部分 (<style scoped>):

   • 给 textarea 设置了宽度和高度，使其占据整个父容器的宽度并具有固定的高度。