第三方对接135编辑器适用场景及方案

1.你的平台有自己的内容发布管理平台,但没有编辑器

方案:使用135编辑器无缝集成企业插件,可以与现有系统无缝对接,同步135编辑器最新样式,灵活地使用135编辑器的秒刷等功能操作。

查看企业插件集成说明


2.你的平台有自己的内容发布管理平台和自己的编辑器

方案A:如果你需要替换掉平台已有的编辑器,可以使用135编辑器的无缝集成企业插件。

方案B:如果你需要在自己的编辑器里使用135编辑器的样式排版以及接入135制作的内容,调用135编辑器接口,用户在135排版页面点击完成编辑,内容将直接同步到第三方编辑器。

查看135编辑器免费调用示例说明

135编辑器免费调用示例

项目本身使用百度的ueditor编辑器,可免费集成外部调用135编辑器的方式来使用。也可申请与APPKEY,做到135用户绑定的方式,实现打开插件时免登录。使用非ueditor编辑器的,集成方式可参看这里,如有任何疑问可联系QQ: 285694665,微信: hncszdb



1
下载插件

将插件的两个文件下载到项目ueditor对应的目录里,并将135editor.js加载到自己的网页里(放在ueditor.all.min.js之后)

http://www.135editor.com/js/ueditor/plugins/135editor.js
view-source:http://www.135editor.com/js/ueditor/dialogs/135editor/135EditorDialogPage.html 

//由于百度统计变更,影响直接触发“完成编辑”返回。老版本使用的用户,需要在135EditorDialogPage.html文件的40行增加一行代码。


window.addEventListener('message', function (event) {

      if (typeof event.data !== 'string') return;  // 增加此行代码

      editor.setContent(event.data);

      dialog.close();

  }, false);


2
修改配置文件


在ueditor.config.js中toolbars项里增加一个135editor菜单项,

toolbars:[

['bold','italic', 'underline', 'fontborder', 'strikethrough',  '135editor','rowspacingtop', 'rowspacingbottom', 'lineheight','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|','superscript', 'subscript' ]],


3
增加CSS代码

在自己的项目调用编辑器的网页里中增加一段CSS

<style>

.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{

    background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;

    background-size: 85%;

    background-position: center;

    background-repeat: no-repeat;

}

</style>


完成上述3个步骤后,调用方式的插件就已经集成完毕了。可在下面的样例中体验。

  1. 请点击下方工具栏“135”的按钮来打开135编辑器,

  2. 唤起135编辑器后,在编辑区域排版内容,点击右侧“完成编辑”就会将所有内容自动返回到自己的编辑器里面。


体验示例:

关于图片访问

用户通过135编辑器上传的图片,是存放在135编辑器的服务器上,当图片被访问的时候,会消耗我们的服务器资源,所以135编辑器会禁止外站的图片请求。

当用户通过复制粘贴,把在135编辑器上制作的内容粘贴到第三方平台上时,图片将会无法访问。

解决方案:第三方平台实现图片的转存功能,和微信后台一样,在内容被粘贴到UEditor编辑器后,自动识别里面的图片链接,并存储到自己的服务器上,具体请查阅UEditor关于图片本地化的文档。