wangEditor 2025 最新下载安装教程：多平台快速集成指南

? wangEditor 2025 最新下载安装教程：多平台快速集成指南

? 下载与安装

? 官方下载渠道

1. GitHub 仓库：访问wangEditor GitHub Releases 页面，下载最新的压缩包。解压后，进入release文件夹，找到wangEditor.js或wangEditor.min.js文件。
2. CDN 引入：使用 CDN 可以快速加载编辑器，无需下载文件。在 HTML 中添加以下代码：
   html

   <script src="https://unpkg.com/wangeditor@latest/dist/wangEditor.min.js">script>
   
   
   这种方式适合快速原型开发或对加载速度要求不高的项目。
3. 包管理工具：如果你使用 npm 或 yarn，可以通过以下命令安装：
   bash

   npm install wangeditor --save
   # 或
   yarn add wangeditor
   
   
   这种方式适合需要频繁更新或进行模块化开发的项目。

?️ 安装注意事项

• 兼容性：wangEditor 2025 支持现代浏览器（Chrome、Firefox、Safari、Edge 等），但不再支持 IE 浏览器。
• 文件依赖：如果使用 CDN 或手动下载，确保wangEditor.js和相关 CSS 文件（如wangEditor.css）在项目中正确引用。如果使用包管理工具，依赖会自动安装。
• 版本选择：在 GitHub Releases 页面，可以看到不同版本的更新日志。建议选择最新稳定版本，以获得最佳性能和功能支持。

?️ 多平台集成指南

? 原生 JavaScript 集成

1. 创建编辑器实例：
   html

   <div id="editor">div>
   <script>
     const E = window.wangEditor;
     const editor = new E('#editor');
     editor.create();
   script>
   
   
   
2. 基本配置：
   javascript

   editor.config.placeholder = '请输入内容...';
   editor.config.readonly = false; // 是否只读
   editor.config.autofocus = true; // 是否自动聚焦
   
   
   
3. 自定义菜单：
   javascript

   editor.config.menus = [
     'head', 'bold', 'italic', 'underline', 'foreColor', 'backColor',
     'list', 'justify', 'image', 'code', 'undo', 'redo'
   ];
   
   
   通过调整menus数组，可以选择显示哪些工具按钮。

? React 集成

1. 安装依赖：
   bash

   npm install @wangeditor/editor-for-react --save
   
   
   
2. 创建组件：
   jsx

   import { Editor } from '@wangeditor/editor-for-react';
   import '@wangeditor/editor/dist/css/style.css';
   
   const RichTextEditor = () => {
     const [html, setHtml] = useState('
   初始内容
   ');
   
     return (
       <div>
         <Editor
           value={html}
           onChange={setHtml}
           config={{
             placeholder: '请输入内容...',
             menus: ['head', 'bold', 'italic', 'image']
           }}
         />
       div>
     );
   };
   
   
   
3. 事件监听：
   jsx

   const handleChange = (newHtml) => {
     setHtml(newHtml);
     console.log('内容变化:', newHtml);
   };
   
   
   通过onChange事件监听编辑器内容的变化。

? Vue 集成

1. 安装依赖：
   bash

   npm install @wangeditor/editor-for-vue@next --save
   
   
   
2. 组件封装：
   vue
   
   
3. 图片上传配置：
   javascript

   editorConfig.MENU_CONF('uploadImage') = {
     allowedFileTypes: ['image/*'],
     customUpload: async (file, insertFn) => {
       try {
         const ossUrl = await uploadToOSS(file); // 对接云存储
         insertFn(ossUrl, '图片描述');
       } catch (error) {
         console.error('上传失败:', error);
       }
     }
   };
   
   
   这里展示了如何自定义图片上传逻辑，结合七牛云或阿里云 OSS 实现文件存储。

?️ Angular 集成

1. 安装依赖：
   bash

   npm install wangeditor --save
   
   
   
2. 组件实现：
   typescript

   import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
   import * as wangEditor from 'wangeditor';
   
   @Component({
     selector: 'app-rich-text-editor',
     template: '
   '
   })
   export class RichTextEditorComponent implements OnInit {
     @ViewChild('editorDiv') editorDiv: ElementRef;
     editor: any;
   
     ngOnInit() {
       this.editor = new wangEditor(this.editorDiv.nativeElement);
       this.editor.config.uploadImgShowBase64 = true; // 使用base64保存图片
       this.editor.create();
     }
   
     ngOnDestroy() {
       this.editor.destroy();
     }
   }
   
   
   
3. 内容获取与设置：
   typescript

   // 获取HTML内容
   const htmlContent = this.editor.txt.html();
   
   // 设置HTML内容
   this.editor.txt.html('
   新的内容
   ');
   
   
   在 Angular 中，需要注意编辑器实例的销毁，避免内存泄漏。

? 移动端适配

? 屏幕适配

1. CSS 样式调整：
   
   
   css

   .editor-wrapper {
     max-width: %;
     margin:  auto;
     padding: px;
   }
   
   .w-e-toolbar {
     width: % !important;
     position: fixed;
     top: ;
     left: ;
     z-index: ;
   }
   
   .w-e-text-container {
     margin-top: px;
   }
   
   
   
   通过设置固定定位的工具栏和调整容器边距，确保在移动端显示正常。
   
   
2. 触摸事件优化：
   
   
   javascript

   editor.config.customTouchStart = (event) => {
     // 处理触摸开始事件
   };
   
   editor.config.customTouchMove = (event) => {
     // 处理触摸移动事件
   };
   
   
   
   可以通过自定义触摸事件来优化移动端的交互体验。
   
   

? 专用移动端版本

1. 下载依赖：
   html

   <script src="zepto.js">script>
   <script src="zepto.touch.js">script>
   <script src="wangEditor-mobile.js">script>
   <link rel="stylesheet" href="wangEditor-mobile.css">
   
   
   
2. 初始化编辑器：
   html

   <textarea id="editor">textarea>
   <script>
     new wangEditorMobile('#editor');
   script>
   
   
   wangEditor-mobile基于 zepto 开发，适合小屏幕和手指触摸操作。

? 高级配置与扩展

? 公式编辑

1. 安装公式插件：
   bash

   npm install @wangeditor/plugin-formula --save
   
   
   
2. 注册插件：
   javascript

   import { Boot } from '@wangeditor/editor';
   import formulaModule from '@wangeditor/plugin-formula';
   
   Boot.registerModule(formulaModule);
   
   
   
3. 配置编辑器：
   javascript

   const editorConfig = {
     menuKeys: ['editFormula'], // 编辑公式菜单
   };
   
   const toolbarConfig = {
     'insertFormula', // 插入公式菜单
   };
   
   
   公式插件支持 LaTeX 语法，生成的 HTML 内容可以通过第三方工具（如 KaTeX）进行渲染。

? Markdown 支持

1. 安装 Markdown 插件：
   bash

   npm install @wangeditor/plugin-markdown --save
   
   
   
2. 注册插件：
   javascript

   import { Boot } from '@wangeditor/editor';
   import markdownModule from '@wangeditor/plugin-markdown';
   
   Boot.registerModule(markdownModule);
   
   
   
3. 配置编辑器：
   javascript