135 编辑器插件使用说明书 -...
TRANSCRIPT
135编辑器插件使用说明书
引言............................................................................................................................................ 2
插件整合说明............................................................................................................................ 2
插件简介............................................................................................................................ 2
插件下载............................................................................................................................ 3
如何整合插件.................................................................................................................... 3
自定义实现文件上传........................................................................................................ 5
整合美图秀秀上传图片.................................................................................................... 5
同步 135样式到插件........................................................................................................6
插件免费升级.................................................................................................................... 6
插件编辑使用说明.................................................................................................................... 7
秒刷操作............................................................................................................................ 7
插入样式编辑内容............................................................................................................ 8
前后插入空行.................................................................................................................... 8
图片上传............................................................................................................................ 8
换图.................................................................................................................................... 9
换色.................................................................................................................................... 9
换色传递..........................................................................................................................10
文字阴影色......................................................................................................................10
全文背景图......................................................................................................................11
自动编号..........................................................................................................................12
段落设置..........................................................................................................................13
宽度调整与样式旋转...................................................................................................... 14
行间距和字间距..............................................................................................................15
引言随着微信公众号以及自媒体的发展火热,使用编辑器的越来越多。各类媒体对排版也
越来越重视,阅读者对文章格式也会越来越挑剔,无样式不成文。好的排版让读者赏
心悦目,让文章结构条理清晰易懂易读。
目前市场上的各种编辑器主要是对微信公众号文章的排版支持。企业对排版文章的应
用是多场景的,比如用于自己公司新闻发布,商品展示排版,手机 APP内容排版等等。
在这些系统中使用排版好的文章时,往往需要在其它第三方编辑器中排版好内容,然
后复制到自己系统中,各种业务系统对样式的显示也不是完全兼容,操作繁琐,费时
费力,效果并不是理想。
为了满足企业业务系统对排版能力的需求,节省编辑器自主开发与维护的成本,提高
内部工作人员排版的工作效率,135编辑器推出了企业插件版。开放 135编辑器的编
辑功能以及在线样式库,能极大程度的降低业务系统中排版的难度,提升美观度与工
作体验。
插件整合说明
插件简介
135编辑插件年费版
价格:2400元 / 年,按项目核算的维护费+流量调用费用
企业插件体验地址: http://www.135plat.com/open_editor
135编辑插件打包版
价格:8万起, 包含 800个样式 后期更新样式 5000元/次,每次包含 500个样式。
135编辑器插件版提供 135所有的在线样式,并通过授权 appkey与 135编辑器同步样
式列表。135编辑器支持图文编辑、插入样式、样式秒刷、样式换色操作,对样式支
持操作复制、粘贴、前(后)插入空行、段落设置、自动编号、传递换色、旋转等操作。
135编辑器无缝嵌入各类 BS结构在线系统中,轻松提升您的系统的编辑排版能力,提
升用户体验。上传的图片以及编辑完成后的内容,都直接提交存储在本地服务器中。
保持系统的独立性,以及数据的安全性。
插件下载
下载地址:http://pan.baidu.com/s/1c29e2EO
提取码 : tz58
如何整合插件
本软件是一款插件,直接调用 js 嵌入到企业系统里。由于存在 css 样式,对浏览器存
在兼容性问题。兼容的浏览器为谷歌以及谷歌内核的浏览器,也可兼容 IE9 及其以上
版本。
系统整合只需要包含 JS文件,修改几行前端 JS代码
上传图片将保存到业务系统服务器,而不是保存到 135
插件中显示的样式通过 135编辑器提供的接口实时加载
插件版本更新后,可免费获得升级
3 .3 插件调用步骤
js 文件:
需要 jquery 库的支持
<script src="http://static.135editor.com/js/jquery/jquery.min.js" type="text/javascript"></script>
将 js 文件下载到应用服务器的 ueditor 目录,调用自己服务器的文件
<script type="text/javascript" src="/下载的百度编辑器目录/ueditor/ueditor.config.js"></script>
<script src="http://static.135editor.com/js/ueditor/ueditor.all.min.js"></script>
<script src="http://static.135editor.com/open/v1/a92d301d77.js" type="text/javascript"></script>
css 代码
<link href="http://static.135editor.com/open/v1/96619a5672.css" rel="stylesheet" type="text/css" />
html 代码:
将编辑器的区域放入 form 表单中,设置好 name 值,提交表单时,编辑
器内部的内容会自动提交
<div style="width:800px;margin:0 auto;" >
<form action="" method="post">
<script id="WxMsgContent" name="content" style="width:800px;" type="text/plain">初始化内容</script>
<br/>
<div style="text-align:center;">
<input type="submit" style="padding:10px 20px;" value="提交" onclick="alert($(this.form).serialize());return true;">
</div>
</form>
</div>
js 调用代码:
请联系 135 工作人员获取 appkey(QQ:270308933)
current_editor = UE.getEditor('WxMsgContent',{
initialFrameHeight:600,
open_editor: true,
style_width:360, //样式区宽度像素
style_url : 'http://www.135editor.com/editor_styles/open?inajax=1&appkey=xxxx'
});
3 .4 出错处理
如果出现不会处理的问题,可以直接与公司的技术支持人员联系:
自定义实现文件上传
135编辑器基于百度的 ueditor扩展开发,文件上传的实现可使用原生 ueditor下载包
中包含的上传代码。ueditor的使用说明详见 http://fex.baidu.com/ueditor/#start-start
整合美图秀秀上传图片
插件中整合了美图秀秀功能,对于插入的图片,点击编辑按钮,即可跳转到美图秀秀
编辑浮层,对图片进行编辑
编辑按钮位置,如图▲
图片编辑浮层,如图▲
同步 135 样式到插件
对于样式的同步,我们采用了自定义形式。即 135方提供一个管理员账号,通过管理
员账号去样式库里收藏需要的样式,插件里的样式则会同步更新。而样式库里的样式
是实时更新的。
插件免费升级
135 方会定时收集大家对编辑器的反馈,进行相应的优化以及功能的增加。更新版本
后,我们会对使用者进行免费升级。
插件编辑使用说明
秒刷操作
秒刷是 135编辑器的一个特色功能,操作方式是:输入内容,选中内容,点击样式列
表中的样式,样式中的内容则替换为目标内容。插件版编辑器也自带了这个功能,很
大程度上节省了排版时间,也减少了排版错乱现象的发生。
演示案例:
步骤一:选中文字
步骤二:选中样式点击
结果:
插入样式编辑内容
135编辑器可对单个样式进行编辑,激活样式后,样式底部会显示一排操作功能键,
点击对应的功能即可对样式进行操作
功能主要有:复制、剪切、选中、删除、边框设置、段落设置、前后空行、旋转、留
白、图片操作等
前后插入空行
图片上传
保留了 UEDITOR的图片上传功能,可上传单图或多图;也可插入图片地址上传图片
换图
对于更换图片,操作方式有两种,一种方式是双击图片,即可换图;第二种方式是点
击图片下方的换图按钮
换色
插件版提供了基础配色方案,使用者也可根据自己的需求,自己保存颜色。
配色方案的使用方式是:激活样式,编辑区域右侧即可出现配色方案窗口,点击任意
颜色,样式中的颜色即变为该色
换色传递
颜色传递的意思是:编辑器中插入了多个相同的样式,当对某一个样式进行了换色操
作,点击该样式中的传递按钮,其他相同的样式即变为这一样式的颜色
演示案例:
结果:
文字阴影色
文字阴影是一种有趣的显示效果,选中文字,点击颜色即可
位置:编辑区域工具栏中
效果如图:
全文背景图
为了方便对整篇文章设置一个背景,插件里研发了全文背景功能,只需要点击按钮,
插入图片即可,还可对背景进行设置。也可将背景设置为纯色背景
位置:
设置界面:
效果图:
自动编号
这个功能只针对带有序号的样式,无需手动对数字进行更改,只需要点击自动编号,
同类样式从上到下按照由小到大的规则自动更新编号
演示案例:很随意插入样式,序号是混乱的:
激活某一样式,点击自动编号:
段落设置
段落设置可针对单个样式,也可针对全文。将参数填写好,提交,段落则变更。
演示案例:
位置:任意一个样式的操作栏里
设置参数:
选择了应用到全文,整篇文章的段落就变更为了设置的效果。
宽度调整与样式旋转
由于某些样式,内容多少展示效果也会不一样,针对这个需求,135研发了宽度调整
以及布局的功能。
. 宽度调整
调整样式的百分比
位置:
操作方式:滑动比例调整按钮
样式旋转
针对花式排版,135编辑器研发了样式的旋转功能,只需要点击旋转按钮,可对样式
进行 360度全方位旋转
行间距和字间距
设置数值:
结果呈现:2倍行距
以上只是 135 插件功能的一部分,更多功能请咨询 135 编辑器客服。
联系方式:
QQ:285694665
电话:028-61988135