react hook使用UEditor引入秀米图文排版

里面坑比较多，细节也比较多

以下使用的是react 18 + ice3.0，使用其他react脚手架的配置基本相同，例如umi4

1.下载UEditor

进入UEditor仓库，找到版本v1.4.3.3，点击进去
在这里插入图片描述
接着下载ueditor1_4_3_3-utf8-jsp.zip版本

在这里插入图片描述
下载好以后开始安装依赖：npm install ，依赖安装完成后就可以打包了，最终我们项目要的就是这个打包后的文件。

打包需要使用grunt:

  • 全局安装npm install -g grunt-cli
  • 在项目ueditor中安装grunt依赖,npm install grunt --save-dev
  • 在项目ueditor输入指令grunt default来生成一个dist文件
    在这里插入图片描述

2.react项目配置UEditor

在这里插入图片描述
复制dist\utf8-php下的所有文件到react项目中的public\editor\ueditor下面（没有这个目录就新建一个）。
如下，注意标黄的文件是后面步骤加上的，没有这个文件是正常的：在这里插入图片描述
接着引入UEditor

找到src\document.tsx文件，就这个文件就相当于其他项目中的index.html，具体使用参考document定制html,在这里引入UEditor，我们的文件存放的地址在public下面，这里写路径的时候不用写public，直接从editor开始写，/editor/ueditor/ueditor.config.js和/editor/ueditor/ueditor.all.js
在这里插入图片描述

3.react组件引入UEditor

新建src\components\ReactUeditor文件夹，分别以下几个文件
在这里插入图片描述

index.tsx

import React, { useState, useRef } from "react";
import UEditor from "./InputUEditor";
// import "./PublishArticle.less";
import { Form } from "antd";function PublishArticle() {const [form] = Form.useForm();const ueRef: any = useRef(null);//编辑器的宽度const [config] = useState({initialFrameWidth: "100%",initialFrameHeight: 400,});//编辑器的默认值const [initData] = useState("");//富文本失焦就触发setContent函数设置表单的content内容const setContent = (e) => {form.setFieldsValue({content: ueRef.current.getUEContent(),});};return (<div className="PublishArticle-wrap"><UEditorid="container"ref={ueRef}config={config}initData={initData}setContent={(e) => setContent(e)}></UEditor></div>);
}export default PublishArticle;

InputUEditor.tsx

import React, { useEffect, useImperativeHandle, forwardRef } from "react";
let editor: any = null;const UEditor = (props, ref) => {useEffect(() => {setConfig(props.initData, props.config, props.setContent);return () => {// editor?.destroy();// editor.removeListener(); //不要打开，否则返回有问题报错};}, [props.initData, props.config, props.setContent]);// 初始化编辑器const setConfig = (initData, config, setContent) => {editor =window.UE &&window.UE.getEditor("editor", {// enableAutoSave: false,// autoHeightEnabled: false,autoFloatEnabled: false,initialFrameHeight: (config && config.initialFrameHeight) || 450,initialFrameWidth: (config && config.initialFrameWidth) || "100%",zIndex: 1,});editor.ready(() => {if (initData) {editor.setContent(initData); //设置默认值/表单回显}});editor.addListener("blur", function () {setContent(editor.getContent());});};useImperativeHandle(ref, () => ({getUEContent: () => {return editor.getContent(); //获取编辑器内容},}));return <script id="editor" type="text/plain" />;
};export default forwardRef(UEditor);

页面组件引入

import ReactUeditor from "@/components/ReactUeditor";<Form.Item name="contents"><ReactUeditor></ReactUeditor>
</Form.Item>

这个时候就能看到效果了
在这里插入图片描述

4.接入秀米

参考地址

引入秀米图标和样式
在这里插入图片描述
xiumi-ue-dialog-v5.js

/*** Created by shunchen_yang on 16/10/25.*/UE.registerUI("dialog", function (editor, uiName) {var btn = new UE.ui.Button({name: "/* xiumi-connect */",title: "秀米",onclick: function () {var dialog = new UE.ui.Dialog({iframeUrl: "/editor/ueditor/xiumi-ue-dialog-v5.html",editor: editor,name: "xiumi-connect",title: "秀米图文消息助手",cssRules:"width: " +(window.innerWidth - 80) +"px;" +"height: " +(window.innerHeight - 280) +"px;z-index:100000",});dialog.render();dialog.open();},});return btn;
});

xiumi-ue-v5.css

.edui-button.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {background-image: url("./xiumi-connect-icon.png") !important;background-size: contain;
}

通过iframe 嵌入秀米
在这里插入图片描述

internal.js

(function () {var parent = window.parent;//dialog对象dialog = parent.$EDITORUI[window.frameElement.id.replace(/_iframe$/, "")];//当前打开dialog的编辑器实例editor = dialog.editor;UE = parent.UE;domUtils = UE.dom.domUtils;utils = UE.utils;browser = UE.browser;ajax = UE.ajax;$G = function (id) {return document.getElementById(id);};//focus元素$focus = function (node) {setTimeout(function () {if (browser.ie) {var r = node.createTextRange();r.collapse(false);r.select();} else {node.focus();}}, 0);};utils.loadFile(document, {href:editor.options.themePath +editor.options.theme +"/dialogbase.css?cache=" +Math.random(),tag: "link",type: "text/css",rel: "stylesheet",});lang = editor.getLang(dialog.className.split("-")[2]);
if (lang) {domUtils.on(window, "load", function () {var langImgPath =editor.options.langPath + editor.options.lang + "/images/";//针对静态资源for (var i in lang["static"]) {var dom = $G(i);if (!dom) continue;var tagName = dom.tagName,content = lang["static"][i];if (content.src) {//clonecontent = utils.extend({}, content, false);content.src = langImgPath + content.src;}if (content.style) {content = utils.extend({}, content, false);content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath);}switch (tagName.toLowerCase()) {case "var":dom.parentNode.replaceChild(document.createTextNode(content), dom);break;case "select":var ops = dom.options;for (var j = 0, oj; (oj = ops[j]); ) {oj.innerHTML = content.options[j++];}for (var p in content) {p != "options" && dom.setAttribute(p, content[p]);}break;default:domUtils.setAttributes(dom, content);}}});}
})();

xiumi-ue-dialog-v5.html

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>XIUMI connect</title><style>html,body {padding: 0;margin: 0;}#xiumi {position: absolute;width: 100%;height: 100%;border: none;box-sizing: border-box;}</style>
</head><body><iframe id="xiumi" src="https://xiumi.us/studio/v5#/paper"></iframe><script type="text/javascript" src="dialogs/internal.js"></script><script>var xiumi = document.getElementById('xiumi');var xiumi_url = "https://xiumi.us";console.log("xiumi_url is %o", xiumi_url);xiumi.onload = function () {console.log("postMessage to %o", xiumi_url);// "XIUMI:3rdEditor:Connect" 是特定标识符，不能修改，大小写敏感xiumi.contentWindow.postMessage('XIUMI:3rdEditor:Connect', xiumi_url);};document.addEventListener("mousewheel", function (event) {event.preventDefault();event.stopPropagation();});window.addEventListener('message', function (event) {console.log("Received message from xiumi, origin: %o %o", event.origin, xiumi_url);if (event.origin == xiumi_url) {console.log("Inserting html");editor.execCommand('insertHtml', event.data);console.log("Xiumi dialog is closing");dialog.close();}}, false);</script>
</body></html>

将注册的图标添加到编辑器中
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/261380.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL 8.0.36 WorkBench安装

MySQL 8.0.36 WorkBench安装

一、下载安装包 百度网盘链接&#xff1a;点击此处下载安装文件 提取码&#xff1a;hhwz 二、安装&#xff0c;跟着图片来 选择Custom,然后点Next 顺着左边框每一项的加号打开到每一个项的最底层&#xff0c;点击选中最底层的项目&#xff0c;再点击传过去右边的绿色箭头&a…
阅读更多...
静态时序分析：SDC约束命令set_drive详解

静态时序分析：SDC约束命令set_drive详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html 本章将讨论使用set_drive命令&#xff0c;它用于对输入端口的驱动能力建模。首先需要说明的是&#xff0c;默认情况下&#xff0c;DC在STA时默认输入端口的转换时间是0&#xff0c;这对于…
阅读更多...
汇总利用YOLO8训练遇到的报错和解决方案（包含训练过程中验证阶段报错、精度报错、损失为Nan、不打印GFLOPs）

汇总利用YOLO8训练遇到的报错和解决方案（包含训练过程中验证阶段报错、精度报错、损失为Nan、不打印GFLOPs）

一、本文介绍 本文为专栏内读者和我个人在训练YOLOv8时遇到的各种错误解决方案&#xff0c;你遇到的问题本文基本上都能够解决&#xff0c;同时本文的内容为持续更新&#xff0c;定期汇总大家遇到的问题已经一些常见的问题答案&#xff0c;目前包含的问题已经解决方法汇总如下…
阅读更多...
【Face Fusion】vs【Rope Opal】

【Face Fusion】vs【Rope Opal】

文章目录 &#xff08;一&#xff09;简要说明&#xff08;1.1&#xff09;关于Face Fusion&#xff08;1.2&#xff09;关于Rope Opal &#xff08;二&#xff09;简要对比&#xff08;2.1&#xff09;对比表格&#xff08;2.2&#xff09;部分效果展示&#xff08;2.2.1&…
阅读更多...
npm run dev和npm run serve两个命令的区别

npm run dev和npm run serve两个命令的区别

npm run dev和npm run serve两个命令的区别 前端开发过程中运行Vue项目的时候&#xff0c;有时候使用npm run serve命令可以启动项目&#xff0c;有时候却会报错&#xff1b;有时候使用npm run dev命令可以启动项目&#xff0c;有时候却也会报错。是什么原因造成这种情况呢&am…
阅读更多...
探秘SuperCLUE-Safety：为中文大模型打造的多轮对抗安全新框架

探秘SuperCLUE-Safety：为中文大模型打造的多轮对抗安全新框架

探秘SuperCLUE-Safety&#xff1a;为中文大模型打造的多轮对抗安全新框架 进入2023年以来&#xff0c;ChatGPT的成功带动了国内大模型的快速发展&#xff0c;从通用大模型、垂直领域大模型到Agent智能体等多领域的发展。但是生成式大模型生成内容具有一定的不可控性&#xff0…
阅读更多...
在Win系统部署WampServer并实现公网访问本地服务【内网穿透】

在Win系统部署WampServer并实现公网访问本地服务【内网穿透】

目录 推荐 前言 1.WampServer下载安装 2.WampServer启动 3.安装cpolar内网穿透 3.1 注册账号 3.2 下载cpolar客户端 3.3 登录cpolar web ui管理界面 3.4 创建公网地址 4.固定公网地址访问 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0…
阅读更多...
win10下wsl2使用记录（系统迁移到D盘、配置国内源、安装conda环境、配置pip源、安装pytorch-gpu环境、安装paddle-gpu环境）

win10下wsl2使用记录（系统迁移到D盘、配置国内源、安装conda环境、配置pip源、安装pytorch-gpu环境、安装paddle-gpu环境）

wsl2 安装好后环境测试效果如下&#xff0c;支持命令nvidia-smi&#xff0c;不支持命令nvcc&#xff0c;usr/local目录下没有cuda文件夹。 系统迁移到非C盘 wsl安装的系统默认在c盘&#xff0c;为节省c盘空间进行迁移。 1、输出wsl -l 查看要迁移的系统名称 2、执行导出命…
阅读更多...
找座位 - 华为OD统一考试（C卷）

找座位 - 华为OD统一考试（C卷）

OD统一考试（C卷） 分值： 100分 题解： Java / Python / C++ 题目描述 在一个大型体育场内举办了一场大型活动，由于疫情防控的需要，要求每位观众的必须间隔至少一个空位才允许落座。 现在给出一排观众座位分布图，座位中存在已落座的观众，请计算出，在不移动现有观众座位…
阅读更多...
移动端学习：实现App中的下载功能，在手机接管文件系统

移动端学习：实现App中的下载功能，在手机接管文件系统

我感觉把学习中遇到的问题记录下来，写成文章，然后和很多人一起讨论，还是一个很不错的学习方法的。 问题描述 请问有大佬知道vue2项目打包的apk的导出功能为什么失效了吗？网页，h5的应该还是可以下载的。我又不想导出功能和后端有交互，想纯前端下载，网页的下载写法好像打…
阅读更多...
UE5 C++ 静态加载资源和类

UE5 C++ 静态加载资源和类

一.上篇文章创建组件并绑定之后 在Actor中加载初始化了组件&#xff0c;现在在组件中赋值。使用static ConstructorHelpers::FObjectFinder<T>TempName(TEXT("Copy Reference"))&#xff1b;再用TempName.Object //静态加载资源static ConstructorHelpers::FOb…
阅读更多...
Unity MVC开发模式与开发流程详解

Unity MVC开发模式与开发流程详解

在Unity游戏开发中&#xff0c;采用MVC&#xff08;Model-View-Controller&#xff09;模式是一种非常常见的设计模式。MVC模式将应用程序分为三个部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#x…
阅读更多...
shell脚本实现Mysql分库分表备份

shell脚本实现Mysql分库分表备份

一.数据库的分库分表&#xff1f; 12张图把分库分表讲的明明白白&#xff01;阿里面试&#xff1a;我们为什么要分库分表https://mp.weixin.qq.com/s?__bizMzU0OTE4MzYzMw&mid2247547792&idx2&sn91a10823ceab0cb9db26e22783343deb&chksmfbb1b26eccc63b784879…
阅读更多...
【云原生】Docker 安全与CA证书生成

【云原生】Docker 安全与CA证书生成

目录 容器的安全行问题 Docker 容器与虚拟机的区别 Docker 存在的安全问题 1.Docker 自身漏洞 2.Docker 源码问题 Docker 架构缺陷与安全机制 1. 容器之间的局域网攻击 2. DDoS 攻击耗尽资源 3. 有漏洞的系统调用 4. 共享root用户权限 Docker 安全基线标准 1. 内…
阅读更多...
CSB ---＞ （XXE）XML基础

CSB ---＞ （XXE）XML基础

本来今天想更一下CSbeacon上线多层的内网机器的&#xff0c;但是刚好今天是年后的第一节课&#xff0c;讲的是XXE的基础&#xff0c;那就来先盘一下基础&#xff01;&#xff01; 1.XXE XXE全称是XML External Entity即xml外部实体注入攻击&#xff01;其后果会导致用户…
阅读更多...
蓝桥杯嵌入式第12届真题(完成) STM32G431

蓝桥杯嵌入式第12届真题(完成) STM32G431

蓝桥杯嵌入式第12届真题(完成) STM32G431 题目 程序 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**************************…
阅读更多...
【Java EE初阶二十一】http的简单理解（二）

【Java EE初阶二十一】http的简单理解（二）

2. 深入学习http 2.5 关于referer Referer 描述了当前页面是从哪个页面跳转来的&#xff0c;如果是直接在地址栏输入 url(或者点击收藏夹中的按钮) 都是没有 Referer。如下图所示&#xff1a; HTTP 最大的问题在于"明文传输”,明文传输就容易被第三方获取并篡改. …
阅读更多...
【前端】前端三要素之BOM

【前端】前端三要素之BOM

写在前面&#xff1a;本文仅包含BOM内容&#xff0c;JavaScript传送门在这里&#xff0c;DOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频&#xff08;十分感谢Pink老师&#xff09;&#xff0c;原文保存在个人的GitLab中&#xff0c;如果需要写的网页内容信息等可以评…
阅读更多...
提升网络质量：UDPspeeder 实现网络优化与提速

提升网络质量：UDPspeeder 实现网络优化与提速

提升网络质量&#xff1a;UDPspeeder 实现网络优化与提速 背景与意义原理与功能使用方法未来展望相关链接服务 在当今高度互联的网络环境下&#xff0c;网络质量的优化和提速对于用户体验至关重要。针对高延迟和丢包率较高的网络链路&#xff0c;UDPspeeder 提供了一种前向纠错…
阅读更多...
【设计模式】01-装饰器模式Decorator

【设计模式】01-装饰器模式Decorator

作用&#xff1a;在不修改对象外观和功能的情况下添加或者删除对象功能&#xff0c;即给一个对象动态附加职能 装饰器模式主要包含以下角色。 抽象构件&#xff08;Component&#xff09;角色&#xff1a;定义一个抽象接口以规范准备接收附加责任的对象。具体构件&#xff08…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发