disable buttons in html view

.gitignore

@@ -0,0 +1 @@
+node_modules

CONTRIBUTING.md

@@ -5,3 +5,12 @@ I love pull-requests. However, this repo is just a mirror of [redactor-js offici
 Thus, no pull-requests will be accepted and there's very low chance original authors will look at the issues.
 
 Sorry about that.
+
+# problems
+ * options tag doesnt support any  style except firefox so the dropdown showing font-family not   work.
+ * custom embed need api to fetch data of the url(then only we can render)
+
+
+# Ideas
+ * getCurrentNode() -- function gives you the caret placed element.
+ * jquery closest to find the closest tags.

README.md

@@ -1,4 +1,4 @@
-redactor-js
+<!-- redactor-js
 ===========
 
 # Repo not maintained. Proceed with caution or refer to http://imperavi.com/redactor/
@@ -35,4 +35,7 @@ If you found and issue, please submit it here: http://imperavi.com/support/
 ## License
 Starting with version 7.6.2 redactor-js is licensed under [Creative Commons Attribution-NonCommercial 3.0 license](http://creativecommons.org/licenses/by-nc/3.0/)
 
-For commercial use please buy license here: http://redactorjs.com/ or use earlier version.
+For commercial use please buy license here: http://redactorjs.com/ or use earlier version. -->
+
+## List of contenteditable Browser Inconsistencies
+![List](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md)

css/new.css

@@ -0,0 +1,164 @@
+.button {
+   background-color: ForestGreen;   
+  border-radius: 5px;
+  color: white;
+  padding: .5em;
+  text-decoration: none;
+  text-align: center;
+}
+
+.button:focus,
+.button:hover {
+  background-color: DarkGreen;
+}
+
+
+
+
+.custom-file-input {
+  color: transparent;
+  width: 124px;
+  height: 26px;
+}
+.custom-file-input::-webkit-file-upload-button {
+  visibility: hidden;
+}
+.custom-file-input::before {
+  content: 'Select some files';
+  color: black;
+  display: inline-block;
+  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
+  border: 1px solid #999;
+  border-radius: 3px;
+  padding: 5px 8px;
+  outline: none;
+  white-space: nowrap;
+  /* -webkit-user-select: none; */
+  cursor: pointer;
+  text-shadow: 1px 1px #fff;
+  font-weight: 700;
+  font-size: 10pt;
+}
+.custom-file-input:hover::before {
+  border-color: black;
+}
+.custom-file-input:active {
+  outline: 0;
+}
+.custom-file-input:active::before {
+  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
+}
+
+
+/*applyed color highlight  */
+.redactor_color_act {
+  border: solid #9e9e9e !important;
+  border-radius: 11px !important;
+} 
+
+/*
+disable unlink  */
+.unlink-disable {
+  pointer-events: none;
+    background: darkgray;
+}
+
+
+/* image editing styles */
+.caption {
+  /* text-align: center; */
+  padding: 14px;
+  font-size: 18px;
+  line-height: 1em;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
+  display: none;
+}
+
+.img-border {
+  position: relative;
+  display: inline-table;
+  margin: 0px 0px 0px 0px;
+}
+
+.btn-class {
+  position: absolute;
+  top: 10px;
+  right: 2px;
+  display: inline-block;;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 1s ease-in, visibility 1s ease-in;
+  transition: opacity 700ms ease-in, visibility 700ms ease-in;
+  }
+
+ul.btn-class li {
+  display: inline-block;
+  padding: 11px;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;  
+}
+
+.span-cls {
+  padding: 10px;
+  line-height: 15px;
+  -moz-border-radius: 10px;
+  border-radius: 19px;
+  background-color: black;
+  text-align: center;
+  font-size: 1em;
+}
+
+.drop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: white;
+  z-index: -1;
+  visibility: hidden;
+  -webkit-transition: opacity 1s ease-in, visibility 1s ease-in;
+  transition: opacity 700ms ease-in, visibility 700ms ease-in;
+}
+
+
+
+.show-border {
+  border: 4.5px solid cadetblue;
+  z-index: 90;
+}
+
+.show-drop {
+  opacity: 0.5;
+  visibility: visible;
+  z-index:  90;
+
+}
+
+.show-btn {
+  display: inline-block;
+  opacity: 1;
+  visibility: visible;
+  z-index: 90;
+}
+
+/* .img-border:hover .drop {
+  opacity: 0.5;
+  visibility: visible;
+  z-index:  0;
+}
+ .img-border:hover .btn-class {
+   display: inline-block;
+   opacity: 1;
+   visibility: visible;
+ } */
+.ui-wrapper  .ui-resizable-se {
+  border: 3px solid #e08294;
+
+
+}
+.img-border img {
+  width: 100%;
+  height: 100%;
+}

css/style.css

@@ -23,4 +23,34 @@ body {
 -----------------------------------------------------------------------------*/
 .list li {
 	margin: 10px 0;
-}
+}
+
+/*
+hover effects
+*/
+.close {
+  position: sticky;
+  right: 32px;
+  top: 32px;
+  width: 32px;
+  height: 32px;
+  opacity: 1;
+  color:red
+}
+.close:hover {
+  opacity: 1;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 15px;
+  content: ' ';
+  height: 33px;
+  width: 2px;
+  background-color: rgba(241, 43, 36, 0.64);
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}

demo/images_upload.html

@@ -10,8 +10,9 @@
 	<script type="text/javascript" src="../lib/jquery-1.9.0.min.js"></script>
 
 	<!-- Redactor is here -->
+		<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>	
 	<link rel="stylesheet" href="../redactor/redactor.css" />
-	<script src="../redactor/redactor.min.js"></script>
+	<script src="../redactor/redactor.js"></script>
 
 	<script type="text/javascript">
 	$(document).ready(

index.html

@@ -4,46 +4,57 @@
 	<title>Redactor</title>
 
 	<meta charset="utf-8">
-
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
+    <!-- https://www.youtube.com/watch?v=JGwWNGJdvx8 -->
+	  <link rel="stylesheet" type="text/css" href="css/style.css" />  
+	 <link rel="stylesheet" href="css/new.css"> 
+	 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+
+	<script src="lib/font-awesome.js"></script>
 	<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
 
 
 	<!-- Redactor is here -->
-	<link rel="stylesheet" href="redactor/redactor.css" />
-	<script src="redactor/redactor.min.js"></script>
 
+	<link rel="stylesheet" href="redactor/redactor.css" />
+	<script type="text/javascript" src="lib/editor.js"></script>	
+	<script src="redactor/redactor.js"></script>
+
 	<script type="text/javascript">
 	$(document).ready(
 		function()
 		{
 			$('#redactor').redactor();
 		}
 	);
-	</script>
+    </script>
+
+	<!-- <script src="redactor/plugin.js"></script> -->
 
 </head>
 <body>
 	<div id="page">
 
 		<textarea id="redactor" name="content">
 			<h2>Hello and Welcome</h2>
-			<p>Lorem ipsum <a href="http://test.com" title="dolor">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<p>Lorem ipsum dolro sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing <b>elit, sed do eiusmod tempor incididunt</b> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 		</textarea>
 
 		<br>
-		<h3>See other demos</h3>
-		<ul class="list">
-			<li><a href="demo/images_upload.html">Images upload</a></li>
+		<!-- <h3>See other demos</h3> -->
+		<!-- <ul class="list">
 			<li><a href="demo/images_json.html">Images JSON</a></li>
 			<li><a href="demo/files_upload.html">Files upload</a></li>
 			<li><a href="demo/all_uploads.html">All in one uploads</a></li>
 			<li><a href="demo/autosave.html">Autosave utility</a></li>
 			<li><a href="demo/fixed.html">Fixed toolbar</a></li>
 			<li><a href="demo/toolbar.html">Custom toolbar</a></li>
 			<li><a href="demo/post.html">Post form</a></li>
-		</ul>
+		</ul> -->
+			 <!-- <li><a href="demo/images_upload.html">Images upload</a></li>  -->
+
 
 	</div>
 </body>