分类：JS

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);

    }

}

jq社会主义核心价值观点击特效

2018年7月13日 Leave a comment chenjianle

(function() {var coreSocialistValues = [“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正”, “法治”, “爱国”, “敬业”, “诚信”, “友善”], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener(‘click’, function(e) {if (e.target.tagName == ‘A’) {return;}var x = e.pageX, y = e.pageY, span = document.createElement(‘span’);span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = [‘z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ‘, y – 20, ‘px; left: ‘, x, ‘px;’].join(”);document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top – i + ‘px’;el.style.opacity = (180 – i) / 180;}}}}());

从url上获取一个参数的值

2018年2月18日 No Comments chenjianle

//paraName 等找参数的名称
function GetUrlParam(paraName) {
var url = document.location.toString();
var arrObj = url.split(“?”);

if (arrObj.length > 1) {
var arrPara = arrObj[1].split(“&”);
var arr;

for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split(“=”);

if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return “”;
}
else {
return “”;
}
}

PHP和js判断访问终端是否是微信浏览器

2017年11月30日 No Comments chenjianle

js判断是否是微信浏览器
function is_weixin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == ‘micromessenger’) {
$(“#rs”).text(“微信浏览器”);
} else {
$(“#rs”).text(“不是微信浏览器”);
}
}

PHP判断

$is_weixin = (is_weixin() == true) ? “微信浏览器” : “不是微信浏览器”;
function is_weixin() {
if (strpos($_SERVER[‘HTTP_USER_AGENT’], ‘MicroMessenger’) !== false) {
return true;
} return false;
}