秀米图文排版UEditor插件示例

2024-05-18 12:11:36

UEditor是由百度研发的所见即所得富文本web编辑器，如果你对UEditor还不太了解，请移步 UEditor的首页。你也可以在此先试用一下秀米插件在UEditor上的使用效果。请点击工具栏最后的那个“秀米” 按钮来试用。
唤起秀米后，你可以随意编辑排版内容，然后点击秀米页面顶部的 “对勾”按钮，秀米会自动关闭并复制将你编辑的内容复制到UEditor编辑器中。

自定义标题
段落格式
字体
字号
代码语言

元素路径:
字数统计

好，你已经试用过秀米插件了，现在我们来看看怎么把秀米插件添加到你的UEditor中吧

在你的UEditor网页中引用 http://xiumi.us/connect/ue/v5/xiumi-ue-dialog-v5.js和 http://xiumi.us/connect/ue/v5/xiumi-ue-v5.css，也可以下载文件后直接在你的代码里面插入。如图：
下载文件 http://xiumi.us/connect/ue/v5/xiumi-ue-dialog-v5.html和 http://hgs.xiumi.us/uedit/dialogs/internal.js，将其放置于你的UEditor网页的目录内，见下图。我们也准备了一个 zip文件(sha256: b52d4ded7c7a974308aaab5c8ba6b6277e9d839e5ff7db7ad9fb0a35b4f2cde0)，方便你下载。

如果你将其放置于其他目录，请修改 xiumi-ue-dialog-v5.js中相应的内容:
iframeUrl: 'xiumi-ue-dialog-v5.html', //将此处的值改为实际的文件路径
修改UEditor的配置（ueditor.config.js），将其中的“xxs过滤白名单”加上
section:['class', 'style'],
修改的内容请参考下图：
修改前：修改后：
否则UEditor会修改秀米插入内容中的section格式信息，造成排版错误。
做完了前3步，你的UEditor已经可以做到和本页面的示例一样的功能了，不过，由于秀米提供的图片地址不能直接应用在你的网站中，你需要将秀米的图片通过UEditor 的图片上传功能把图片转存到你自己的服务器上。

如果你不实现图片转存，图片的地址是这样的：

具体怎么做呢？

首先，你要确保在UEditor的前端设置(ueditor.config.js)中打开了“远程图片抓取到本地保存”, 如下图：

其次，你需要正确配置或实现UEditor的图片上传功能。具体实现与你使用的后端语言有关，请参考UEditor的官方文档。
上述配置完成后，UEditor会自动将秀米的图片转存到你的图片存储服务器中，这时你再次查看图片属性对话框中的地址时，可能如下图：

请注意：可能需要在UEditor的代码里面对某些秀米图片地址的后缀进行处理，去掉?号之后类似?x-oss-process=所有的部分
恭喜你，你已经完成了秀米插件的全部配置！

秀米图文排版UEditor插件示例相关推荐

秀米图文排版UEditor插件示例新增自定义按钮没有显示以及与neditor的适配
这是秀米插件的官方文档示例链接因为业务需求,我们后端的CMS里的富文本编辑器需要使用秀米插件,因为我们使用的是vue,便使用了neditor(这是用vue对ueditor的一个封装). 我们先来解释 ...
秀米的对话框格子可以变大吗_更新丨秀米图文可以一键兼容多格式发布到其他平台了！...
原标题:更新丨秀米图文可以一键兼容多格式发布到其他平台了! 亲爱的编辑小伙伴们~用了秀米这么长时间,想必大家都不满足只在微信里发布图文,其他平台也要能发布能支持秀米模板的图文.秀米技术小葛格说要满足大 ...
vue+vue-ueditor-wrap+秀米
我们的项目中使用的是ueditor+秀米的富文本编辑器,github上的大神做了一个基于vue的ueditor的组件,能够实现双向数据绑定,可以不用费劲的getContent.setContent.就 ...
用秀米给公众号排版，如何在公众号图文中添加Excel表格
很多做运营的小伙伴都习惯使用秀米给公众号图文做排版,相较于公众号自家的编辑器,秀米为运营小伙伴们提供了更丰富的排版案例,但由于缺乏微信环境的支持,秀米编辑器部分功能在使用上还是不够自家编辑器方便的,比 ...
vue-cli 使用ueditor集成秀米富文本
前言要做一个公众号文本和官网文章的同步操作公司准备集成秀米富文本一.准备工作进入秀米官网 (https://r.xiumi.us/board/v5/2a5va/16516964) 根据文章提示下 ...
秀米svg点击显示另一张图_秀米说：SVG和图文排版
公众号图文的交互性,也可以用滑动布局来做,比如这样: 光阴的事故 A Story of Time 滑动解锁回忆 1 1980-2020 一寸光阴一寸金,寸金难买寸光阴. 2 1980-2020 ...
ueditor（vue-ueditor-wrap）集成秀米全过程以及遇到的问题
1.ueditor(vue-ueditor-wrap)集成秀米踩坑记录链接如下: https://www.jianshu.com/p/af5e935ea506 第一选择肯定是打开ueditor官网地 ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
秀米编辑器（xiumi）+百度编辑器（Ueditor）集成：解决集成问题，秀米编辑器导出到百度编辑器格式问题，图片保存到自己的服务器（阿里云OSS）
1.集成前提条件: 1. 需要集成百度编辑器到环境中 2.https环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误然后我们开始讲解如何集成: 2.引入资源: //百度编辑器需要 ...
秀米 ueditor 远程抓图到本地问题结合
秀米 ueditor 远程抓图到本地问题结合 readfile($imgUrl, false, $context);$img = ob_get_contents();ob_end_clean();/ ...

最新文章

热门文章