update simple wysiwyg editor

css/design.css

@@ -141,7 +141,10 @@ a:hover{
 }
 
 #editContent{
+	margin-top: 5px;
 	white-space: pre-wrap;
+	min-height: 1em;
+	display: inline-block;
 }
 
 input, textarea, .wysiwyg{
@@ -169,11 +172,13 @@ input, textarea, .wysiwyg{
 	align-items: center;
 }
 
-.wysiwyg span{
-	padding: 3px;
+.wysiwyg button{
+	border: none;
+	padding: 2px;
+	font-size: 1em;
 	margin: 0 2px;
-	min-width: 20px;
 	cursor: pointer;
+	min-width: 20px;
 	text-align: center;
 	display: inline-block;
 	background-color: #ccc;
@@ -324,6 +329,18 @@ form .small{
 	background-color: #ccc;
 }
 
+.alignleft{
+	text-align: left;	
+}
+
+.aligncenter{
+	text-align: center;
+}
+
+.alignright{
+	text-align: right;
+}
+
 /*
 ====
 Media Queries

js/contentEditable.js

+// vous voulez du code sale ?
+
 let textarea = document.getElementById("inputContent");
 let div = document.getElementById("editContent");
+let telection;
 div.oninput = (e) => update("text");
 textarea.oninput = (e) => update("div");
+textarea.value = div.innerHTML;
+document.execCommand('defaultParagraphSeparator', false, 'p');
 
-function link(){
-	let link = prompt("Entrez l'adresse du lien.");
-
-	let txt = prompt("Entrez le texte à afficher.");
-	if(txt.length == 0)
-		txt = link;
-	textarea.value += "<a href=\""+ link + "\">"+ txt +"</a>";
-	update("div");
-}
 
 function update(whichOneIsTheOneToUpdate){
 	if(whichOneIsTheOneToUpdate == "text")
 		textarea.value = div.innerHTML;
 	else if(whichOneIsTheOneToUpdate == "div")
 		div.innerHTML = textarea.value;
+}
+
+function isOrContains(node, container) {
+	while (node) {
+		if (node === container) {
+			return true;
+		}
+		node = node.parentNode;
+	}
+	return false;
+}
+
+function wysiwyg_selection(){
+	let sel = window.getSelection();
+	return isOrContains(sel.getRangeAt(0).commonAncestorContainer, div);
+}
+
+// les remplacements intéressants
+
+function wysiwyg_link(){
+	let link = prompt("Entrez l'adresse du lien.");
+	let t = window.getSelection();
+
+	if(wysiwyg_selection()){
+		// si du texte est sélectionné
+		if(t.toString().length != 0){
+			t = t.getRangeAt(0);
+			// on crée un lien autours de la sélection
+			let l = document.createElement("a");
+			l.href = link;
+			t.surroundContents(l);
+		}
+		// sinon on demande d'entrer le texte à afficher, puis on le poste à la fin de l'article
+		else{
+			let txt = prompt("Entrez le texte à afficher.");
+			if(!txt)
+				txt = link;
+			let l = document.createElement("a");
+			l.href = link;
+			l.innerHTML = txt;
+			div.appendChild(l);
+		}
+		update("text");
+	}
+}
+
+function wysiwyg(txt){
+	if(wysiwyg_selection()){
+		let t = window.getSelection().getRangeAt(0);
+		t.surroundContents(document.createElement(txt));
+		update("text");
+	}
+}
+
+function wysiwyg_img(){
+	let src = prompt("Entrez l'adresse de l'image.");
+	let desc = prompt("Entrez la description de l'image.");
+	let t = window.getSelection();
+
+	if(wysiwyg_selection()){
+		if(t.toString().length == 0){
+			t = t.getRangeAt(0);
+			let l = document.createElement("img");
+			l.src = src;
+			l.alt = desc;
+			t.surroundContents(l);
+			update("text");
+		}
+	}
+}
+
+function wysiwyg_align(position){
+	if(wysiwyg_selection()){
+		let t = window.getSelection().anchorNode;
+		t.parentElement.className = "align"+ position;
+		update("text");
+	}
+}
+
+function wysiwyg_list(){
+	if(wysiwyg_selection()){
+		let t = window.getSelection().getRangeAt(0);
+		t.surroundContents(document.createElement("li"));
+		let parent = document.createElement("ul");
+		parent.appendChild(t.extractContents());
+		t.commonAncestorContainer.appendChild(parent);
+
+		update("text");
+	}
+}
+
+function wysiwyg_code(){
+	if(wysiwyg_selection()){
+		let t = window.getSelection().getRangeAt(0);
+		t.surroundContents(document.createElement("code"));
+		let parent = document.createElement("pre");
+		parent.appendChild(t.extractContents());
+		t.commonAncestorContainer.appendChild(parent);
+
+		update("text");
+	}
 }
\ No newline at end of file

site/view/private/createBlogView.php

@@ -36,23 +36,23 @@
 			<label for="editContent">Contenu</label>
 			<article class="wysiwyg">
 				<div>
-					<span onclick="title()">📰</span>
-					<span onclick="bold()"><b>B</b></span>
-					<span onclick="italic()"><i>i</i></span>
-					<span onclick="underline()"><u>U</u></span>
-					<span onclick="img()">📷</span>
-					<span onclick="alignleft()">⏮</span>
-					<span onclick="aligncenter()">⏹</span>
-					<span onclick="alignright()">⏭</span>
-					<span onclick="list()">📋</span>
-					<span onclick="link()">🔗</span>
+					<button type="button" onclick="wysiwyg('h4')"  title="title">📌</button>
+					<button type="button" onclick="wysiwyg('b')"  title="bold"><b>B</b></button>
+					<button type="button" onclick="wysiwyg('i')"  title="italic"><i>i</i></button>
+					<button type="button" onclick="wysiwyg('u')"  title="underline"><u>U</u></button>
+					<button type="button" onclick="wysiwyg_img()" title="image">📷</button>
+					<button type="button" onclick="wysiwyg_align('left')"  title="align left">⏮</button>
+					<button type="button" onclick="wysiwyg_align('center')"  title="center">⏹</button>
+					<button type="button" onclick="wysiwyg_align('right')"  title="align right">⏭</button>
+					<button type="button" onclick="wysiwyg_list()" title="list">📋</button>
+					<button type="button" onclick="wysiwyg_link()" title="link">🔗</button>
+					<button type="button" onclick="wysiwyg_code()" title="code">🎲</button>
 				</div>
 				
-				<div id="editContent" contentEditable="true"><h4>Titre de section</h4><p>Contenu.</p><pre><code>Hey du code !</code></pre></div>
+				<div id="editContent" contentEditable="true"><p>Du texte ?</p></div>
 			</article>
 		</section>
 
-
 		<input type="submit" value="Envoyer" />
 	</form>
 </article>
\ No newline at end of file

site/view/private/createProjectView.php

@@ -36,7 +36,23 @@
 
 		<section class="input">
 			<label for="editContent">Description</label>
-			<div id="editContent" contentEditable="true"><h4>Titre de section</h4><p>Contenu.</p><pre><code>Hey du code !</code></pre></div>	
+			<article class="wysiwyg">
+				<div>
+					<button type="button" onclick="wysiwyg('h4')"  title="title">📌</button>
+					<button type="button" onclick="wysiwyg('b')"  title="bold"><b>B</b></button>
+					<button type="button" onclick="wysiwyg('i')"  title="italic"><i>i</i></button>
+					<button type="button" onclick="wysiwyg('u')"  title="underline"><u>U</u></button>
+					<button type="button" onclick="wysiwyg_img()" title="image">📷</button>
+					<button type="button" onclick="wysiwyg_align('left')"  title="align left">⏮</button>
+					<button type="button" onclick="wysiwyg_align('center')"  title="center">⏹</button>
+					<button type="button" onclick="wysiwyg_align('right')"  title="align right">⏭</button>
+					<button type="button" onclick="wysiwyg_list()" title="list">📋</button>
+					<button type="button" onclick="wysiwyg_link()" title="link">🔗</button>
+					<button type="button" onclick="wysiwyg_code()" title="code">🎲</button>
+				</div>
+				
+				<div id="editContent" contentEditable="true"><p>Du texte ?</p></div>
+			</article>
 		</section>
 
 		<input type="submit" value="Envoyer" />

site/view/private/editProjectView.php

@@ -34,7 +34,23 @@
 
 		<section class="input">
 			<label for="editContent">Description</label>
-			<div name="editContent" id="editContent" contentEditable="true"><?php echo htmlspecialchars_decode($project['content']); ?></div>	
+			<article class="wysiwyg">
+				<div>
+					<button type="button" onclick="wysiwyg('h4')"  title="title">📌</button>
+					<button type="button" onclick="wysiwyg('b')"  title="bold"><b>B</b></button>
+					<button type="button" onclick="wysiwyg('i')"  title="italic"><i>i</i></button>
+					<button type="button" onclick="wysiwyg('u')"  title="underline"><u>U</u></button>
+					<button type="button" onclick="wysiwyg_img()" title="image">📷</button>
+					<button type="button" onclick="wysiwyg_align('left')"  title="align left">⏮</button>
+					<button type="button" onclick="wysiwyg_align('center')"  title="center">⏹</button>
+					<button type="button" onclick="wysiwyg_align('right')"  title="align right">⏭</button>
+					<button type="button" onclick="wysiwyg_list()" title="list">📋</button>
+					<button type="button" onclick="wysiwyg_link()" title="link">🔗</button>
+					<button type="button" onclick="wysiwyg_code()" title="code">🎲</button>
+				</div>
+				
+				<div id="editContent" contentEditable="true"><?php echo htmlspecialchars_decode($project['content']); ?></div>
+			</article>
 		</section>
 
 		<input type="submit" value="Éditer" />

site/view/private/editblogView.php

@@ -32,9 +32,27 @@
 			<textarea name="content" id="inputContent"><?php echo $blogpost['content']; ?></textarea>
 		</article>
 
+
+
 		<section class="input">
 			<label for="editContent">Contenu</label>
-			<div name="editContent" id="editContent" contentEditable="true"><?php echo htmlspecialchars_decode($blogpost['content']); ?></div>	
+			<article class="wysiwyg">
+				<div>
+					<button type="button" onclick="wysiwyg('h4')"  title="title">📌</button>
+					<button type="button" onclick="wysiwyg('b')"  title="bold"><b>B</b></button>
+					<button type="button" onclick="wysiwyg('i')"  title="italic"><i>i</i></button>
+					<button type="button" onclick="wysiwyg('u')"  title="underline"><u>U</u></button>
+					<button type="button" onclick="wysiwyg_img()" title="image">📷</button>
+					<button type="button" onclick="wysiwyg_align('left')"  title="align left">⏮</button>
+					<button type="button" onclick="wysiwyg_align('center')"  title="center">⏹</button>
+					<button type="button" onclick="wysiwyg_align('right')"  title="align right">⏭</button>
+					<button type="button" onclick="wysiwyg_list()" title="list">📋</button>
+					<button type="button" onclick="wysiwyg_link()" title="link">🔗</button>
+					<button type="button" onclick="wysiwyg_code()" title="code">🎲</button>
+				</div>
+				
+				<div id="editContent" contentEditable="true"><?php echo htmlspecialchars_decode($blogpost['content']); ?></div>
+			</article>
 		</section>
 
 		<input type="submit" value="Éditer" />