vue3 vue2 135编辑器集成到富文本编辑器wangeditor

2023年3月27日 Leave a comment chenjianle

背景

因为需要使用到一些好看的排版功能需使用类似135编辑器 秀米之类的工具，然后手机端发布出去，直接粘贴进去wangeditor或其他编辑器会缺失样式和图片。

通过外部的修改直接设置内部的html字段则可代替本地的富文本编辑器。

本项目中使用了wangeditor如图。根据文档指引只需要打开按url打开然后设置回调地址，然后主窗口接收回调内容

实现一个编辑器内容使用的js方法，供编辑完成后调用。

通过window.open打开135编辑器，需要传入一个callback参数，为回调地址的url。 

function show135Editor(){

var url = 'http://www.135editor.com/beautify_editor?callback='+window.location.href;

    window.open(url,'new_window','dialogHeight:750px; dialogWidth:1000px;help:No;resizable:No;status:No;scroll:Yes');

}

function get_135editor_content($html) {
// 注意这个方法其实可以不需要的
//ckeditor.setData($html); // ueditor.setContent($html);

}

设置回调地址的功能

由于调用135编辑器会有跨域的问题，在135地址完成编辑时，会将结果提交到回调地址，通过回调地址调用最上层的内容使用函数。设置内容完成后，输出iframe调用135编辑器的关闭页面，关闭打开的135窗口。

注意：需要设置内容输出编码为utf-8格式

var onMessage = function(e){
// 下面这行可以不需要
//parent.window.opener.get_135editor_content(e.data);
// 上行如果在vue中可以改写成这样
this.变量 = e.data
// e.data就是html内容

}



if (window.addEventListener) {  // all browsers except IE before version 9

    window.addEventListener("message", onMessage, false);

} else {

    if (window.attachEvent) {   // IE before version 9

        window.attachEvent("onmessage", onMessage);

    }

}