uni-app 实现写文章或写新闻的页面

在uni-app中实现一个写文章或写新闻的页面，可以利用其丰富的组件和Vue.js的框架特性。以下是一个基本的代码示例，展示了如何创建一个简单的文章编辑页面。这个页面包括标题、内容编辑区以及提交按钮。

首先，确保你已经安装了uni-app开发环境，并创建了一个新的项目。

1. 页面结构 (pages/editArticle/editArticle.vue)

<template>
  <view class="container">
    <view class="title-input">
      <input v-model="article.title" placeholder="请输入文章标题" />
    </view>
    <view class="content-editor">
      <rich-text :nodes="article.content" />
      <editor
        v-model="article.contentHtml"
        @input="handleInput"
        :placeholder="placeholder"
      />
    </view>
    <button @click="submitArticle">提交文章</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      article: {
        title: '',
        contentHtml: '<p></p>' // 初始化为空段落，避免编辑器初始化异常
      },
      placeholder: '在这里输入文章内容...'
    };
  },
  methods: {
    handleInput(e) {
      // 这里可以处理编辑器输入事件，如果需要的话
      this.article.content = e.detail.html; // 同步原始内容，便于后续处理
    },
    submitArticle() {
      // 提交文章逻辑，例如发送到服务器
      console.log('Submitting article:', this.article);
      // 示例：发送POST请求到服务器
      // uni.request({
      //   url: 'https://example.com/api/articles',
      //   method: 'POST',
      //   data: {
      //     title: this.article.title,
      //     content: this.article.content
      //   },
      //   success: (res) => {
      //     console.log('Article submitted successfully:', res.data);
      //   }
      // });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.title-input input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.content-editor {
  margin-bottom: 20px;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
}
</style>

说明

• <input>：用于输入文章标题。
• <rich-text>：用于显示富文本内容（预览）。
• <editor>：uni-app提供的富文本编辑器组件，用于输入文章内容。注意，<editor>组件在真机上表现更佳，且部分功能（如图片上传）可能需要额外配置。
• handleInput 方法：处理编辑器内容变化，同步原始HTML内容。
• submitArticle 方法：示例提交逻辑，实际应用中应替换为具体的API调用。

这个示例提供了一个基本的文章编辑页面框架，你可以根据实际需求进一步扩展功能，如添加图片上传、实时保存草稿等。