Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
l3m-website
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
3
Issues
3
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Corentin Bettiol
l3m-website
Commits
d4ee13c7
Commit
d4ee13c7
authored
Mar 12, 2019
by
Corentin Bettiol
💻
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update simple wysiwyg editor
parent
d1d9e3e6
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
191 additions
and
27 deletions
+191
-27
css/design.css
css/design.css
+20
-3
js/contentEditable.js
js/contentEditable.js
+106
-9
site/view/private/createBlogView.php
site/view/private/createBlogView.php
+12
-12
site/view/private/createProjectView.php
site/view/private/createProjectView.php
+17
-1
site/view/private/editProjectView.php
site/view/private/editProjectView.php
+17
-1
site/view/private/editblogView.php
site/view/private/editblogView.php
+19
-1
No files found.
css/design.css
View file @
d4ee13c7
...
...
@@ -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
View file @
d4ee13c7
// 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
View file @
d4ee13c7
...
...
@@ -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
View file @
d4ee13c7
...
...
@@ -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
View file @
d4ee13c7
...
...
@@ -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
View file @
d4ee13c7
...
...
@@ -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"
/>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment