百度编辑器（UEditor）工具栏扩展秀米的编辑器工具

程序小小生

已于 2022-03-06 11:03:54 修改

阅读量1.2k

点赞数

分类专栏：迅睿CMS教程个人研究文章标签：编辑器百度编辑器百度编辑器整合秀米 ueditor ueditor编辑器

于 2022-03-06 10:57:22 首次发布

原文链接：https://www.qiyehao.cc/

版权

迅睿CMS教程同时被 2 个专栏收录

8 篇文章 4 订阅

订阅专栏

个人研究

6 篇文章 1 订阅

订阅专栏

在百度编辑器（UEditor）工具栏加一个秀米的编辑器工具，让百度编辑器变得更灵活方便。轻轻松松做出H5页面布局。参考网络其它人写的内容整理做个记录。

可参考官方DEMO及说明：秀米图文排版UEditor插件示例

主要项：

关闭了多余的功能项，主要针对手机端内容编辑；
原来很Low的图标替换了（这是抄别人的）；
增加秀米插件，内容编辑真是方便啊，如果有秀米vip的就更好使了；
增加手机端预览功能，方便检查内容；
关闭了本地保存成功的提示，仅关闭了提示。
与egg-ueditor完美结合。

效果图：

使用方法：

在页面引用。例如：福地

<!DOCTYPE html>
<html>
<head>
<script src="/public/ueditor/ueditor.config.js"></script>
<script src="/public/ueditor/ueditor.all.js"></script>
<script src="/public/ueditor/xiumi-ue-dialog-v5.js"></script>
<link rel="stylesheet" href="/public/ueditor/xiumi-ue-v5.css">
  </head>
  <body>
    <h1>编辑器示例</h1>
    <div id="content"></div>
    <script type="application/javascript">
      let ueditor_config = {
        serverUrl: "/ueditor?_csrf={{ ctx.csrf | safe }}",
        initialFrameWidth: 700,
        initialFrameHeight: 320,
        autoHeightEnabled: false
      };
      var ue = UE.getEditor('content',ueditor_config);
    </script>
  </body>
</html>

详细使用见ueditor官方文档

遇到的问题解决：

1、秀米编辑器上传的图片到百度编辑器里会被放大很多倍
解决方法找到这个文件。

加上这段代码，清理浏览器缓存后重试

/*可以在这里添加你自己的css*/
	img {
    	max-width: 100%;
    }
    body {
   	 overflow-y: scroll !important;
    }
    .view {
    	word-break: break-all;
    }
    .vote_area {
    	display: block;
    }
    .vote_iframe {
   	 	background-color: transparent;
    	border: 0 none;
    	height: 100%;
    }
    #edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

2、微信浏览器里的图片不显示
秀米编辑器防外链，需要后台存一下再返回。

程序小小生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度编辑器（UEditor）工具栏扩展秀米的编辑器工具

在百度编辑器（UEditor）工具栏加一个秀米的编辑器工具，让百度编辑器变得更灵活方便。轻轻松松做出H5页面布局。参考网络其它人写的内容整理做个记录。可参考官方DEMO及说明：秀米图文排版UEditor插件示例。可用于各种CMS系统采用百度编辑器插件扩展。
复制链接

扫一扫