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

2024-02-22 07:12
文章标签 javascript 使用 react frontend 引入 图文 排版 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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2