diff --git a/dist/css/medium-editor.css b/dist/css/medium-editor.css index 244f74c21..12375c5c2 100644 --- a/dist/css/medium-editor.css +++ b/dist/css/medium-editor.css @@ -159,10 +159,4 @@ font-size: 24px; } .medium-editor-placeholder { - position: relative; } - .medium-editor-placeholder:after { - position: absolute; - top: 0; - left: 0; - content: attr(data-placeholder); - font-style: italic; } + font-style: italic; } diff --git a/dist/css/medium-editor.min.css b/dist/css/medium-editor.min.css index a77196c4d..9c1312e5d 100644 --- a/dist/css/medium-editor.min.css +++ b/dist/css/medium-editor.min.css @@ -1 +1 @@ -.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}@-webkit-keyframes pop-upwards{0%{-webkit-transform:matrix(0.97,0,0,1,0,12);transform:matrix(0.97,0,0,1,0,12);opacity:0}20%{-webkit-transform:matrix(0.99,0,0,1,0,2);transform:matrix(0.99,0,0,1,0,2);opacity:.7}40%{-webkit-transform:matrix(1,0,0,1,0,-1);transform:matrix(1,0,0,1,0,-1);opacity:1}100%,70%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);opacity:1}}@keyframes pop-upwards{0%{-webkit-transform:matrix(0.97,0,0,1,0,12);transform:matrix(0.97,0,0,1,0,12);opacity:0}20%{-webkit-transform:matrix(0.99,0,0,1,0,2);transform:matrix(0.99,0,0,1,0,2);opacity:.7}40%{-webkit-transform:matrix(1,0,0,1,0,-1);transform:matrix(1,0,0,1,0,-1);opacity:1}100%,70%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);opacity:1}}.medium-toolbar-arrow-over:before,.medium-toolbar-arrow-under:after{position:absolute;left:50%;display:block;margin-left:-8px;width:0;height:0;border-style:solid;content:""}.medium-toolbar-arrow-under:after{border-width:8px 8px 0}.medium-toolbar-arrow-over:before{top:-8px;border-width:0 8px 8px}.medium-editor-anchor-preview,.medium-editor-toolbar{position:absolute;top:0;left:0;z-index:2000;visibility:hidden;font-size:16px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif}.medium-editor-anchor-preview ul,.medium-editor-toolbar ul{margin:0;padding:0}.medium-editor-anchor-preview li,.medium-editor-toolbar li{float:left;margin:0;padding:0;list-style:none}.medium-editor-anchor-preview li button,.medium-editor-toolbar li button{display:block;margin:0;padding:15px;cursor:pointer;font-size:14px;line-height:1.33;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-anchor-preview li .medium-editor-action-underline,.medium-editor-toolbar li .medium-editor-action-underline{text-decoration:underline}.medium-editor-anchor-preview li .medium-editor-action-pre,.medium-editor-toolbar li .medium-editor-action-pre{padding:15px 0;font-weight:100;font-size:12px;font-family:Menlo,monospace}.medium-editor-anchor-preview i{display:inline-block;margin:5px 5px 5px 10px;text-decoration:underline;font-style:normal;cursor:pointer}.medium-editor-anchor-preview-active,.medium-editor-toolbar-active{visibility:visible;-webkit-animation:pop-upwards 160ms forwards linear;-ms-animation:pop-upwards 160ms forwards linear;animation:pop-upwards 160ms forwards linear;-webkit-transition:top .075s ease-out,left .075s ease-out;transition:top .075s ease-out,left .075s ease-out}.medium-editor-action-bold{font-weight:bolder}.medium-editor-action-italic{font-style:italic}.medium-editor-toolbar-form-anchor{display:none}.medium-editor-toolbar-form-anchor a,.medium-editor-toolbar-form-anchor input{font-family:HelveticaNeue,Helvetica,Arial,sans-serif}.medium-editor-toolbar-form-anchor input{margin:0;padding:6px;width:316px;border:none;font-size:14px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-toolbar-form-anchor input:focus{outline:0;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none}.medium-editor-toolbar-form-anchor a{display:inline-block;margin:0 10px;text-decoration:none;font-weight:bolder;font-size:24px}.medium-editor-placeholder{position:relative}.medium-editor-placeholder:after{position:absolute;top:0;left:0;content:attr(data-placeholder);font-style:italic} \ No newline at end of file +.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}@-webkit-keyframes pop-upwards{0%{-webkit-transform:matrix(0.97,0,0,1,0,12);transform:matrix(0.97,0,0,1,0,12);opacity:0}20%{-webkit-transform:matrix(0.99,0,0,1,0,2);transform:matrix(0.99,0,0,1,0,2);opacity:.7}40%{-webkit-transform:matrix(1,0,0,1,0,-1);transform:matrix(1,0,0,1,0,-1);opacity:1}100%,70%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);opacity:1}}@keyframes pop-upwards{0%{-webkit-transform:matrix(0.97,0,0,1,0,12);transform:matrix(0.97,0,0,1,0,12);opacity:0}20%{-webkit-transform:matrix(0.99,0,0,1,0,2);transform:matrix(0.99,0,0,1,0,2);opacity:.7}40%{-webkit-transform:matrix(1,0,0,1,0,-1);transform:matrix(1,0,0,1,0,-1);opacity:1}100%,70%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);opacity:1}}.medium-toolbar-arrow-over:before,.medium-toolbar-arrow-under:after{position:absolute;left:50%;display:block;margin-left:-8px;width:0;height:0;border-style:solid;content:""}.medium-toolbar-arrow-under:after{border-width:8px 8px 0}.medium-toolbar-arrow-over:before{top:-8px;border-width:0 8px 8px}.medium-editor-anchor-preview,.medium-editor-toolbar{position:absolute;top:0;left:0;z-index:2000;visibility:hidden;font-size:16px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif}.medium-editor-anchor-preview ul,.medium-editor-toolbar ul{margin:0;padding:0}.medium-editor-anchor-preview li,.medium-editor-toolbar li{float:left;margin:0;padding:0;list-style:none}.medium-editor-anchor-preview li button,.medium-editor-toolbar li button{display:block;margin:0;padding:15px;cursor:pointer;font-size:14px;line-height:1.33;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-anchor-preview li .medium-editor-action-underline,.medium-editor-toolbar li .medium-editor-action-underline{text-decoration:underline}.medium-editor-anchor-preview li .medium-editor-action-pre,.medium-editor-toolbar li .medium-editor-action-pre{padding:15px 0;font-weight:100;font-size:12px;font-family:Menlo,monospace}.medium-editor-anchor-preview i{display:inline-block;margin:5px 5px 5px 10px;text-decoration:underline;font-style:normal;cursor:pointer}.medium-editor-anchor-preview-active,.medium-editor-toolbar-active{visibility:visible;-webkit-animation:pop-upwards 160ms forwards linear;-ms-animation:pop-upwards 160ms forwards linear;animation:pop-upwards 160ms forwards linear;-webkit-transition:top .075s ease-out,left .075s ease-out;transition:top .075s ease-out,left .075s ease-out}.medium-editor-action-bold{font-weight:bolder}.medium-editor-action-italic{font-style:italic}.medium-editor-toolbar-form-anchor{display:none}.medium-editor-toolbar-form-anchor a,.medium-editor-toolbar-form-anchor input{font-family:HelveticaNeue,Helvetica,Arial,sans-serif}.medium-editor-toolbar-form-anchor input{margin:0;padding:6px;width:316px;border:none;font-size:14px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-toolbar-form-anchor input:focus{outline:0;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none}.medium-editor-toolbar-form-anchor a{display:inline-block;margin:0 10px;text-decoration:none;font-weight:bolder;font-size:24px}.medium-editor-placeholder{font-style:italic} \ No newline at end of file diff --git a/dist/css/themes/default.css b/dist/css/themes/default.css index 1d035a7db..43a10b314 100644 --- a/dist/css/themes/default.css +++ b/dist/css/themes/default.css @@ -68,5 +68,5 @@ color: #fff; border-radius: 5px; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: #b3b3b1; } diff --git a/dist/css/themes/default.min.css b/dist/css/themes/default.min.css index c8755150b..ed7b1ba1e 100644 --- a/dist/css/themes/default.min.css +++ b/dist/css/themes/default.min.css @@ -1 +1 @@ -.medium-toolbar-arrow-under:after{top:50px;border-color:#242424 transparent transparent}.medium-toolbar-arrow-over:before{top:-8px;border-color:transparent transparent #242424}.medium-editor-toolbar{border:1px solid #000;background:-webkit-gradient(linear,left bottom,left top,from(#242424),to(rgba(36,36,36,.75)));background:-webkit-linear-gradient(bottom,#242424,rgba(36,36,36,.75));background:linear-gradient(bottom,#242424,rgba(36,36,36,.75));border-radius:5px;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000;-webkit-transition:top .075s ease-out,left .075s ease-out;transition:top .075s ease-out,left .075s ease-out}.medium-editor-toolbar li button{min-width:50px;height:50px;border:0;border-right:1px solid #000;border-left:1px solid #333;border-left:1px solid rgba(255,255,255,.1);color:#fff;background:-webkit-gradient(linear,left bottom,left top,from(#242424),to(rgba(36,36,36,.89)));background:-webkit-linear-gradient(bottom,#242424,rgba(36,36,36,.89));background:linear-gradient(bottom,#242424,rgba(36,36,36,.89));-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3);box-shadow:0 2px 2px rgba(0,0,0,.3);-webkit-transition:background-color .2s ease-in;transition:background-color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#000;color:#ff0}.medium-editor-toolbar li .medium-editor-button-first{border-top-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{border-top-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{color:#fff;background:-webkit-gradient(linear,left bottom,left top,from(#242424),to(rgba(0,0,0,.89)));background:-webkit-linear-gradient(bottom,#242424,rgba(0,0,0,.89));background:linear-gradient(bottom,#242424,rgba(0,0,0,.89))}.medium-editor-toolbar-form-anchor{background:#242424;color:#999;border-radius:5px}.medium-editor-toolbar-form-anchor input{height:50px;background:#242424;color:#ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-toolbar-form-anchor a{color:#fff}.medium-editor-toolbar-anchor-preview{background:#242424;color:#fff;border-radius:5px}.medium-editor-placeholder:after{color:#b3b3b1} \ No newline at end of file +.medium-toolbar-arrow-under:after{top:50px;border-color:#242424 transparent transparent}.medium-toolbar-arrow-over:before{top:-8px;border-color:transparent transparent #242424}.medium-editor-toolbar{border:1px solid #000;background:-webkit-gradient(linear,left bottom,left top,from(#242424),to(rgba(36,36,36,.75)));background:-webkit-linear-gradient(bottom,#242424,rgba(36,36,36,.75));background:linear-gradient(bottom,#242424,rgba(36,36,36,.75));border-radius:5px;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000;-webkit-transition:top .075s ease-out,left .075s ease-out;transition:top .075s ease-out,left .075s ease-out}.medium-editor-toolbar li button{min-width:50px;height:50px;border:0;border-right:1px solid #000;border-left:1px solid #333;border-left:1px solid rgba(255,255,255,.1);color:#fff;background:-webkit-gradient(linear,left bottom,left top,from(#242424),to(rgba(36,36,36,.89)));background:-webkit-linear-gradient(bottom,#242424,rgba(36,36,36,.89));background:linear-gradient(bottom,#242424,rgba(36,36,36,.89));-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3);box-shadow:0 2px 2px rgba(0,0,0,.3);-webkit-transition:background-color .2s ease-in;transition:background-color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#000;color:#ff0}.medium-editor-toolbar li .medium-editor-button-first{border-top-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{border-top-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{color:#fff;background:-webkit-gradient(linear,left bottom,left top,from(#242424),to(rgba(0,0,0,.89)));background:-webkit-linear-gradient(bottom,#242424,rgba(0,0,0,.89));background:linear-gradient(bottom,#242424,rgba(0,0,0,.89))}.medium-editor-toolbar-form-anchor{background:#242424;color:#999;border-radius:5px}.medium-editor-toolbar-form-anchor input{height:50px;background:#242424;color:#ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-toolbar-form-anchor a{color:#fff}.medium-editor-toolbar-anchor-preview{background:#242424;color:#fff;border-radius:5px}.medium-editor-placeholder{color:#b3b3b1} \ No newline at end of file diff --git a/dist/css/themes/flat.css b/dist/css/themes/flat.css index 293b92ce9..fc80395c0 100644 --- a/dist/css/themes/flat.css +++ b/dist/css/themes/flat.css @@ -53,5 +53,5 @@ background: #57ad68; color: #fff; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: #fff; } diff --git a/dist/css/themes/flat.min.css b/dist/css/themes/flat.min.css index bec8c652a..3ef21e9dc 100644 --- a/dist/css/themes/flat.min.css +++ b/dist/css/themes/flat.min.css @@ -1 +1 @@ -.medium-toolbar-arrow-under:after{top:60px;border-color:#57ad68 transparent transparent}.medium-toolbar-arrow-over:before{top:-8px;border-color:transparent transparent #57ad68}.medium-editor-toolbar{background-color:#57ad68}.medium-editor-toolbar li{padding:0}.medium-editor-toolbar li button{min-width:60px;height:60px;border:none;border-right:1px solid #9ccea5;background-color:transparent;color:#fff;-webkit-transition:background-color .2s ease-in,color .2s ease-in;transition:background-color .2s ease-in,color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#346a3e;color:#fff}.medium-editor-toolbar li .medium-editor-button-active{background-color:#23482a;color:#fff}.medium-editor-toolbar li .medium-editor-button-last{border-right:none}.medium-editor-toolbar-form-anchor input{height:60px;background:#57ad68;color:#fff}.medium-editor-toolbar-form-anchor input::-webkit-input-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor input:-moz-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor input::-moz-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor input:-ms-input-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor a{color:#fff}.medium-editor-toolbar-anchor-preview{background:#57ad68;color:#fff}.medium-editor-placeholder:after{color:#fff} \ No newline at end of file +.medium-toolbar-arrow-under:after{top:60px;border-color:#57ad68 transparent transparent}.medium-toolbar-arrow-over:before{top:-8px;border-color:transparent transparent #57ad68}.medium-editor-toolbar{background-color:#57ad68}.medium-editor-toolbar li{padding:0}.medium-editor-toolbar li button{min-width:60px;height:60px;border:none;border-right:1px solid #9ccea5;background-color:transparent;color:#fff;-webkit-transition:background-color .2s ease-in,color .2s ease-in;transition:background-color .2s ease-in,color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#346a3e;color:#fff}.medium-editor-toolbar li .medium-editor-button-active{background-color:#23482a;color:#fff}.medium-editor-toolbar li .medium-editor-button-last{border-right:none}.medium-editor-toolbar-form-anchor input{height:60px;background:#57ad68;color:#fff}.medium-editor-toolbar-form-anchor input::-webkit-input-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor input:-moz-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor input::-moz-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor input:-ms-input-placeholder{color:#fff;color:rgba(255,255,255,.8)}.medium-editor-toolbar-form-anchor a{color:#fff}.medium-editor-toolbar-anchor-preview{background:#57ad68;color:#fff}.medium-editor-placeholder{color:#fff} \ No newline at end of file diff --git a/dist/css/themes/mani.css b/dist/css/themes/mani.css index bbc727f5a..1be66bc21 100644 --- a/dist/css/themes/mani.css +++ b/dist/css/themes/mani.css @@ -57,5 +57,5 @@ color: #40648a; border-radius: 2px; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: #cdd6e0; } diff --git a/dist/css/themes/mani.min.css b/dist/css/themes/mani.min.css index 77215e12e..421d14ede 100644 --- a/dist/css/themes/mani.min.css +++ b/dist/css/themes/mani.min.css @@ -1 +1 @@ -.medium-toolbar-arrow-over:before,.medium-toolbar-arrow-under:after{display:none}.medium-editor-toolbar{border:1px solid #cdd6e0;background:-webkit-gradient(linear,left bottom,left top,from(#dee7f0),to(#fff));background:-webkit-linear-gradient(bottom,#dee7f0,#fff);background:linear-gradient(bottom,#dee7f0,#fff);border-radius:2px;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.45);box-shadow:0 2px 6px rgba(0,0,0,.45)}.medium-editor-toolbar li button{min-width:50px;height:50px;border:none;border-right:1px solid #cdd6e0;background-color:transparent;color:#40648a;-webkit-transition:background-color .2s ease-in,color .2s ease-in;transition:background-color .2s ease-in,color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#5c90c7;background-color:rgba(92,144,199,.45);color:#fff}.medium-editor-toolbar li .medium-editor-button-first{border-top-left-radius:2px;border-bottom-left-radius:2px}.medium-editor-toolbar li .medium-editor-button-last{border-top-right-radius:2px;border-bottom-right-radius:2px}.medium-editor-toolbar li .medium-editor-button-active{color:#000;background:-webkit-gradient(linear,left bottom,left top,from(#dee7f0),to(rgba(0,0,0,.1)));background:-webkit-linear-gradient(bottom,#dee7f0,rgba(0,0,0,.1));background:linear-gradient(bottom,#dee7f0,rgba(0,0,0,.1))}.medium-editor-toolbar-form-anchor{background:#dee7f0;color:#999;border-radius:2px}.medium-editor-toolbar-form-anchor input{height:50px;background:#dee7f0;color:#40648a;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-toolbar-form-anchor a{color:#40648a}.medium-editor-toolbar-anchor-preview{background:#dee7f0;color:#40648a;border-radius:2px}.medium-editor-placeholder:after{color:#cdd6e0} \ No newline at end of file +.medium-toolbar-arrow-over:before,.medium-toolbar-arrow-under:after{display:none}.medium-editor-toolbar{border:1px solid #cdd6e0;background:-webkit-gradient(linear,left bottom,left top,from(#dee7f0),to(#fff));background:-webkit-linear-gradient(bottom,#dee7f0,#fff);background:linear-gradient(bottom,#dee7f0,#fff);border-radius:2px;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.45);box-shadow:0 2px 6px rgba(0,0,0,.45)}.medium-editor-toolbar li button{min-width:50px;height:50px;border:none;border-right:1px solid #cdd6e0;background-color:transparent;color:#40648a;-webkit-transition:background-color .2s ease-in,color .2s ease-in;transition:background-color .2s ease-in,color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#5c90c7;background-color:rgba(92,144,199,.45);color:#fff}.medium-editor-toolbar li .medium-editor-button-first{border-top-left-radius:2px;border-bottom-left-radius:2px}.medium-editor-toolbar li .medium-editor-button-last{border-top-right-radius:2px;border-bottom-right-radius:2px}.medium-editor-toolbar li .medium-editor-button-active{color:#000;background:-webkit-gradient(linear,left bottom,left top,from(#dee7f0),to(rgba(0,0,0,.1)));background:-webkit-linear-gradient(bottom,#dee7f0,rgba(0,0,0,.1));background:linear-gradient(bottom,#dee7f0,rgba(0,0,0,.1))}.medium-editor-toolbar-form-anchor{background:#dee7f0;color:#999;border-radius:2px}.medium-editor-toolbar-form-anchor input{height:50px;background:#dee7f0;color:#40648a;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.medium-editor-toolbar-form-anchor a{color:#40648a}.medium-editor-toolbar-anchor-preview{background:#dee7f0;color:#40648a;border-radius:2px}.medium-editor-placeholder{color:#cdd6e0} \ No newline at end of file diff --git a/dist/css/themes/roman.css b/dist/css/themes/roman.css index 295695697..cc6674cc6 100644 --- a/dist/css/themes/roman.css +++ b/dist/css/themes/roman.css @@ -57,5 +57,5 @@ color: #889aac; border-radius: 5px; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: #a8a8a8; } diff --git a/dist/css/themes/roman.min.css b/dist/css/themes/roman.min.css index 5868a1a91..bdf98f973 100644 --- a/dist/css/themes/roman.min.css +++ b/dist/css/themes/roman.min.css @@ -1 +1 @@ -.medium-toolbar-arrow-over:before,.medium-toolbar-arrow-under:after{display:none}.medium-editor-toolbar{background-color:#fff;background-color:rgba(255,255,255,.95);border-radius:5px;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.45);box-shadow:0 2px 6px rgba(0,0,0,.45)}.medium-editor-toolbar li button{min-width:50px;height:50px;border:none;border-right:1px solid #a8a8a8;color:#889aac;-webkit-box-shadow:inset 0 0 3px #f8f8e6;box-shadow:inset 0 0 3px #f8f8e6;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(rgba(0,0,0,.1)));background:-webkit-linear-gradient(top,#fff,rgba(0,0,0,.1));background:linear-gradient(top,#fff,rgba(0,0,0,.1));text-shadow:1px 4px 6px #def,0 0 0 #000,1px 4px 6px #def;-webkit-transition:background-color .2s ease-in;transition:background-color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#fff;color:#000;color:rgba(0,0,0,.8)}.medium-editor-toolbar li .medium-editor-button-first{border-top-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{border-top-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{color:#000;color:rgba(0,0,0,.8);background:-webkit-gradient(linear,left bottom,left top,from(#fff),to(rgba(0,0,0,.2)));background:-webkit-linear-gradient(bottom,#fff,rgba(0,0,0,.2));background:linear-gradient(bottom,#fff,rgba(0,0,0,.2))}.medium-editor-toolbar-form-anchor{background:#fff;color:#999;border-radius:5px}.medium-editor-toolbar-form-anchor input{margin:0;height:50px;background:#fff;color:#a8a8a8}.medium-editor-toolbar-form-anchor a{color:#889aac}.medium-editor-toolbar-anchor-preview{background:#fff;color:#889aac;border-radius:5px}.medium-editor-placeholder:after{color:#a8a8a8} \ No newline at end of file +.medium-toolbar-arrow-over:before,.medium-toolbar-arrow-under:after{display:none}.medium-editor-toolbar{background-color:#fff;background-color:rgba(255,255,255,.95);border-radius:5px;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.45);box-shadow:0 2px 6px rgba(0,0,0,.45)}.medium-editor-toolbar li button{min-width:50px;height:50px;border:none;border-right:1px solid #a8a8a8;color:#889aac;-webkit-box-shadow:inset 0 0 3px #f8f8e6;box-shadow:inset 0 0 3px #f8f8e6;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(rgba(0,0,0,.1)));background:-webkit-linear-gradient(top,#fff,rgba(0,0,0,.1));background:linear-gradient(top,#fff,rgba(0,0,0,.1));text-shadow:1px 4px 6px #def,0 0 0 #000,1px 4px 6px #def;-webkit-transition:background-color .2s ease-in;transition:background-color .2s ease-in}.medium-editor-toolbar li button:hover{background-color:#fff;color:#000;color:rgba(0,0,0,.8)}.medium-editor-toolbar li .medium-editor-button-first{border-top-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{border-top-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{color:#000;color:rgba(0,0,0,.8);background:-webkit-gradient(linear,left bottom,left top,from(#fff),to(rgba(0,0,0,.2)));background:-webkit-linear-gradient(bottom,#fff,rgba(0,0,0,.2));background:linear-gradient(bottom,#fff,rgba(0,0,0,.2))}.medium-editor-toolbar-form-anchor{background:#fff;color:#999;border-radius:5px}.medium-editor-toolbar-form-anchor input{margin:0;height:50px;background:#fff;color:#a8a8a8}.medium-editor-toolbar-form-anchor a{color:#889aac}.medium-editor-toolbar-anchor-preview{background:#fff;color:#889aac;border-radius:5px}.medium-editor-placeholder{color:#a8a8a8} \ No newline at end of file diff --git a/dist/js/medium-editor.js b/dist/js/medium-editor.js index 2c7a343f2..a6a3337ea 100644 --- a/dist/js/medium-editor.js +++ b/dist/js/medium-editor.js @@ -60,35 +60,78 @@ if (typeof module === 'object') { return startNode; } - // http://stackoverflow.com/questions/4176923/html-of-selected-text - // by Tim Down + // http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity + // by Nico Burns + // param position: true left, false right. + function setCursorPosition(el, position) { + var range,selection,ps,node; + + ps = el.getElementsByTagName('p'); + if (ps.length > 0) { + node = ps[position ? 0 : ps.length - 1]; + } else { + node = el; + } + + if(document.createRange) { //Firefox, Chrome, Opera, Safari, IE 9+ + range = document.createRange();//Create a range (a range is a like the selection but invisible) + + range.selectNodeContents(node);//Select the entire contents of the element with the range + range.collapse(position);//collapse the range to the end point. false means collapse to end rather than the start + selection = window.getSelection();//get the selection object (allows you to change selection) + selection.removeAllRanges();//remove any selections already made + selection.addRange(range);//make the range you have just created the visible selection + } else if(document.selection) { //IE 8 and lower + range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) + range.moveToElementText(node);//Select the entire contents of the element with the range + range.collapse(position);//collapse the range to the end point. false means collapse to end rather than the start + range.select();//Select the range (make it the visible selection + } + } + + // https://github.com/jashkenas/underscore + function isElement(obj) { + return !!(obj && obj.nodeType === 1); + } + function getSelectionHtml() { - var i, - html = '', - sel, - len, - container; + var html = "", sel, container, i, len; if (window.getSelection !== undefined) { sel = window.getSelection(); if (sel.rangeCount) { - container = document.createElement('div'); + container = document.createElement("div"); for (i = 0, len = sel.rangeCount; i < len; i += 1) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (document.selection !== undefined) { - if (document.selection.type === 'Text') { + if (document.selection.type === "Text") { html = document.selection.createRange().htmlText; } } return html; } - // https://github.com/jashkenas/underscore - function isElement(obj) { - return !!(obj && obj.nodeType === 1); - } + MediumEditor.activatePlaceholder = function (el) { + var isEmpty = !(el.querySelector('img')) && + el.textContent.replace(/^\s+|\s+$/g, '') === '', + p, placeholder; + + if (isEmpty) { + el.innerHTML = ''; + p = document.createElement('p'); + placeholder = document.createElement('span'); + placeholder.innerHTML = el.getAttribute('data-placeholder'); + placeholder.className = 'medium-editor-placeholder'; + placeholder.setAttribute('contenteditable', 'false'); + p.appendChild(placeholder); + el.appendChild(p); + } + + el.setAttribute('data-isempty', isEmpty); + return isEmpty; + }; MediumEditor.prototype = { defaults: { @@ -188,11 +231,20 @@ if (typeof module === 'object') { serialize: function () { var i, elementid, - content = {}; + content = {}, + value, + holderExp = /[\w\W]*<\/span>/m; for (i = 0; i < this.elements.length; i += 1) { elementid = (this.elements[i].id !== '') ? this.elements[i].id : 'element-' + i; + value = this.elements[i].innerHTML.trim(); + if (holderExp.test(value)) { // if there if placeholder, make it empty. + value = ''; + } else if (this.options.disableReturn || this.elements[i].getAttribute('data-disable-return')) { + // if return is disabled, remove the html markups. + value = value.replace(/^

([\w\W]*)<\/p>$/, '$1'); + } content[elementid] = { - value: this.elements[i].innerHTML.trim() + value: value }; } return content; @@ -1171,25 +1223,83 @@ if (typeof module === 'object') { return this; }, + reset: function() { + var i; + for (i = 0; i < this.elements.length; i += 1) { + MediumEditor.activatePlaceholder(this.elements[i]); + } + }, + setPlaceholders: function () { var i, - activatePlaceholder = function (el) { - if (!(el.querySelector('img')) && - !(el.querySelector('blockquote')) && - el.textContent.replace(/^\s+|\s+$/g, '') === '') { - el.classList.add('medium-editor-placeholder'); + clearPlaceholder = function(el) { + var placeholder = el.querySelector('.medium-editor-placeholder'); + if (placeholder) { + placeholder.parentNode.removeChild(placeholder); + el.setAttribute('data-isempty', 'false'); } }, placeholderWrapper = function (e) { - this.classList.remove('medium-editor-placeholder'); - if (e.type !== 'keypress') { - activatePlaceholder(this); + clearPlaceholder(this); + if (e.type === 'blur') { + MediumEditor.activatePlaceholder(this); + } + }, + keydownHandler = function(e) { + var which = e.keyCode || e.which; + if (which === 229 || (which >= 65 && which <= 90)) { + clearPlaceholder(this); + } + if (this.getAttribute('data-isempty') === 'true' && ((which >= 37 && which <= 40) || which === 8 || which === 46)) { + e.preventDefault(); + } + }, + mousedownHandler = function(e) { + if (document.activeElement !== this) { + this.setAttribute('data-mousedown', 'true'); + } + + if (this.getAttribute('data-isempty') === 'true') { + e.preventDefault(); + this.focus(); + } + }, + focusHandler = function(e) { + var isEmpty, isClick, html; + + isEmpty = this.getAttribute('data-isempty') === 'true'; + isClick = this.getAttribute('data-mousedown') === 'true'; + if (isClick) { + this.removeAttribute('data-mousedown'); + if (!isEmpty) { + return; + } + } + console.log('isclick: ' + isClick); + console.log('setCursorPosition'); + + html = getSelectionHtml(); + if (!html) { // 没有选中内容时才会设置光标位置 + setCursorPosition(this, isEmpty); + e.preventDefault(); + } + }, + keyupHandler = function(e) { + var which = e.keyCode || e.which; + if (which === 8 || which === 46) { + if (MediumEditor.activatePlaceholder(this)) { + setCursorPosition(this, true); + } } }; for (i = 0; i < this.elements.length; i += 1) { - activatePlaceholder(this.elements[i]); + MediumEditor.activatePlaceholder(this.elements[i]); this.elements[i].addEventListener('blur', placeholderWrapper); this.elements[i].addEventListener('keypress', placeholderWrapper); + this.elements[i].addEventListener('keydown', keydownHandler); + this.elements[i].addEventListener('mousedown', mousedownHandler); + this.elements[i].addEventListener('focus', focusHandler); + this.elements[i].addEventListener('keyup', keyupHandler); } return this; }, diff --git a/dist/js/medium-editor.min.js b/dist/js/medium-editor.min.js index f86428c2b..6c87b8825 100644 --- a/dist/js/medium-editor.min.js +++ b/dist/js/medium-editor.min.js @@ -1 +1 @@ -function MediumEditor(a,b){"use strict";return this.init(a,b)}"object"==typeof module&&(module.exports=MediumEditor),function(a,b){"use strict";function c(a,b){var c;if(void 0===a)return b;for(c in b)b.hasOwnProperty(c)&&a.hasOwnProperty(c)===!1&&(a[c]=b[c]);return a}function d(){var b,c,d,e=a.getSelection();if(e.getRangeAt&&e.rangeCount){for(d=[],b=0,c=e.rangeCount;c>b;b+=1)d.push(e.getRangeAt(b));return d}return null}function e(b){var c,d,e=a.getSelection();if(b)for(e.removeAllRanges(),c=0,d=b.length;d>c;c+=1)e.addRange(b[c])}function f(){var a=b.getSelection().anchorNode,c=a&&3===a.nodeType?a.parentNode:a;return c}function g(){var c,d,e,f,g="";if(void 0!==a.getSelection){if(d=a.getSelection(),d.rangeCount){for(f=b.createElement("div"),c=0,e=d.rangeCount;e>c;c+=1)f.appendChild(d.getRangeAt(c).cloneContents());g=f.innerHTML}}else void 0!==b.selection&&"Text"===b.selection.type&&(g=b.selection.createRange().htmlText);return g}function h(a){return!(!a||1!==a.nodeType)}MediumEditor.prototype={defaults:{allowMultiParagraphSelection:!0,anchorInputPlaceholder:"Paste or type a link",anchorPreviewHideDelay:500,buttons:["bold","italic","underline","anchor","header1","header2","quote"],buttonLabels:!1,checkLinkFormat:!1,cleanPastedHTML:!1,delay:0,diffLeft:0,diffTop:-10,disableReturn:!1,disableDoubleReturn:!1,disableToolbar:!1,disableEditing:!1,elementsContainer:!1,firstHeader:"h3",forcePlainText:!0,placeholder:"Type your text",secondHeader:"h4",targetBlank:!1,extensions:{},activeButtonClass:"medium-editor-button-active",firstButtonClass:"medium-editor-button-first",lastButtonClass:"medium-editor-button-last"},isIE:"Microsoft Internet Explorer"===navigator.appName||"Netscape"===navigator.appName&&null!==new RegExp("Trident/.*rv:([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent),init:function(a,d){return this.setElementSelection(a),0!==this.elements.length?(this.parentElements=["p","h1","h2","h3","h4","h5","h6","blockquote","pre"],this.id=b.querySelectorAll(".medium-editor-toolbar").length+1,this.options=c(d,this.defaults),this.setup()):void 0},setup:function(){this.isActive=!0,this.initElements().bindSelect().bindPaste().setPlaceholders().bindWindowActions().passInstance()},initElements:function(){this.updateElementList();var a,c=!1;for(a=0;a'+b.bold+"",italic:'",underline:'",strikethrough:'',superscript:'",subscript:'",anchor:'",image:'",header1:'",header2:'",quote:'",orderedlist:'",unorderedlist:'",pre:'",indent:'",outdent:'"};return c[a]||!1},getButtonLabels:function(a){var b,c,d={bold:"B",italic:"I",underline:"U",superscript:"x1",subscript:"x1",anchor:"#",image:"image",header1:"H1",header2:"H2",quote:"“",orderedlist:"1.",unorderedlist:"•",pre:"0101",indent:"→",outdent:"←"};if("fontawesome"===a?b={bold:'',italic:'',underline:'',superscript:'',subscript:'',anchor:'',image:'',quote:'',orderedlist:'',unorderedlist:'',pre:'',indent:'',outdent:''}:"object"==typeof a&&(b=a),"object"==typeof b)for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d},initToolbar:function(){return this.toolbar?this:(this.toolbar=this.createToolbar(),this.keepToolbarAlive=!1,this.anchorForm=this.toolbar.querySelector(".medium-editor-toolbar-form-anchor"),this.anchorInput=this.anchorForm.querySelector("input"),this.toolbarActions=this.toolbar.querySelector(".medium-editor-toolbar-actions"),this.anchorPreview=this.createAnchorPreview(),this)},createToolbar:function(){var a=b.createElement("div");return a.id="medium-editor-toolbar-"+this.id,a.className="medium-editor-toolbar",a.appendChild(this.toolbarButtons()),a.appendChild(this.toolbarFormAnchor()),this.options.elementsContainer.appendChild(a),a},toolbarButtons:function(){var a,c,d,e,f=this.options.buttons,g=b.createElement("ul");for(g.id="medium-editor-toolbar-actions",g.className="medium-editor-toolbar-actions clearfix",c=0;c<\/[\S]+>/gim,""),b=a.match(/<(p|h[0-6]|blockquote)>([\s\S]*?)<\/(p|h[0-6]|blockquote)>/g);return b?b.length:0},checkSelectionElement:function(a,b){var c;for(this.selection=a,this.selectionRange=this.selection.getRangeAt(0),c=0;cg?f+h+"px":a.innerWidth-g-1?this.classList.remove(c.options.activeButtonClass):this.className+=" "+c.options.activeButtonClass,this.hasAttribute("data-action")&&c.execAction(this.getAttribute("data-action"),a)};for(a=0;a0&&(a[0].className+=" "+this.options.firstButtonClass,a[a.length-1].className+=" "+this.options.lastButtonClass),this},execAction:function(c,d){c.indexOf("append-")>-1?(this.execFormatBlock(c.replace("append-","")),this.setToolbarPosition(),this.setToolbarButtonStates()):"anchor"===c?this.triggerAnchorAction(d):"image"===c?b.execCommand("insertImage",!1,a.getSelection()):(b.execCommand(c,!1,null),this.setToolbarPosition())},rangeSelectsSingleNode:function(a){var b=a.startContainer;return b===a.endContainer&&b.hasChildNodes()&&a.endOffset===a.startOffset+1},getSelectedParentElement:function(){var a=null,b=this.selectionRange;return a=this.rangeSelectsSingleNode(b)?b.startContainer.childNodes[b.startOffset]:3===b.startContainer.nodeType?b.startContainer.parentNode:b.startContainer},triggerAnchorAction:function(){var a=this.getSelectedParentElement();return a.tagName&&"a"===a.tagName.toLowerCase()?b.execCommand("unlink",!1,null):"block"===this.anchorForm.style.display?this.showToolbarActions():this.showAnchorForm(),this},execFormatBlock:function(a){var c=this.getSelectionData(this.selection.anchorNode);if("blockquote"===a&&c.el&&"blockquote"===c.el.parentNode.tagName.toLowerCase())return b.execCommand("outdent",!1,null);if(c.tagName===a&&(a="p"),this.isIE){if("blockquote"===a)return b.execCommand("indent",!1,a);a="<"+a+">"}return b.execCommand("formatBlock",!1,a)},getSelectionData:function(a){var b;for(a&&a.tagName&&(b=a.tagName.toLowerCase());a&&-1===this.parentElements.indexOf(b);)a=a.parentNode,a&&a.tagName&&(b=a.tagName.toLowerCase());return{el:a,tagName:b}},getFirstChild:function(a){for(var b=a.firstChild;null!==b&&1!==b.nodeType;)b=b.nextSibling;return b},hideToolbarActions:function(){this.keepToolbarAlive=!1,void 0!==this.toolbar&&this.toolbar.classList.remove("medium-editor-toolbar-active")},showToolbarActions:function(){var a,b=this;this.anchorForm.style.display="none",this.toolbarActions.style.display="block",this.keepToolbarAlive=!1,clearTimeout(a),a=setTimeout(function(){b.toolbar&&!b.toolbar.classList.contains("medium-editor-toolbar-active")&&b.toolbar.classList.add("medium-editor-toolbar-active")},100)},saveSelection:function(){this.savedSelection=d()},restoreSelection:function(){e(this.savedSelection)},showAnchorForm:function(a){this.toolbarActions.style.display="none",this.saveSelection(),this.anchorForm.style.display="block",this.keepToolbarAlive=!0,this.anchorInput.focus(),this.anchorInput.value=a||""},bindAnchorForm:function(){var a=this.anchorForm.querySelector("a"),b=this;return this.anchorForm.addEventListener("click",function(a){a.stopPropagation()}),this.anchorInput.addEventListener("keyup",function(a){13===a.keyCode&&(a.preventDefault(),b.createLink(this))}),this.anchorInput.addEventListener("click",function(a){a.stopPropagation(),b.keepToolbarAlive=!0}),this.anchorInput.addEventListener("blur",function(){b.keepToolbarAlive=!1,b.checkSelection()}),a.addEventListener("click",function(a){a.preventDefault(),b.showToolbarActions(),e(b.savedSelection)}),this},hideAnchorPreview:function(){this.anchorPreview.classList.remove("medium-editor-anchor-preview-active")},showAnchorPreview:function(b){if(this.anchorPreview.classList.contains("medium-editor-anchor-preview-active"))return!0;var c,d,e,f=this,g=40,h=b.getBoundingClientRect(),i=(h.left+h.right)/2;return f.anchorPreview.querySelector("i").textContent=b.href,c=f.anchorPreview.offsetWidth/2,d=f.options.diffLeft-c,clearTimeout(e),e=setTimeout(function(){f.anchorPreview&&!f.anchorPreview.classList.contains("medium-editor-anchor-preview-active")&&f.anchorPreview.classList.add("medium-editor-anchor-preview-active")},100),f.observeAnchorPreview(b),f.anchorPreview.classList.add("medium-toolbar-arrow-over"),f.anchorPreview.classList.remove("medium-toolbar-arrow-under"),f.anchorPreview.style.top=Math.round(g+h.bottom-f.options.diffTop+a.pageYOffset-f.anchorPreview.offsetHeight)+"px",f.anchorPreview.style.left=c>i?d+c+"px":a.innerWidth-ib.options.anchorPreviewHideDelay&&(b.hideAnchorPreview(),clearInterval(g),b.anchorPreview.removeEventListener("mouseover",e),b.anchorPreview.removeEventListener("mouseout",f),a.removeEventListener("mouseover",e),a.removeEventListener("mouseout",f))},200);b.anchorPreview.addEventListener("mouseover",e),b.anchorPreview.addEventListener("mouseout",f),a.addEventListener("mouseover",e),a.addEventListener("mouseout",f)},createAnchorPreview:function(){var a=this,c=b.createElement("div");return c.id="medium-editor-anchor-preview-"+this.id,c.className="medium-editor-anchor-preview",c.innerHTML=this.anchorPreviewTemplate(),this.options.elementsContainer.appendChild(c),c.addEventListener("click",function(){a.anchorPreviewClickHandler()}),c},anchorPreviewTemplate:function(){return'

'},anchorPreviewClickHandler:function(){if(this.activeAnchor){var c=this,d=b.createRange(),e=a.getSelection();d.selectNodeContents(c.activeAnchor),e.removeAllRanges(),e.addRange(d),setTimeout(function(){c.activeAnchor&&c.showAnchorForm(c.activeAnchor.href),c.keepToolbarAlive=!1},100+c.options.delay)}this.hideAnchorPreview()},editorAnchorObserver:function(a){var b=this,c=!0,d=function(){c=!1,b.activeAnchor.removeEventListener("mouseout",d)};if(a.target&&"a"===a.target.tagName.toLowerCase()){if(!/href=["']\S+["']/.test(a.target.outerHTML)||/href=["']#\S+["']/.test(a.target.outerHTML))return!0;if(this.toolbar.classList.contains("medium-editor-toolbar-active"))return!0;this.activeAnchor=a.target,this.activeAnchor.addEventListener("mouseout",d),setTimeout(function(){c&&b.showAnchorPreview(a.target)},b.options.delay)}},bindAnchorPreview:function(){var a,b=this;for(this.editorAnchorObserverWrapper=function(a){b.editorAnchorObserver(a)},a=0;a/g,">").replace(/"/g,""")},bindPaste:function(){var a,c=this;for(this.pasteWrapper=function(a){var d,e,f="";if(this.classList.remove("medium-editor-placeholder"),!c.options.forcePlainText&&!c.options.cleanPastedHTML)return this;if(a.clipboardData&&a.clipboardData.getData&&!a.defaultPrevented){if(a.preventDefault(),c.options.cleanPastedHTML&&a.clipboardData.getData("text/html"))return c.cleanPaste(a.clipboardData.getData("text/html"));if(c.options.disableReturn||this.getAttribute("data-disable-return"))b.execCommand("insertHTML",!1,a.clipboardData.getData("text/plain"));else{for(d=a.clipboardData.getData("text/plain").split(/[\r\n]/g),e=0;e"+c.htmlEntities(d[e])+"

");b.execCommand("insertHTML",!1,f)}}},a=0;a]*docs-internal-guid[^>]*>/gi),""],[new RegExp(/<\/b>(]*>)?$/gi),""],[new RegExp(/\s+<\/span>/g)," "],[new RegExp(/
/g),"
"],[new RegExp(/]*(font-style:italic;font-weight:bold|font-weight:bold;font-style:italic)[^>]*>/gi),''],[new RegExp(/]*font-style:italic[^>]*>/gi),''],[new RegExp(/]*font-weight:bold[^>]*>/gi),''],[new RegExp(/<(\/?)(i|b|a)>/gi),"<$1$2>"],[new RegExp(/<a\s+href=("|”|“|“|”)([^&]+)("|”|“|“|”)>/gi),'']];for(c=0;c
"),this.pasteHTML("

"+d.join("

")+"

"),b.execCommand("insertText",!1,"\n"),d=f.querySelectorAll("p,div,br"),c=0;c"+d.innerHTML+"":d.innerHTML,d.parentNode.replaceChild(e,d);for(f=a.querySelectorAll("span"),c=0;cb;b+=1)d.push(e.getRangeAt(b));return d}return null}function e(b){var c,d,e=a.getSelection();if(b)for(e.removeAllRanges(),c=0,d=b.length;d>c;c+=1)e.addRange(b[c])}function f(){var a=b.getSelection().anchorNode,c=a&&3===a.nodeType?a.parentNode:a;return c}function g(c,d){var e,f,g,h;g=c.getElementsByTagName("p"),h=g.length>0?g[d?0:g.length-1]:c,b.createRange?(e=b.createRange(),e.selectNodeContents(h),e.collapse(d),f=a.getSelection(),f.removeAllRanges(),f.addRange(e)):b.selection&&(e=b.body.createTextRange(),e.moveToElementText(h),e.collapse(d),e.select())}function h(a){return!(!a||1!==a.nodeType)}function i(){var c,d,e,f,g="";if(void 0!==a.getSelection){if(c=a.getSelection(),c.rangeCount){for(d=b.createElement("div"),e=0,f=c.rangeCount;f>e;e+=1)d.appendChild(c.getRangeAt(e).cloneContents());g=d.innerHTML}}else void 0!==b.selection&&"Text"===b.selection.type&&(g=b.selection.createRange().htmlText);return g}MediumEditor.activatePlaceholder=function(a){var c,d,e=!a.querySelector("img")&&""===a.textContent.replace(/^\s+|\s+$/g,"");return e&&(a.innerHTML="",c=b.createElement("p"),d=b.createElement("span"),d.innerHTML=a.getAttribute("data-placeholder"),d.className="medium-editor-placeholder",d.setAttribute("contenteditable","false"),c.appendChild(d),a.appendChild(c)),a.setAttribute("data-isempty",e),e},MediumEditor.prototype={defaults:{allowMultiParagraphSelection:!0,anchorInputPlaceholder:"Paste or type a link",anchorPreviewHideDelay:500,buttons:["bold","italic","underline","anchor","header1","header2","quote"],buttonLabels:!1,checkLinkFormat:!1,cleanPastedHTML:!1,delay:0,diffLeft:0,diffTop:-10,disableReturn:!1,disableDoubleReturn:!1,disableToolbar:!1,disableEditing:!1,elementsContainer:!1,firstHeader:"h3",forcePlainText:!0,placeholder:"Type your text",secondHeader:"h4",targetBlank:!1,extensions:{},activeButtonClass:"medium-editor-button-active",firstButtonClass:"medium-editor-button-first",lastButtonClass:"medium-editor-button-last"},isIE:"Microsoft Internet Explorer"===navigator.appName||"Netscape"===navigator.appName&&null!==new RegExp("Trident/.*rv:([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent),init:function(a,d){return this.setElementSelection(a),0!==this.elements.length?(this.parentElements=["p","h1","h2","h3","h4","h5","h6","blockquote","pre"],this.id=b.querySelectorAll(".medium-editor-toolbar").length+1,this.options=c(d,this.defaults),this.setup()):void 0},setup:function(){this.isActive=!0,this.initElements().bindSelect().bindPaste().setPlaceholders().bindWindowActions().passInstance()},initElements:function(){this.updateElementList();var a,c=!1;for(a=0;a[\w\W]*<\/span>/m;for(a=0;a([\w\W]*)<\/p>$/,"$1")),d[b]={value:c};return d},callExtensions:function(a){if(!(arguments.length<1)){var b,c,d=Array.prototype.slice.call(arguments,1);for(c in this.options.extensions)this.options.extensions.hasOwnProperty(c)&&(b=this.options.extensions[c],void 0!==b[a]&&b[a].apply(b,d))}},passInstance:function(){var a,b,c=this;for(b in c.options.extensions)c.options.extensions.hasOwnProperty(b)&&(a=c.options.extensions[b],a.parent&&(a.base=c));return c},bindParagraphCreation:function(a){var c=this;return this.elements[a].addEventListener("keypress",function(a){var c,d=f();32===a.which&&(c=d.tagName.toLowerCase(),"a"===c&&b.execCommand("unlink",!1,null))}),this.elements[a].addEventListener("keyup",function(a){var d,e=f();e&&e.getAttribute("data-medium-element")&&0===e.children.length&&!c.options.disableReturn&&!e.getAttribute("data-disable-return")&&b.execCommand("formatBlock",!1,"p"),13===a.which&&(e=f(),d=e.tagName.toLowerCase(),c.options.disableReturn||this.getAttribute("data-disable-return")||"li"===d||c.isListItemChild(e)||(a.shiftKey||b.execCommand("formatBlock",!1,"p"),"a"===d&&b.execCommand("unlink",!1,null)))}),this},isListItemChild:function(a){for(var b=a.parentNode,c=b.tagName.toLowerCase();-1===this.parentElements.indexOf(c)&&"div"!==c;){if("li"===c)return!0;if(b=b.parentNode,!b||!b.tagName)return!1;c=b.tagName.toLowerCase()}return!1},bindReturn:function(a){var b=this;return this.elements[a].addEventListener("keypress",function(a){if(13===a.which)if(b.options.disableReturn||this.getAttribute("data-disable-return"))a.preventDefault();else if(b.options.disableDoubleReturn||this.getAttribute("data-disable-double-return")){var c=f();c&&"\n"===c.innerText&&a.preventDefault()}}),this},bindTab:function(a){return this.elements[a].addEventListener("keydown",function(a){if(9===a.which){var c=f().tagName.toLowerCase();"pre"===c&&(a.preventDefault(),b.execCommand("insertHtml",null," "))}}),this},buttonTemplate:function(a){var b=this.getButtonLabels(this.options.buttonLabels),c={bold:'",italic:'",underline:'",strikethrough:'',superscript:'",subscript:'",anchor:'",image:'",header1:'",header2:'",quote:'",orderedlist:'",unorderedlist:'",pre:'",indent:'",outdent:'"};return c[a]||!1},getButtonLabels:function(a){var b,c,d={bold:"B",italic:"I",underline:"U",superscript:"x1",subscript:"x1",anchor:"#",image:"image",header1:"H1",header2:"H2",quote:"“",orderedlist:"1.",unorderedlist:"•",pre:"0101",indent:"→",outdent:"←"};if("fontawesome"===a?b={bold:'',italic:'',underline:'',superscript:'',subscript:'',anchor:'',image:'',quote:'',orderedlist:'',unorderedlist:'',pre:'',indent:'',outdent:''}:"object"==typeof a&&(b=a),"object"==typeof b)for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d},initToolbar:function(){return this.toolbar?this:(this.toolbar=this.createToolbar(),this.keepToolbarAlive=!1,this.anchorForm=this.toolbar.querySelector(".medium-editor-toolbar-form-anchor"),this.anchorInput=this.anchorForm.querySelector("input"),this.toolbarActions=this.toolbar.querySelector(".medium-editor-toolbar-actions"),this.anchorPreview=this.createAnchorPreview(),this)},createToolbar:function(){var a=b.createElement("div");return a.id="medium-editor-toolbar-"+this.id,a.className="medium-editor-toolbar",a.appendChild(this.toolbarButtons()),a.appendChild(this.toolbarFormAnchor()),this.options.elementsContainer.appendChild(a),a},toolbarButtons:function(){var a,c,d,e,f=this.options.buttons,g=b.createElement("ul");for(g.id="medium-editor-toolbar-actions",g.className="medium-editor-toolbar-actions clearfix",c=0;c<\/[\S]+>/gim,""),b=a.match(/<(p|h[0-6]|blockquote)>([\s\S]*?)<\/(p|h[0-6]|blockquote)>/g);return b?b.length:0},checkSelectionElement:function(a,b){var c;for(this.selection=a,this.selectionRange=this.selection.getRangeAt(0),c=0;cg?f+h+"px":a.innerWidth-g-1?this.classList.remove(c.options.activeButtonClass):this.className+=" "+c.options.activeButtonClass,this.hasAttribute("data-action")&&c.execAction(this.getAttribute("data-action"),a)};for(a=0;a0&&(a[0].className+=" "+this.options.firstButtonClass,a[a.length-1].className+=" "+this.options.lastButtonClass),this},execAction:function(c,d){c.indexOf("append-")>-1?(this.execFormatBlock(c.replace("append-","")),this.setToolbarPosition(),this.setToolbarButtonStates()):"anchor"===c?this.triggerAnchorAction(d):"image"===c?b.execCommand("insertImage",!1,a.getSelection()):(b.execCommand(c,!1,null),this.setToolbarPosition())},rangeSelectsSingleNode:function(a){var b=a.startContainer;return b===a.endContainer&&b.hasChildNodes()&&a.endOffset===a.startOffset+1},getSelectedParentElement:function(){var a=null,b=this.selectionRange;return a=this.rangeSelectsSingleNode(b)?b.startContainer.childNodes[b.startOffset]:3===b.startContainer.nodeType?b.startContainer.parentNode:b.startContainer},triggerAnchorAction:function(){var a=this.getSelectedParentElement();return a.tagName&&"a"===a.tagName.toLowerCase()?b.execCommand("unlink",!1,null):"block"===this.anchorForm.style.display?this.showToolbarActions():this.showAnchorForm(),this},execFormatBlock:function(a){var c=this.getSelectionData(this.selection.anchorNode);if("blockquote"===a&&c.el&&"blockquote"===c.el.parentNode.tagName.toLowerCase())return b.execCommand("outdent",!1,null);if(c.tagName===a&&(a="p"),this.isIE){if("blockquote"===a)return b.execCommand("indent",!1,a);a="<"+a+">"}return b.execCommand("formatBlock",!1,a)},getSelectionData:function(a){var b;for(a&&a.tagName&&(b=a.tagName.toLowerCase());a&&-1===this.parentElements.indexOf(b);)a=a.parentNode,a&&a.tagName&&(b=a.tagName.toLowerCase());return{el:a,tagName:b}},getFirstChild:function(a){for(var b=a.firstChild;null!==b&&1!==b.nodeType;)b=b.nextSibling;return b},hideToolbarActions:function(){this.keepToolbarAlive=!1,void 0!==this.toolbar&&this.toolbar.classList.remove("medium-editor-toolbar-active")},showToolbarActions:function(){var a,b=this;this.anchorForm.style.display="none",this.toolbarActions.style.display="block",this.keepToolbarAlive=!1,clearTimeout(a),a=setTimeout(function(){b.toolbar&&!b.toolbar.classList.contains("medium-editor-toolbar-active")&&b.toolbar.classList.add("medium-editor-toolbar-active")},100)},saveSelection:function(){this.savedSelection=d()},restoreSelection:function(){e(this.savedSelection)},showAnchorForm:function(a){this.toolbarActions.style.display="none",this.saveSelection(),this.anchorForm.style.display="block",this.keepToolbarAlive=!0,this.anchorInput.focus(),this.anchorInput.value=a||""},bindAnchorForm:function(){var a=this.anchorForm.querySelector("a"),b=this;return this.anchorForm.addEventListener("click",function(a){a.stopPropagation()}),this.anchorInput.addEventListener("keyup",function(a){13===a.keyCode&&(a.preventDefault(),b.createLink(this))}),this.anchorInput.addEventListener("click",function(a){a.stopPropagation(),b.keepToolbarAlive=!0}),this.anchorInput.addEventListener("blur",function(){b.keepToolbarAlive=!1,b.checkSelection()}),a.addEventListener("click",function(a){a.preventDefault(),b.showToolbarActions(),e(b.savedSelection)}),this},hideAnchorPreview:function(){this.anchorPreview.classList.remove("medium-editor-anchor-preview-active")},showAnchorPreview:function(b){if(this.anchorPreview.classList.contains("medium-editor-anchor-preview-active"))return!0;var c,d,e,f=this,g=40,h=b.getBoundingClientRect(),i=(h.left+h.right)/2;return f.anchorPreview.querySelector("i").textContent=b.href,c=f.anchorPreview.offsetWidth/2,d=f.options.diffLeft-c,clearTimeout(e),e=setTimeout(function(){f.anchorPreview&&!f.anchorPreview.classList.contains("medium-editor-anchor-preview-active")&&f.anchorPreview.classList.add("medium-editor-anchor-preview-active")},100),f.observeAnchorPreview(b),f.anchorPreview.classList.add("medium-toolbar-arrow-over"),f.anchorPreview.classList.remove("medium-toolbar-arrow-under"),f.anchorPreview.style.top=Math.round(g+h.bottom-f.options.diffTop+a.pageYOffset-f.anchorPreview.offsetHeight)+"px",f.anchorPreview.style.left=c>i?d+c+"px":a.innerWidth-ib.options.anchorPreviewHideDelay&&(b.hideAnchorPreview(),clearInterval(g),b.anchorPreview.removeEventListener("mouseover",e),b.anchorPreview.removeEventListener("mouseout",f),a.removeEventListener("mouseover",e),a.removeEventListener("mouseout",f))},200);b.anchorPreview.addEventListener("mouseover",e),b.anchorPreview.addEventListener("mouseout",f),a.addEventListener("mouseover",e),a.addEventListener("mouseout",f)},createAnchorPreview:function(){var a=this,c=b.createElement("div");return c.id="medium-editor-anchor-preview-"+this.id,c.className="medium-editor-anchor-preview",c.innerHTML=this.anchorPreviewTemplate(),this.options.elementsContainer.appendChild(c),c.addEventListener("click",function(){a.anchorPreviewClickHandler()}),c},anchorPreviewTemplate:function(){return'
'},anchorPreviewClickHandler:function(){if(this.activeAnchor){var c=this,d=b.createRange(),e=a.getSelection();d.selectNodeContents(c.activeAnchor),e.removeAllRanges(),e.addRange(d),setTimeout(function(){c.activeAnchor&&c.showAnchorForm(c.activeAnchor.href),c.keepToolbarAlive=!1},100+c.options.delay)}this.hideAnchorPreview()},editorAnchorObserver:function(a){var b=this,c=!0,d=function(){c=!1,b.activeAnchor.removeEventListener("mouseout",d)};if(a.target&&"a"===a.target.tagName.toLowerCase()){if(!/href=["']\S+["']/.test(a.target.outerHTML)||/href=["']#\S+["']/.test(a.target.outerHTML))return!0;if(this.toolbar.classList.contains("medium-editor-toolbar-active"))return!0;this.activeAnchor=a.target,this.activeAnchor.addEventListener("mouseout",d),setTimeout(function(){c&&b.showAnchorPreview(a.target)},b.options.delay)}},bindAnchorPreview:function(){var a,b=this;for(this.editorAnchorObserverWrapper=function(a){b.editorAnchorObserver(a)},a=0;a/g,">").replace(/"/g,""")},bindPaste:function(){var a,c=this;for(this.pasteWrapper=function(a){var d,e,f="";if(this.classList.remove("medium-editor-placeholder"),!c.options.forcePlainText&&!c.options.cleanPastedHTML)return this;if(a.clipboardData&&a.clipboardData.getData&&!a.defaultPrevented){if(a.preventDefault(),c.options.cleanPastedHTML&&a.clipboardData.getData("text/html"))return c.cleanPaste(a.clipboardData.getData("text/html"));if(c.options.disableReturn||this.getAttribute("data-disable-return"))b.execCommand("insertHTML",!1,a.clipboardData.getData("text/plain"));else{for(d=a.clipboardData.getData("text/plain").split(/[\r\n]/g),e=0;e"+c.htmlEntities(d[e])+"

");b.execCommand("insertHTML",!1,f)}}},a=0;a=65&&90>=b)&&c(this),"true"===this.getAttribute("data-isempty")&&(b>=37&&40>=b||8===b||46===b)&&a.preventDefault()},f=function(a){b.activeElement!==this&&this.setAttribute("data-mousedown","true"),"true"===this.getAttribute("data-isempty")&&(a.preventDefault(),this.focus())},h=function(a){var b,c,d;b="true"===this.getAttribute("data-isempty"),c="true"===this.getAttribute("data-mousedown"),(!c||(this.removeAttribute("data-mousedown"),b))&&(console.log("isclick: "+c),console.log("setCursorPosition"),d=i(),d||(g(this,b),a.preventDefault()))},j=function(a){var b=a.keyCode||a.which;(8===b||46===b)&&MediumEditor.activatePlaceholder(this)&&g(this,!0)};for(a=0;a]*docs-internal-guid[^>]*>/gi),""],[new RegExp(/<\/b>(]*>)?$/gi),""],[new RegExp(/\s+<\/span>/g)," "],[new RegExp(/
/g),"
"],[new RegExp(/]*(font-style:italic;font-weight:bold|font-weight:bold;font-style:italic)[^>]*>/gi),''],[new RegExp(/]*font-style:italic[^>]*>/gi),''],[new RegExp(/]*font-weight:bold[^>]*>/gi),''],[new RegExp(/<(\/?)(i|b|a)>/gi),"<$1$2>"],[new RegExp(/<a\s+href=("|”|“|“|”)([^&]+)("|”|“|“|”)>/gi),'']];for(c=0;c
"),this.pasteHTML("

"+d.join("

")+"

"),b.execCommand("insertText",!1,"\n"),d=f.querySelectorAll("p,div,br"),c=0;c"+d.innerHTML+"":d.innerHTML,d.parentNode.replaceChild(e,d);for(f=a.querySelectorAll("span"),c=0;c 0) { + node = ps[position ? 0 : ps.length - 1]; + } else { + node = el; + } + + if(document.createRange) { //Firefox, Chrome, Opera, Safari, IE 9+ + range = document.createRange();//Create a range (a range is a like the selection but invisible) + + range.selectNodeContents(node);//Select the entire contents of the element with the range + range.collapse(position);//collapse the range to the end point. false means collapse to end rather than the start + selection = window.getSelection();//get the selection object (allows you to change selection) + selection.removeAllRanges();//remove any selections already made + selection.addRange(range);//make the range you have just created the visible selection + } else if(document.selection) { //IE 8 and lower + range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) + range.moveToElementText(node);//Select the entire contents of the element with the range + range.collapse(position);//collapse the range to the end point. false means collapse to end rather than the start + range.select();//Select the range (make it the visible selection + } + } + + // https://github.com/jashkenas/underscore + function isElement(obj) { + return !!(obj && obj.nodeType === 1); + } + function getSelectionHtml() { - var i, - html = '', - sel, - len, - container; + var html = "", sel, container, i, len; if (window.getSelection !== undefined) { sel = window.getSelection(); if (sel.rangeCount) { - container = document.createElement('div'); + container = document.createElement("div"); for (i = 0, len = sel.rangeCount; i < len; i += 1) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (document.selection !== undefined) { - if (document.selection.type === 'Text') { + if (document.selection.type === "Text") { html = document.selection.createRange().htmlText; } } return html; } - // https://github.com/jashkenas/underscore - function isElement(obj) { - return !!(obj && obj.nodeType === 1); - } + MediumEditor.activatePlaceholder = function (el) { + var isEmpty = !(el.querySelector('img')) && + el.textContent.replace(/^\s+|\s+$/g, '') === '', + p, placeholder; + + if (isEmpty) { + el.innerHTML = ''; + p = document.createElement('p'); + placeholder = document.createElement('span'); + placeholder.innerHTML = el.getAttribute('data-placeholder'); + placeholder.className = 'medium-editor-placeholder'; + placeholder.setAttribute('contenteditable', 'false'); + p.appendChild(placeholder); + el.appendChild(p); + } + + el.setAttribute('data-isempty', isEmpty); + return isEmpty; + }; MediumEditor.prototype = { defaults: { @@ -190,11 +233,20 @@ if (typeof module === 'object') { serialize: function () { var i, elementid, - content = {}; + content = {}, + value, + holderExp = /[\w\W]*<\/span>/m; for (i = 0; i < this.elements.length; i += 1) { elementid = (this.elements[i].id !== '') ? this.elements[i].id : 'element-' + i; + value = this.elements[i].innerHTML.trim(); + if (holderExp.test(value)) { // if there if placeholder, make it empty. + value = ''; + } else if (this.options.disableReturn || this.elements[i].getAttribute('data-disable-return')) { + // if return is disabled, remove the html markups. + value = value.replace(/^

([\w\W]*)<\/p>$/, '$1'); + } content[elementid] = { - value: this.elements[i].innerHTML.trim() + value: value }; } return content; @@ -1173,25 +1225,83 @@ if (typeof module === 'object') { return this; }, + reset: function() { + var i; + for (i = 0; i < this.elements.length; i += 1) { + MediumEditor.activatePlaceholder(this.elements[i]); + } + }, + setPlaceholders: function () { var i, - activatePlaceholder = function (el) { - if (!(el.querySelector('img')) && - !(el.querySelector('blockquote')) && - el.textContent.replace(/^\s+|\s+$/g, '') === '') { - el.classList.add('medium-editor-placeholder'); + clearPlaceholder = function(el) { + var placeholder = el.querySelector('.medium-editor-placeholder'); + if (placeholder) { + placeholder.parentNode.removeChild(placeholder); + el.setAttribute('data-isempty', 'false'); } }, placeholderWrapper = function (e) { - this.classList.remove('medium-editor-placeholder'); - if (e.type !== 'keypress') { - activatePlaceholder(this); + clearPlaceholder(this); + if (e.type === 'blur') { + MediumEditor.activatePlaceholder(this); + } + }, + keydownHandler = function(e) { + var which = e.keyCode || e.which; + if (which === 229 || (which >= 65 && which <= 90)) { + clearPlaceholder(this); + } + if (this.getAttribute('data-isempty') === 'true' && ((which >= 37 && which <= 40) || which === 8 || which === 46)) { + e.preventDefault(); + } + }, + mousedownHandler = function(e) { + if (document.activeElement !== this) { + this.setAttribute('data-mousedown', 'true'); + } + + if (this.getAttribute('data-isempty') === 'true') { + e.preventDefault(); + this.focus(); + } + }, + focusHandler = function(e) { + var isEmpty, isClick, html; + + isEmpty = this.getAttribute('data-isempty') === 'true'; + isClick = this.getAttribute('data-mousedown') === 'true'; + if (isClick) { + this.removeAttribute('data-mousedown'); + if (!isEmpty) { + return; + } + } + console.log('isclick: ' + isClick); + console.log('setCursorPosition'); + + html = getSelectionHtml(); + if (!html) { // 没有选中内容时才会设置光标位置 + setCursorPosition(this, isEmpty); + e.preventDefault(); + } + }, + keyupHandler = function(e) { + var which = e.keyCode || e.which; + if (which === 8 || which === 46) { + if (MediumEditor.activatePlaceholder(this)) { + setCursorPosition(this, true); + } } }; for (i = 0; i < this.elements.length; i += 1) { - activatePlaceholder(this.elements[i]); + MediumEditor.activatePlaceholder(this.elements[i]); this.elements[i].addEventListener('blur', placeholderWrapper); this.elements[i].addEventListener('keypress', placeholderWrapper); + this.elements[i].addEventListener('keydown', keydownHandler); + this.elements[i].addEventListener('mousedown', mousedownHandler); + this.elements[i].addEventListener('focus', focusHandler); + this.elements[i].addEventListener('keyup', keyupHandler); } return this; }, diff --git a/src/sass/medium-editor.scss b/src/sass/medium-editor.scss index 31c939804..e282eb7c2 100644 --- a/src/sass/medium-editor.scss +++ b/src/sass/medium-editor.scss @@ -128,13 +128,5 @@ } .medium-editor-placeholder { - position: relative; - - &:after { - position: absolute; - top: 0; - left: 0; - content: attr(data-placeholder) !important; - font-style: italic; - } + font-style: italic; } diff --git a/src/sass/themes/default.scss b/src/sass/themes/default.scss index 2f52f152c..4b59cf813 100644 --- a/src/sass/themes/default.scss +++ b/src/sass/themes/default.scss @@ -80,6 +80,6 @@ $medium_editor_border_radius: 5px; border-radius: $medium_editor_border_radius; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: #b3b3b1; } diff --git a/src/sass/themes/flat.scss b/src/sass/themes/flat.scss index abcc61cfd..102cc1c07 100644 --- a/src/sass/themes/flat.scss +++ b/src/sass/themes/flat.scss @@ -81,6 +81,6 @@ $medium_editor_link_color: #fff; color: $medium_editor_link_color; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: $medium_editor_border_color; } diff --git a/src/sass/themes/mani.scss b/src/sass/themes/mani.scss index 932c3cb97..f2169728f 100644 --- a/src/sass/themes/mani.scss +++ b/src/sass/themes/mani.scss @@ -77,6 +77,6 @@ $medium_editor_border_radius: 2px; border-radius: $medium_editor_border_radius; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: $medium_editor_border_color; } diff --git a/src/sass/themes/roman.scss b/src/sass/themes/roman.scss index b5e4b0aaf..74ac03aec 100644 --- a/src/sass/themes/roman.scss +++ b/src/sass/themes/roman.scss @@ -77,6 +77,6 @@ $medium_editor_border_radius: 5px; border-radius: $medium_editor_border_radius; } -.medium-editor-placeholder:after { +.medium-editor-placeholder { color: $medium_editor_border_color; }