☰

switch content editable

open/close content editable （by alt+e）

  1. // ==UserScript==
  2. // @name         switch content editable
  3. // @name:zh      页面可编辑切换
  4. // @supportURL   https://github.com/rectcircle/switch-content-editable
  5. // @namespace    https://github.com/rectcircle/switch-content-editable
  6. // @license      MIT
  7. // @version      1.0.1
  8. // @description         open/close content editable （by alt+e）
  9. // @description:zh      打开或者关闭页面可编辑属性 （通过快捷键alt+e）
  10. // @author       Rectcircle <rectcircle96@gmail.com>
  11. // @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6ElEQVRYR+2WsWsUQRjF3zvWzG5wdyUpBUEEwaAoNiaKpZUg19gJgqV/gGLrH3CtnSKWFir2KVQigoUhAbER0QM7447Enb2c92Qh5+1pshfZXdLcdLvfx3u/fTN8O0TNK8tsW8JlCSdInZTwC+AaydVWi/dnZg6uFi1Zl7+kOMvsY4CXSjQFoGNMeIvkIO+rBUBK5rKMLwEs7PGDnhoTXiXZrwUgTe0LEhf3aL7dpnu+H9+sDOCcvQLgWdFcworn8Y7n5fu96WcZTkuDuyTOFfpEts5UBkhT+4jEtZGw3hkTnSWZ7/fYSlP7isSFwstOZQDn7AcAx4eiJNrGRGOJDGu9XrI4GPD18FnCmxoAkg2Ah0YAXDAmfL/TeZAUZdmPZASgz3UAfAcYD0WN0TwZf9vtQDpnfwII8rqEbgMA4RzJjd0Bkk2As1OA2hL4v+Hzb3flM1AZYGvLLvX76JBYrCo2Pg31FmjdDoJwuUyXaWpXSCzVaV7QWvf96NQkgC6Jw80AyPp+/GdG7OSRJzAFmCYwTWCawP4m4FzyEeDRJiahpC9BEB8pHcXO2ScA2k0AkHhgTHSjFGD7b/icxHydEBK+AgfOB0HwqRQgLzrnjkm9h3/d2avwLBvjXSdnu5NE9v9CMomw6fpvQxb8GB6gWFwAAAAASUVORK5CYII=
  12. // @include      *
  13. // @run-at       document-end
  14. // ==/UserScript==
  15.  
  16. //创建一个闭包，避免污染外部名字空间
  17. ;(function(){
  18. 	// 全局变量：记录`s`键是否松开状态
  19. 	var s_up = true;
  20. 	
  21. 	// 常量
  22. 	const lockIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACBElEQVRYR+2WPWsUURSG33fMztxrsrMoCn6gjRD8KtQgtraiVbRTbLSw1EYsLfwBFoLYpIqVaCPWFrFQ0EjQThQFjZXFzBJn7uLuK1PE3Wzi3F12Ail2yjnnPPeZMzPnXmLIy7nmRUnnJBwmdVziHwAfSS4FAefCcGppGCQHTZa0w7nmMwBnS2oE6EEUxTdJdgZhDyQgNXc7p1cApgeBAngRRfVZki1fvldAEp1L3wE86YP1xknMRVF8zVfjFXAuuSxxfi1In6XgujFTi8CKda49I+EhyYO9eUGwbSYMJxfLJLwCeZ4+B3BhFSLhhzH1YySTXrCU7MxzfiCxr3uf942p3xpJIMvSnyT2rEJIXYmixuONoM41ZyU97crqrbWN0yMJ5HnaBhB0IZo2pvFpI6i0ste59nJPt75bGx8YVaD4nf69qiiqT5L8/T9onqfFl18r4hKWrY33Vy2wnWRWIuAAhGOByjrgGySjxr1zYNQFfPXrBPI8OQ/gHsATvuIh4pLwZmICt2u1eGHNyO6HZFnyrX+kDrGQJ1XvjWmcKhVYP3gqXF74ZW28ayww7sC4A+MObPkOFIcNU9386yXpizGNQ569IH1N4szmCOCRMfGNUgHnmpckPdkEgUyqHbXWfi0VKIKtVnK10+EdAEcqECm24gWAd62tv+znbb0DSQVPPBTiL1ANFTDg1xUqAAAAAElFTkSuQmCC";
  23. 	const unlockIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6ElEQVRYR+2WsWsUQRjF3zvWzG5wdyUpBUEEwaAoNiaKpZUg19gJgqV/gGLrH3CtnSKWFir2KVQigoUhAbER0QM7447Enb2c92Qh5+1pshfZXdLcdLvfx3u/fTN8O0TNK8tsW8JlCSdInZTwC+AaydVWi/dnZg6uFi1Zl7+kOMvsY4CXSjQFoGNMeIvkIO+rBUBK5rKMLwEs7PGDnhoTXiXZrwUgTe0LEhf3aL7dpnu+H9+sDOCcvQLgWdFcworn8Y7n5fu96WcZTkuDuyTOFfpEts5UBkhT+4jEtZGw3hkTnSWZ7/fYSlP7isSFwstOZQDn7AcAx4eiJNrGRGOJDGu9XrI4GPD18FnCmxoAkg2Ah0YAXDAmfL/TeZAUZdmPZASgz3UAfAcYD0WN0TwZf9vtQDpnfwII8rqEbgMA4RzJjd0Bkk2As1OA2hL4v+Hzb3flM1AZYGvLLvX76JBYrCo2Pg31FmjdDoJwuUyXaWpXSCzVaV7QWvf96NQkgC6Jw80AyPp+/GdG7OSRJzAFmCYwTWCawP4m4FzyEeDRJiahpC9BEB8pHcXO2ScA2k0AkHhgTHSjFGD7b/icxHydEBK+AgfOB0HwqRQgLzrnjkm9h3/d2avwLBvjXSdnu5NE9v9CMomw6fpvQxb8GB6gWFwAAAAASUVORK5CYII=";
  24.  
  25. 	const lockText = "页面编辑已锁定";
  26. 	const unlockText = "页面编辑已解锁";
  27.  
  28. 	//提示窗口
  29. 	var tipDiv = document.createElement('div');
  30. 	tipDiv.style = 'z-index:200000000;background-color: #272822; color: #F8F8F2; position: fixed; right:40px; top:40px; padding: 10px 20px; font-size: 18px; border-radius: 6px; display: none;'; ;
  31. 	var tipInnerDiv = document.createElement('div');
  32. 	tipInnerDiv.style = 'height:40px; line-height:40px; text-align:center';
  33. 	var iconImg = document.createElement('img');
  34. 	iconImg.style = 'vertical-align:middle;'
  35. 	iconImg.src = unlockIcon;
  36. 	var tipText = document.createElement('span');
  37. 	tipText.style = 'vertical-align:middle;margin-left:10px;'
  38. 	tipText.textContent = unlockText
  39.  
  40. 	tipDiv.appendChild(tipInnerDiv);
  41. 	tipInnerDiv.appendChild(iconImg);
  42. 	tipInnerDiv.appendChild(tipText);
  43.  
  44. 	document.body.appendChild(tipDiv);
  45.  
  46. 	//定时器
  47. 	var timer=0;
  48.  
  49. 	//显示提示
  50. 	function showTips(nowStatus){
  51. 		if(nowStatus){
  52. 			iconImg.src = unlockIcon;
  53. 			tipText.textContent = unlockText;
  54. 		} else {
  55. 			iconImg.src = lockIcon;
  56. 			tipText.textContent = lockText;
  57. 		}
  58. 		clearTimeout(timer);
  59. 		timer = setTimeout(function () {
  60. 			tipDiv.style['display'] = 'none';
  61. 		}, 3000);
  62. 		tipDiv.style['display'] = 'block';
  63.  
  64. 	}
  65.  
  66. 	//切换页面可编辑状态
  67. 	function changeContentEditable(){
  68. 		var newStatus = document.body.contentEditable=="true"?false:true;
  69. 		document.body.contentEditable = newStatus;
  70. 		if (newStatus){
  71. 			document.body.focus();
  72. 		}
  73. 		tipDiv.contentEditable = "false";
  74. 		showTips(newStatus);
  75. 	}
  76.  
  77. 	document.addEventListener('keydown', function (e) {
  78. 		if(s_up==true && e.keyCode == 69 && e.altKey){
  79. 			changeContentEditable()
  80. 			s_up = false;
  81. 		}
  82. 	});
  83. 	document.addEventListener('keyup', function (e) {
  84. 		if (s_up == false && e.keyCode == 69) {
  85. 			s_up = true;
  86. 		}
  87. 	});
  88. })()