一键编辑网站内容

随便写的,所有网站通用,右下角有个编辑,点击就可以全局编辑了

目前为 2020-03-17 提交的版本。查看 最新版本

// ==UserScript==
// @name         一键编辑网站内容
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  随便写的,所有网站通用,右下角有个编辑,点击就可以全局编辑了
// @author       sunzehui
// @require      https://libs.baidu.com/jquery/1.7.2/jquery.min.js
// @match        https://*/*
// @match        http://*/*
// @grant        none
// ==/UserScript==
(function() {
var $editBtn=$('<span id="edit-html-Btn" title="一键编辑">编辑</span>')
var btnClass={
    'display': 'inline',
    'position': 'fixed',
    'right': '100px',
    'bottom': '20px',
    'z-index': '300',
    'width': '45px',
    'height': '45px',
    'border-radius': '10px',
    '-moz-border-radius': '10px',
    'background': '#2D6DCC',
    'color': '#FFF',
    'opacity': .8,
    'text-align': 'center',
    'line-height': '45px',
    'cursor':'pointer',
}
$editBtn.css(btnClass)
$('body').append($editBtn)
var btn = document.getElementById("edit-html-Btn");


$("#edit-html-Btn").click(function(){
  var body=document.querySelector("body");

  body.setAttribute('contenteditable', "true");
  console.log("success")
  showTips('修改成功!',200,2);
});
  
  



function showTips( content, height, time ){
    //窗口的宽度
    var windowWidth = $(window).width();
    var tipsDiv = '<div class="tipsClass">' + content + '</div>';
    $( 'body' ).append( tipsDiv );
    $( 'div.tipsClass' ).css({
        'top'       : height + 'px',
        'left'      : ( windowWidth / 2 ) - 350/2 + 'px',
        'position'  : 'absolute',
        'padding'   : '3px 5px',
        'background': '#8FBC8F',
        'font-size' : 12 + 'px',
        'margin'    : '0 auto',
        'text-align': 'center',
        'width'     : '350px',
        'height'    : 'auto',
        'color'     : '#fff',
        'opacity'   : '0.8'
    }).show();
    setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}
console.log("编辑脚本加载完毕")
})();