当前位置：首页 > uni-app

uniapp富文本组件

2026-03-26 13:31:15uni-app

uniapp富文本组件实现方法

在uniapp中实现富文本显示，可以通过内置组件或第三方插件实现。以下是几种常用方法：

使用uni-app内置的rich-text组件

<template>
  <rich-text :nodes="htmlContent"></rich-text>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<div style="color: red;">这是红色文字</div><p>普通段落</p>'
    }
  }
}
</script>

rich-text组件支持简单的HTML标签，但不支持所有HTML特性，如iframe、form等。

使用第三方插件parser 安装mp-html插件：

npm install mp-html

使用示例：

<template>
  <mp-html :content="htmlContent" />
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

export default {
  components: {
    mpHtml
  },
  data() {
    return {
      htmlContent: '<div>完整HTML支持</div>'
    }
  }
}
</script>

使用uParse组件（兼容旧版本） 下载uParse组件后引入：

<template>
  <u-parse :content="htmlContent" />
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data() {
    return {
      htmlContent: '<div>支持更多HTML特性</div>'
    }
  }
}
</script>

富文本编辑器实现方案

使用quill编辑器 安装依赖：

npm install quill @vueup/vue-quill

封装组件：

<template>
  <div class="editor-container">
    <QuillEditor 
      v-model:content="content" 
      contentType="html"
      theme="snow" />
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
  components: {
    QuillEditor
  },
  data() {
    return {
      content: ''
    }
  }
}
</script>

使用tinymce编辑器 下载tinymce文件后配置：

<template>
  <editor 
    api-key="your-api-key"
    :init="editorInit"
    v-model="content" />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  components: {
    Editor
  },
  data() {
    return {
      content: '',
      editorInit: {
        height: 500,
        plugins: 'advlist autolink lists link image charmap print preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat'
      }
    }
  }
}
</script>