博主信息
吃着青梅候竹马的博客
博文
5
粉丝
0
评论
0
访问量
11064
积分:2
P豆:30.5

ueditor集成秀米编辑器

2018年10月30日 16:25:51阅读数:6288博客 / 吃着青梅候竹马的博客/ HTML

由于工作需求富文本编辑器中要用到秀米插件

找了官方和一些博客介绍的都不太全,于是自己整理了一下

首先在官方下载所需文件并放到ueditor的dialogs目录下如下图

01.png

其次在xiumi-ue-dialog-v5.js中将iframeUrl配置为: editor.ui.UEDITOR_HOME_URL+ 'dialogs/xiumi-ue-dialog-v5.html'

02.png

最后再在页面中引入xiumi-ue-v5.css以及xiumi-ue-dialog-v5.js(放于ueditor的js文件之后)

03.png

04.png

找到themes/default/ueditor.css(或者themes/default/css/ueditor.css)文件,增加一条样式定义:

文件中可搜索.edui-icon找到,添加下面一条

实例

 .edui-default  .edui-for-xiumi-connect .edui-icon {

           background-image: url(http://xiumi.us/connect/ue/xiumi-connect-icon.png)!important ;

           background-repeat:no-repeat ;

           background-position:center;

         }

运行实例 »

点击 "运行实例" 按钮查看在线实例

这样在ueditor工具栏就可以看到秀米的图标了

1536643086(1).png

本以为这样就大功告成了没想到在秀米中编辑完内容的样式并没有跟过来,于是在Chrome浏览器中调试发现section失去样式,最后在ueditor的配置文件中找到section添加class以及style如下图

1536643361(1).png

最后效果

1536643505(1).png

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 写公众号文章的软件有135、新媒体管家、壹伴等等,可以根据用户使用习惯,选择适合的一款,还有一些手机写作的软件,如印象笔记、zine、有道云笔记、讯飞语记等等。
    devcpp(dev c++)是一个Windows下的C和C++程序的开发环境;它使用MingW32/GCC,遵循C/C++标准;它包括多页面窗口、工程
    vscode是一款由微软开发,同时支持windows、linux和macos操作系统的开放代码
    laravel可用的ide工具有:1、Sublime Text,一款具有代码高亮、语法提示、自动完且反应快速的软件;2、phpstorm,一款商业的PHP开发工具;3、atom,一个跨平台文本
    vue.js可以用vscode或者WebStorm开发工具;其中vscode是微软出的一款轻量级代码,而WebStorm是JetBrains出品的JavaScript程语言开发环境。
    从 3.2 版本开始,Sublime Text 在了 Git。
    适用于go语言的ide有:1、Goland,是一个新的商业IDE;2、LiteIDE,是一款专门针对Go开发的;3、Sublime Text文本;4、GoClipse;5、Visual Studio
    Atom 是 Github 专门为程序员推出的一个跨平台文本。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,Java等网页程语言。
    区别:visual studio是一个的开发环境,功能相对来说比较完整;而vscode是一款代码
    vscode和visual studio的区别是:visual studio是开发环境,它包括了整个软件生命周期中所需要的大部分工具;vscode是一款免费开源的现代化轻量级代码,支持几乎所有主流的开发语言的语法高亮特性