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

本文主要是介绍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>

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

这篇关于react hook使用UEditor引入秀米图文排版的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/734483

相关文章

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本

C++ Primer 多维数组的使用

《C++Primer多维数组的使用》本文主要介绍了多维数组在C++语言中的定义、初始化、下标引用以及使用范围for语句处理多维数组的方法,具有一定的参考价值,感兴趣的可以了解一下... 目录多维数组多维数组的初始化多维数组的下标引用使用范围for语句处理多维数组指针和多维数组多维数组严格来说,C++语言没

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud