ueditor+秀米

最新推荐文章于 2025-02-18 16:13:09 发布

Lizi_q

最新推荐文章于 2025-02-18 16:13:09 发布

阅读量1.9k

点赞数 1

文章标签： js react

本文链接：https://blog.csdn.net/Lizi_1/article/details/106349428

版权

本文详细介绍了如何将百度ueditor与秀米编辑器进行整合，包括ueditor的接入步骤和秀米的接入步骤，以及在对接过程中遇到的问题和解决方案，如图片本地化、SVG解析、样式兼容等，旨在帮助开发者顺利实现ueditor与秀米的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

秀米官方说明了，他是依附百度编辑器（Ueditor）内核得，所以前端使用秀米就得先把百度编辑器给接了
百度编辑器接入步骤：
1，从Ueditor上面把相关得文件下下来，jsp-utf8版本（官网地址：http://ueditor.baidu.com/website/download.html）
在这里插入图片描述
2，将下载得文件解压到自己得服务器上或者自己本地（因为秀米跑本地会报很多错，所以我就直接放到服务器上面得，秀米得文件时后面得步骤加进去得，现在可以忽略掉它）

3，在项目入口文件引入

<script type="text/javascript" src="http://***/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="http://***/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="http://***/ueditor/lang/zh-cn/zh-cn.js"></script>

！！！注意引入顺序，不然到时候改死都不在问题在哪
4，将ueditor封装成组件，用的时候直接调用（我用得是react）

import UE from 'UE';

componentDidMount() {
   
//这里是接入秀米得代码，需要下载好秀米相关文件才能用，现在暂时注释掉
 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: 'http://***/ueditor/xiumi-ue-dialog-v5.html',
                        editor: editor,
                        name: 'xiumi-connect',
                        title: "秀米图文消息助手",
                        cssRules: "width: " + (window.innerWidth - 60) + "px;" + "height: " + (window.innerHeight - 60) + "px;",
                    });
                    dialog.ren

最低0.47元/天解锁文章