uni-app简易非markdown富文本编辑器

要实现一个简易的非Markdown富文本编辑器在uni-app中，你可以利用Vue.js的双向数据绑定和组件化特性来构建。以下是一个基础的代码示例，展示了如何实现这个功能。

首先，创建一个新的uni-app项目，然后在项目的pages目录下新建一个页面，例如editor.vue。

1. editor.vue 模板部分

<template>
  <view class="container">
    <textarea v-model="content" placeholder="请输入内容" class="textarea"></textarea>
    <view class="preview">
      <rich-text :nodes="parsedContent"></rich-text>
    </view>
  </view>
</template>

2. editor.vue 脚本部分

<script>
export default {
  data() {
    return {
      content: '', // 存储用户输入的内容
      parsedContent: [] // 存储解析后的富文本内容
    };
  },
  watch: {
    content(newVal) {
      this.parsedContent = this.parseContent(newVal);
    }
  },
  methods: {
    // 这是一个非常简单的解析函数，仅支持基础的HTML标签
    parseContent(content) {
      // 这里可以添加更复杂的解析逻辑，比如支持更多的HTML标签或样式
      // 目前仅作为示例，将换行符替换为<br/>
      return [{
        name: 'div',
        attrs: {},
        children: [
          {
            type: 'text',
            text: content.replace(/\n/g, '<br/>')
          }
        ]
      }];
    }
  }
};
</script>

3. editor.vue 样式部分

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.textarea {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
}
.preview {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
  overflow-y: auto;
}
</style>

说明

• textarea 用于用户输入内容，通过 v-model 绑定到 content。
• rich-text 组件用于显示解析后的富文本内容，nodes 属性绑定到 parsedContent。
• parseContent 方法是一个简单的解析函数，将用户输入的换行符转换为 <br/> 标签。你可以根据需要扩展这个函数以支持更多的HTML标签和样式。

这个示例展示了一个非常基础的富文本编辑器实现，你可以根据需要进一步扩展功能，比如添加样式选择、图片上传等。