Pokus o editaci textu

bootstrap-3.3.7-dist/css/svatweb.css

@@ -70,7 +70,7 @@ ul.user li a:hover {
 }
 
 .edit a {
-  color: white;
+  color: black;
 }
 
 .img-fluid{
@@ -103,3 +103,27 @@ ul.user li a:hover {
     cursor: inherit;
     display: block;
 }
+
+.onas{
+  position: relative;
+  display: block;
+  text-align: center;
+  padding:2em;
+  width:60%;
+    margin-left: auto;
+    margin-right: auto;
+    font-size:1.2em;
+}
+
+.onas:hover .edit {
+  display: block;
+}
+
+h2{
+  text-align: center;
+  padding-top:2em;
+}
+
+textarea{
+  width:100%;
+}

bootstrap-3.3.7-dist/js/template.js

@@ -25,7 +25,7 @@ $(document).ready(function(){
 		}
 
 	});	
-
+ $("#demo-editor-bootstrap").wysihtml5();
 });
 function readURL(input) {
 	if (input.files && input.files[0]) {
@@ -38,12 +38,15 @@ function readURL(input) {
 
 		reader.readAsDataURL(input.files[0]);
 	}
-		}
+}
 
-	function changeImage(){
+function changeImage(){
 	$("#imgInp").change(function(){
 		readURL(this);
 	}); 	 
-	}
+}
 
+function changeText(){
+		 
+}
 

bootstrap-3.3.7-dist/svatebni-web.html

@@ -11,6 +11,7 @@
 	<script src="js/bootstrap.min.js"></script>
 	<script src="js/template.js"></script>
 
+	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.css"></link>
 	<link href="css/svatweb.css" rel="stylesheet">
 
 	<title>Svatební web</title>
@@ -35,7 +36,7 @@
 
 	<div class="profile-pic">
 		<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
-		<div class="edit"><a href="#"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal"></i></a></div>
+		<div class="edit"><a href="#exampleModal"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal"></i></a></div>
 	</div>
 
 	<!-- Modal -->
@@ -73,11 +74,52 @@
 		</div>
 	</div>
 
+	<!-- O nás -->
+	<h2> Adam a Eva </h2>
+	<div class="onas">
+		<p>Lorem ipsum dolor 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>
+		<div class="edit"><a href="#exampleModal2"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal2"></i></a></div>
+	</div>
+
+	<!-- Modal2 -->
+	<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="exampleModalLabel">Editovat text</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+				<div class="container-fluid">
+       <div class="row">
+          <div class="container">
+              <div class="row">
+              <div class="col-lg-12 nopadding">
+              <textarea id="demo-editor-bootstrap"></textarea>
+         </div>
+       </div>
+</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+					<button type="button" class="btn btn-primary" onclick="changeText()" data-dismiss="modal">Uložit</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	
+
 	<!-- Optional JavaScript -->
 	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
 	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+	<script src="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"></script>
+
 </body>
 </html>