您需要先安装一款用户样式管理器扩展(如 Stylus)后才能安装此样式。
您需要先安装一款用户样式管理器扩展(如 Stylus)后才能安装此样式。
您需要先安装一款用户样式管理器扩展(如 Stylus)后才能安装此样式。
您需要先安装一款用户样式管理器扩展后才能安装此样式。
您需要先安装一款用户样式管理器扩展后才能安装此样式。
您需要先安装一款用户样式管理器扩展后才能安装此样式。
(我已经安装了用户样式管理器,让我安装!)
// ==UserScript==
// @name 微信编辑器增强🧬
// @namespace http://tampermonkey.net/
// @match *://www.135editor.com/*
// @match *://bj.96weixin.com/*
// @match *://www.365editor.com/*
// @icon https://www.135editor.com/img/vip/vip.png
// @grant none
// @version 1.6
// @author ec50n9
// @description 去广告、解除vip限制、解除2个选项卡限制,配色方案中增加互补色选项,并增加自制css编辑器,可直接编辑元素css。
// @license MIT
// ==/UserScript==
$(function () {
'use strict';
// 计算互补色
const getComplementaryColor = function (color = '') {
const colorPart = color.slice(1);
const ind = parseInt(colorPart, 16);
let iter = ((1 << 4 * colorPart.length) - 1 - ind).toString(16);
while (iter.length < colorPart.length) {
iter = '0' + iter;
};
return '#' + iter;
};
// 添加样式
const addStyle = function (styleText, document) {
(document ? document : $('head')).append($(`<style>${styleText}</style>`));
}
// css编辑面板
let ec_window = $(`
<div style="display:flex;
flex-direction:column;
position:fixed;
top:10em; left:25%;
max-width:30em;
max-height:70%;
padding:1em;
box-sizing: border-box;
background-color:#fff;
box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius:1em;
z-index:999;">
<style>
#ec-path-list{
list-style: none;
display: flex;
flex-wrap: wrap;
text-transform: lowercase;
}
#ec-path-list li:nth-child(n+2)::before{
content: '>';
margin: 0 .5em;
}
</style>
<p id="ec-default-tip">点击一个元素以查看其属性</p>
<h1 id="ec-win-title" style="height:2em; cursor:move; user-select: none;">元素名</h1>
<div id="ec-path-list" style="margin:0;"></div>
<div style="display:flex; flex-direction:column; overflow-y:scroll">
<h2 style="margin-top:1em; font-weight:600">当前元素样式</h2>
<table id="ec-win-style"></table>
<div style="display:flex; align-items:center; margin-top:.5em">
<input id="ec-win-input-style" type="text" value=""placeholder="例: color: red;" style="flex-grow:1; border:2px solid #eee;padding:0 8px; border-radius:2px;">
<button id="ec-win-add-style" style="min-width:5em; margin-left:1em; padding:0 .8em; border-radius:.4em; border:2px solid #999;">添加样式</button>
</div>
<div style="display:none; margin-top:.8em; color:#999; font-size:.8em;">
每次只能添加<strong>一条</strong>样式。<br>
添加样式后需要点击下方<strong>写入</strong>才可生效。<br>
清空编辑框后点击<strong>写入</strong>即可删除该行样式。
</div>
<h2 style="margin-top:1em; font-weight:600">属性</h2>
<table id="ec-win-attr"></table>
<h2 style="margin-top:1em; font-weight:600">子元素</h2>
<ul id="ec-child-list" style="margin:0;">
</ul>
<h2 style="margin-top:1em; font-weight:600">内容</h2>
<div style="width:100%">
<textarea id="ec-win-html" rows="6" style="width:100%; border:2px solid #eee; padding:0 8px; border-radius:2px;">元素文本</textarea>
</div>
</div>
<button id="ec-win-delete" style="align-self:flex-end; margin-top:1em; padding:0 .8em; border-radius:.4em; border:2px solid #999;">删除元素</button>
<button id="ec-win-parent" style="align-self:flex-end; margin-top:1em; padding:0 .8em; border-radius:.4em; border:2px solid #999;">父容器</button>
<button id="ec-win-write" style="align-self:flex-end; margin-top:1em; padding:.2em .8em; border-radius:.4em; border:2px solid #eee; color:#fff; background-color:#2775b6">更新写入</button>
</div>`).hide();
$('body').append(ec_window);
// 窗口控件
let ec_default_tip = $('#ec-default-tip');
let ec_win_title = $('#ec-win-title');
let ec_path_list = $('#ec-path-list');
let ec_win_style = $('#ec-win-style');
let ec_win_input_style = $('#ec-win-input-style');
let ec_win_add_style = $('#ec-win-add-style');
let ec_win_attr = $('#ec-win-attr');
let ec_child_list = $('#ec-child-list');
let ec_win_html = $('#ec-win-html');
let ec_win_delete = $('#ec-win-delete');
let ec_win_parent = $('#ec-win-parent');
let ec_win_write = $('#ec-win-write');
// 窗口拖拽
ec_win_title.mousedown(function (e) {
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function (e) {
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(document).width() - ec_window.outerWidth(true)) {
x = $(document).width() - ec_window.outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > $(document).height() - ec_window.outerHeight(true)) {
y = $(document).height() - ec_window.outerHeight(true);
}
ec_window.css({
'left': x + 'px',
'top': y + 'px'
});
});
$(document).mouseup(function () {
$(document).off('mousemove');
});
});
// 初始化
const ecInit = function () {
addStyle(`#ec-change{color:#fff; background-color:#e8b004;}`);
}
// 进化函数
const evolution = function () {
let cur_editor = $('#ueditor_0');
// 注入样式
addStyle('.ec-active{outline: 1.5px dashed red !important; outline-offset: 2px; position: relative;}',
cur_editor.contents().find('head'));
// 元素选中
let element_click_func = function () {
const cur_element = $(this);
// 隐藏提示
ec_window.find('*:not(style,#ec-default-tip)').show();
ec_default_tip.hide();
// 添加标记
cur_editor.contents().find('body .ec-active').removeClass('ec-active');
cur_element.addClass('ec-active');
// 清空内容
ec_path_list.html('');
ec_win_style.html('');
ec_win_attr.html('');
ec_win_html.val('');
ec_win_add_style.unbind();
ec_child_list.html('');
ec_win_write.unbind();
ec_win_parent.unbind();
ec_win_delete.unbind();
// 添加内容
cur_element.each(function () {
// 设置标题
ec_win_title.text(`当前元素:${this.tagName}`);
// 路径
cur_element.parents().filter('body *').each(function () {
let row = $(`<li><a style="color:#ff793f;" href="javascript:;">${this.tagName}</a></li>`);
ec_path_list.prepend(row);
let element = $(this);
row.find('a').bind('click', function () {
element.click();
});
});
ec_path_list.append(`<li>[ ${this.tagName} ]</li>`);
// 遍历属性
$.each(this.attributes, function () {
if (this.specified) {
if (this.name === 'style') {
// 单独处理样式
let style_list = this.value.split(';');
for (let j = 0; j < style_list.length; j++) {
let style = style_list[j];
if (style) {
let style_item = style.split(':');
let style_row = $(`<tr><th>${style_item[0]}</th><td><input type="text" value="${style.slice(style.indexOf(':') + 1)}" style="border:2px solid #eee;padding:0 8px; border-radius:2px;"></td></tr>`);
ec_win_style.append(style_row);
}
}
} else {
// 处理其他属性
let row = $(`<tr><th>${this.name}</th><td><input type="text" value="${this.value}" style="border:2px solid #eee;padding:0 8px; border-radius:2px;"></td></tr>`);
ec_win_attr.append(row);
}
}
});
});
// 生成子元素树
const genChildList = function (container, element, parent_li) {
const list = $('<ul style="list-style-type:circle; margin-left:2em;"></ul>');
element.children().each(function () {
let row = $(`<li><a style="color:#ff793f;" href="javascript:;">${this.tagName}</a></li>`);
let element = $(this);
row.find('a').bind('click', function () {
element.click();
return false;
});
list.append(row);
genChildList(list, element, row);
});
if (list.html()) {
container.append(list);
if (parent_li) {
parent_li.css('list-style-type', 'disc').on('click', function () {
list.slideToggle(200);
});
}
}
};
genChildList(ec_child_list, cur_element);
// html内容
ec_win_html.val(cur_element.html());
// 更新样式函数
function update_sytle(element) {
// 保存样式
let sytle_tr_list = ec_win_style.find('tr');
let style_text = '';
for (let i = 0; i < sytle_tr_list.length; i++) {
let tr = $(sytle_tr_list[i]);
if (tr.find('input').val()) {
style_text = style_text + tr.find('th').text() + ':' + tr.find('input').val() + ';';
}
}
element.attr('style', style_text);
}
// 添加样式按钮
ec_win_add_style.bind('click', function () {
let style_text = ec_win_input_style.val();
if (style_text) {
let temp = style_text.split(':');
ec_win_style.append(`<tr><th>${temp[0]}</th><td><input type="text" value="${temp.length > 1 ? temp[1].replace(';', '') : ''}" style="border:2px solid #eee;padding:0 8px; border-radius:2px;"></td></tr>`);
ec_win_input_style.val('');
}
update_sytle(cur_element);
});
// 保存按钮
ec_win_write.bind('click', function () {
update_sytle(cur_element);
// 保存属性
let tr_list = ec_win_attr.find('tr');
for (let i = 0; i < tr_list.length; i++) {
let tr = $(tr_list[i]);
cur_element.attr(tr.find('th').text(), tr.find('input').val());
}
// 保存内容
cur_element.html(ec_win_html.val());
});
// 父辈按钮
ec_win_parent.bind('click', function () {
cur_element.parent().click();
});
// 删除按钮
ec_win_delete.bind('click', function(){
let parent = cur_element.parent();
cur_element.remove();
parent.click();
});
return false;
}
// 为元素添加监听器
if ($(this).hasClass('running')) {
ec_window.fadeOut(200);
cur_editor.contents().find('body .binding').unbind().removeClass('binding');
$(this).removeClass('running');
// 解除标记
cur_editor.contents().find('body .ec-active').removeClass('ec-active');
const ec_change = $(this).find('#ec-change');
(ec_change.length ? ec_change : $(this)).css({ 'background-color': '#e8b004' }).text('编辑进化');
} else {
ec_window.fadeIn(200);
cur_editor.contents().find('body *:not(.binding,#ec-inject)').bind('click', element_click_func).addClass('binding');
$(this).addClass('running');
// 隐藏控件,显示提示
ec_window.find('*:not(style,#ec-default-tip)').hide();
ec_default_tip.show();
const ec_change = $(this).find('#ec-change');
(ec_change.length ? ec_change : $(this)).css({ 'background-color': '#20a162' }).text('解除进化');
}
};
// 执行函数
const run135 = function () {
// 解除模板会员限制
setInterval(() => {
let lis = $('#editor-template-scroll li');
for (let i = 0, len = lis.length; i < len; i++) {
lis[i].classList.remove('vip-style');
}
// vip删除线
$('.vip-flag').css('text-decoration', 'line-through');
// 去除小红点
$('.user-unread-msgnum').hide();
// 文章管理器会员
articleManager.setVIP(true);
}, 1000);
// 去除会员弹窗
window.style_click = window.show_role_vip_dialog = function () { };
// 伪装登录(不可用)
// window.loged_user = 1;
// 会员弹窗
$('#add_xiaoshi').hide();
// 顶部导航栏后两个按钮
$('.category-nav.editor-nav>.nav-item:nth-last-child(-n+2)').hide();
// 移除全局菜单中非功能设置按钮
$('#fixed-side-bar li:not(#function-settings), #fixed-bar-pack-up').hide();
// 颜色增强
let origin_color_div = $('#color-choosen>div:first-child'); // 原始
let complementary_color_div = origin_color_div.clone(); // 互补
origin_color_div.before($('<p style="color:#fff;">原始色</p>'));
origin_color_div.after(complementary_color_div);
origin_color_div.after($('<p style="color:#fff;">互补色</p>'));
$('#color-plan-list .color-swatch').on('click', function () {
let cur_color = $(this).attr('style').match(/background-color:\s?([^;]+)/)[1];
console.log(cur_color, getComplementaryColor(cur_color));
origin_color_div.children('input').css('color', getComplementaryColor(cur_color))
complementary_color_div.children('input').attr('value', getComplementaryColor(cur_color));
complementary_color_div.children('input').css({ 'color': cur_color, 'background-color': getComplementaryColor(cur_color) });
});
// 进化按钮
let evolution_btn = $('<li style="margin-bottom: 20px;"><a href="javascript:;" id="ec-change" class="btn btn-default btn-xs" title="绑定监听器">编辑进化</a></li>').on('click', evolution);
$('#operate-tool').prepend(evolution_btn);
// 色板按钮
let open_color_plan = $('<li><a href="javascript:;" class="btn btn-default btn-xs" title="打开色板">开关色板</a></li>')
.on('click', function () {
$('#color-plan').fadeToggle(300);
});
$('#operate-tool').prepend(open_color_plan);
};
const run96 = function () {
// vip样式
setInterval(() => {
$('.rich_media_content').attr('data-vip', 1);
}, 1000);
// 进化按钮
let evolution_btn = $('<button type="button" id="ec-change" class="layui-btn layui-btn-primary">编辑进化</button>').on('click', evolution);
$('.button-tools').prepend(evolution_btn);
};
const run365 = function () {
let evolution_btn = $('<li id="ec-change" data-act="import"><span>编辑进化</span></li>').on('click', evolution);
$('.m-tools').prepend(evolution_btn);
};
// 判断执行
ecInit();
const host = window.location.host;
if (host.search(/www.135editor.com/) >= 0) run135();
else if (host.search(/bj.96weixin.com/) >= 0) run96();
else if (host.search(/www.365editor.com/) >= 0) run365();
});