uni-app 富文本编辑器需求 简书样式

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app 富文本编辑器需求 简书样式

Harmonyos Next教程
4 回复

我们开发过类似于秀米的编辑器，可以跟我聊聊需求，不过这玩意价格不低了，联系微信：zhimitec 专业的uniapp插件/项目外包团队为您服务， 可签订合同、提供发票，售后无忧


预算20 不能再多

回复 3***@qq.com: 哈哈哈哈 20对不起咱办公室空调的辛苦制热

针对您提出的uni-app中实现类似简书风格的富文本编辑器需求，以下是一个基于uni-app和富文本编辑器（如rich-text组件和u-editor插件）的示例代码。这里我们主要关注实现基本的富文本编辑和展示功能，并尽量模拟简书的样式。

1. 安装u-editor插件

首先，确保您的uni-app项目中已经安装了u-editor插件。如果未安装，可以通过以下命令安装（假设您使用的是HBuilderX）：

npm install @dcloudio/uni-ui

然后在pages.json中引入u-editor组件。

2. 编辑器页面代码

<template>
  <view class="container">
    <u-editor
      ref="editor"
      v-model="content"
      :placeholder="'开始写作...'"
      :menus="[
        'bold', 'italic', 'underline', 'strike', 'header', 'quote',
        'alignleft', 'aligncenter', 'alignright', 'link', 'image'
      ]"
      @ready="onEditorReady"
    />
    <view class="preview">
      <rich-text :nodes="content"></rich-text>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const content = ref('');

    const onEditorReady = () => {
      console.log('编辑器已就绪');
    };

    return {
      content,
      onEditorReady,
    };
  },
};
</script>

<style>
.container {
  padding: 20px;
}
.preview {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #f9f9f9;
}
</style>

3. 模拟简书样式

为了模拟简书的样式，您可以在rich-text组件的nodes内容中添加自定义样式。这里以添加引用样式为例：

<rich-text :nodes="formattedContent"></rich-text>

在script部分，处理content以添加样式：

const formattedContent = computed(() => {
  return JSON.parse(JSON.stringify(content.value)).map(node => {
    if (node.type === 'element' && node.tagName === 'quote') {
      node.style = [{
        color: '#666',
        backgroundColor: '#f5f5f5',
        padding: '10px',
        borderLeft: '4px solid #1e90ff',
        marginLeft: '10px',
        marginRight: '10px',
        marginTop: '10px',
        marginBottom: '10px',
      }];
    }
    return node;
  });
});

注意：由于rich-text组件对样式的支持有限，某些复杂样式可能需要通过自定义组件或其他方式实现。上述代码仅展示了基础的处理思路。

此示例提供了一个基本的框架，您可以根据具体需求进一步扩展和优化。

回到顶部