把秀米编辑的排版应用到自己的博客

感觉自己的博客界面太过单一,想拥有微信那样的好看界面?
今天我来教大家怎么把秀米编辑的内容应用到自己的博客上。

秀米官方其实已经提供了现成的第三方对接方案了,我们这里使用的是第二个方案:第三方有自己的内容发布平台和编辑器,希望能够接入秀米制作的内容。

首先我们需要下载百度的UEditor安装包,我们选择最新的下载即可。下载完成后上传到自己的网站根目录,然后可以直接到浏览器里面打开index.html页面,如果出现了下面的界面,说明测试成功可以进行下一步了。

接下来我们需要引入秀米的插件,这样做是为了兼容秀米的排版。

我们需要下载http://xiumi.us/connect/ue/v5/xiumi-ue-dialog-v5.js和 http://xiumi.us/connect/ue/v5/xiumi-ue-v5.css这两个文件,下载完成后直接放到UEditor里面(就是自己放安转包的那个文件夹)。然后在下载下载文件http://xiumi.us/connect/ue/v5/xiumi-ue-dialog-v5.html和 http://hgs.xiumi.us/uedit/dialogs/internal.js,将其放置于你的UEditor网页的目录内.

如果你将其放置于其他目录,请修改 xiumi-ue-dialog-v5.js中相应的内容:

iframeUrl: 'xiumi-ue-dialog-v5.html', //将此处的值改为实际的文件路径

然后再修改UEditor的配置(ueditor.config.js),将其中的“xxs过滤白名单”加上

section:['class', 'style'],

最后要注意:秀米上的图片外部服务器是不能访问的,我们需要把图片保存到本地,我们可以开启自动抓取图片功能。打开ueditor.config.js文件,把下面的代码打开。

还有自己要在php文件夹里面新建一个upload的目录用于存放图片,并且注意修改文件夹的读写权限。

然后我们就到自己的博客控制台里面新建一个页面,输入以html代码(注意自己安转目录的区别):

<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/xiumi-ue-dialog-v5.js"></script>
<link rel="stylesheet" href="/ueditor/xiumi-ue-v5.css">

<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
       
</script>

<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

然后访问这个页面,如果出现下面的界面,说明插件已经安装上去了。

现在我们就只需要到秀米上设计好界面,写完后点击那个√然后复制界面内容,再粘贴到自己的编辑器上就行了。

最后,如果我们想显示到我们的博客中只需要点击编辑器的左上角那个html标签就可以转换成html代码,接下来我们复制一下代码。然后新建文章把代码复制到html区块里面就大功告成了!

演示界面

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

Title - Artist
0:00