🔥TinyMCE 多端预览神器！tinymce-preview 开箱即用，一次编辑全设备预览

12次阅读

没有评论

做富文本开发的同学一定有过这样的困扰：在 TinyMCE 里排版好的文章，发布到手机、平板、PC 上样式全乱了，反复切换设备调试太折磨人。

今天给大家推荐一个超好用的开源插件：tinymce-preview，专为 TinyMCE 打造的多端实时预览工具，一次编辑，手机 / 平板 / PC 三端效果一键查看，彻底告别反复调试！

🎯 项目亮点

项目地址：https://github.com/luomor-web/tinymce-preview

✨ 核心功能

📱 手机预览：375×812 标准视口，还原 iPhone 真实展示效果
📟 平板预览：768×1024 iPad 视口，完美适配平板端展示
🖥️ PC 预览：1280×800 桌面视口，确保 PC 端排版精准
🔄 横竖屏一键切换：快速验证横屏适配效果
🎨 真实设备外壳：还原刘海、Home 键等设备细节，预览更直观
⚡ 零依赖纯 JS：支持 UMD/ESM/CJS 多种模块规范，无额外引入负担
🧩 Vue 全家桶支持：内置 Vue2 / Vue3 组件，开箱即用

👍 为什么选它

一次集成，全端生效：不用再写多套预览逻辑，插件自动适配三端
零学习成本：API 简洁，复制粘贴即可快速集成
兼容性强：完美支持 TinyMCE 5.x/ 6.x 主流版本
高度可定制：支持自定义预览区 CSS，满足个性化样式需求
轻量高效：不影响编辑器性能，预览流畅无卡顿

🚀 快速上手

1. 安装插件

bash

运行

npm install tinymce-plugin-multipreview

2. 原生 JS 集成

html

预览

<script src="https://unpkg.com/tinymce-plugin-multipreview/dist/plugin.umd.js"></script>
<script>
tinymce.init({
  selector: '#editor',
  plugins: ['multipreview'],
  toolbar: 'multipreview',
  multipreview: {
    customStyles: 'body { background: #f9fafb; }'
  }
})
</script>

3. Vue3 开箱即用

vue

<template>
  <TinymcePreviewEditor v-model="content" :height="500" ref="editorRef" />
  <button @click="openPreview">预览</button>
</template>

<script setup>
import { ref } from 'vue'
import TinymcePreviewEditor from 'tinymce-plugin-multipreview/vue/vue3'

const editorRef = ref(null)
const content = ref('')
const openPreview = () => editorRef.value?.openPreview()
</script>

4. Vue2 快速集成

vue

<template>
  <TinymcePreviewEditor v-model="content" :height="500" ref="editor" />
  <button @click="$refs.editor.openPreview()">预览</button>
</template>

<script>
import TinymcePreviewEditor from 'tinymce-plugin-multipreview/vue/vue2'
export default {
  components: { TinymcePreviewEditor },
  data() { return { content: '' } }
}
</script>