vue---uedito---135

最新推荐文章于 2023-05-18 00:12:05 发布

~孙先生~

最新推荐文章于 2023-05-18 00:12:05 发布

阅读量919

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33743799/article/details/126856742

版权

vue–ueditor集成（公众号编辑器—跳转模式）135编辑器

参考文献

http://www.135plat.com/135_ueditor_plugin.html （官网）

操作步骤

下载插件
- 下载插件（1.2根据场景使用）
  1.1： http://www.135editor.com/js/ueditor/plugins/135editor.js(直接打开js获取)
  1.2： http://www.135editor.com/js/ueditor/dialogs/135editor/135EditorDialogPage.html（view-source根据www.135editor.com/js/ueditor/dialogs/135editor/135EditorDialogPage.html 下载html）
放插件
1.1: 135editor.js 文件，放置到 ueditor 的根目录下(ueditor.all.js 等文件同路径)。
1.2: 135EditorDialogPage.html文件放 ueditor/dialogs/135editor（135editor文件需新建）
```
135editor.js文件中引用

iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html'
```
应用
1.1：135editor.js 文件引入页面
1.2：ueditor.config.js 中 toolbars 项里增加一个菜单项 “135editor”（如果提出ueditor组件，export toolbars属性，各项目自行增加体验更好）
1.3：页面中增加一段 CSS
```
    <style>
        .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{
            background-image:url("https://static.135editor.com/img/icons/editor-135-icon.png") !important;
            background-size: 85%;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
```
1.4： ueditor工具栏"135"点击打开135编辑器；排版结束，点击完成编辑将所有内容返回到自己的ueditor

注意事项

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

window.addEventListener('message', function (event) {
    if (typeof event.data !== 'string') return;  // 增加此行代码
    editor.setContent(event.data);
    dialog.close();
  }, false);