Commit d4ee13c7 authored by Corentin Bettiol's avatar Corentin Bettiol 💻

update simple wysiwyg editor

parent d1d9e3e6
...@@ -141,7 +141,10 @@ a:hover{ ...@@ -141,7 +141,10 @@ a:hover{
} }
#editContent{ #editContent{
margin-top: 5px;
white-space: pre-wrap; white-space: pre-wrap;
min-height: 1em;
display: inline-block;
} }
input, textarea, .wysiwyg{ input, textarea, .wysiwyg{
...@@ -169,11 +172,13 @@ input, textarea, .wysiwyg{ ...@@ -169,11 +172,13 @@ input, textarea, .wysiwyg{
align-items: center; align-items: center;
} }
.wysiwyg span{ .wysiwyg button{
padding: 3px; border: none;
padding: 2px;
font-size: 1em;
margin: 0 2px; margin: 0 2px;
min-width: 20px;
cursor: pointer; cursor: pointer;
min-width: 20px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
background-color: #ccc; background-color: #ccc;
...@@ -324,6 +329,18 @@ form .small{ ...@@ -324,6 +329,18 @@ form .small{
background-color: #ccc; background-color: #ccc;
} }
.alignleft{
text-align: left;
}
.aligncenter{
text-align: center;
}
.alignright{
text-align: right;
}
/* /*
==== ====
Media Queries Media Queries
......
// vous voulez du code sale ?
let textarea = document.getElementById("inputContent"); let textarea = document.getElementById("inputContent");
let div = document.getElementById("editContent"); let div = document.getElementById("editContent");
let telection;
div.oninput = (e) => update("text"); div.oninput = (e) => update("text");
textarea.oninput = (e) => update("div"); 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){ function update(whichOneIsTheOneToUpdate){
if(whichOneIsTheOneToUpdate == "text") if(whichOneIsTheOneToUpdate == "text")
textarea.value = div.innerHTML; textarea.value = div.innerHTML;
else if(whichOneIsTheOneToUpdate == "div") else if(whichOneIsTheOneToUpdate == "div")
div.innerHTML = textarea.value; 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
...@@ -36,23 +36,23 @@ ...@@ -36,23 +36,23 @@
<label for="editContent">Contenu</label> <label for="editContent">Contenu</label>
<article class="wysiwyg"> <article class="wysiwyg">
<div> <div>
<span onclick="title()">📰</span> <button type="button" onclick="wysiwyg('h4')" title="title">📌</button>
<span onclick="bold()"><b>B</b></span> <button type="button" onclick="wysiwyg('b')" title="bold"><b>B</b></button>
<span onclick="italic()"><i>i</i></span> <button type="button" onclick="wysiwyg('i')" title="italic"><i>i</i></button>
<span onclick="underline()"><u>U</u></span> <button type="button" onclick="wysiwyg('u')" title="underline"><u>U</u></button>
<span onclick="img()">📷</span> <button type="button" onclick="wysiwyg_img()" title="image">📷</button>
<span onclick="alignleft()"></span> <button type="button" onclick="wysiwyg_align('left')" title="align left"></button>
<span onclick="aligncenter()"></span> <button type="button" onclick="wysiwyg_align('center')" title="center"></button>
<span onclick="alignright()"></span> <button type="button" onclick="wysiwyg_align('right')" title="align right"></button>
<span onclick="list()">📋</span> <button type="button" onclick="wysiwyg_list()" title="list">📋</button>
<span onclick="link()">🔗</span> <button type="button" onclick="wysiwyg_link()" title="link">🔗</button>
<button type="button" onclick="wysiwyg_code()" title="code">🎲</button>
</div> </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> </article>
</section> </section>
<input type="submit" value="Envoyer" /> <input type="submit" value="Envoyer" />
</form> </form>
</article> </article>
\ No newline at end of file
...@@ -36,7 +36,23 @@ ...@@ -36,7 +36,23 @@
<section class="input"> <section class="input">
<label for="editContent">Description</label> <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> </section>
<input type="submit" value="Envoyer" /> <input type="submit" value="Envoyer" />
......
...@@ -34,7 +34,23 @@ ...@@ -34,7 +34,23 @@
<section class="input"> <section class="input">
<label for="editContent">Description</label> <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> </section>
<input type="submit" value="Éditer" /> <input type="submit" value="Éditer" />
......
...@@ -32,9 +32,27 @@ ...@@ -32,9 +32,27 @@
<textarea name="content" id="inputContent"><?php echo $blogpost['content']; ?></textarea> <textarea name="content" id="inputContent"><?php echo $blogpost['content']; ?></textarea>
</article> </article>
<section class="input"> <section class="input">
<label for="editContent">Contenu</label> <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> </section>
<input type="submit" value="Éditer" /> <input type="submit" value="Éditer" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment