tout es plus ou moins dans le titre. j'aimerais faire un texte area avec la possibilité de mettre en forme son texte.
avez vous des solutions ?
je suis tomber sur markItUp mais celui-ci n'es pas super beau de plus j'ai réussi parfaitement à le faire fonctionné lorsque je developer mon site en local, mais une fois envoyer sur le serveur celui-ci ne fonctionnait plus.
code peu lisible car écrit en méme pas 5minute alors désoler j'avais pas le temps
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#edit , #edit:focus{
transition: box-shadow 2s;
}
#edit , #result{
width: 500px;
height: 500px;
border: 1px solid black;
outline: none;
font-size: 25px;
box-shadow: 3px 3px 6px black;
}
#edit:focus{
border: 1px solid orange;
box-shadow: 3px 3px 6px darkorange;
}
#edit a{
cursor: pointer;
}
</style>
</head>
<body>
<div id="btns">
Couleur du texte<input type="color" id="couleur"/><br/>
<button id="bold">Gras</button>
<button id="italic">Italic</button>
<button id="url">Inserer url</button>
<button id="img">Insert image</button>
</div>
<div contenteditable="true" id="edit"></div>
<button id="show_result">Afficher le résultat</button>
<div id="result"></div>
<script>
var edit = document.getElementById("edit")
var btns = document.getElementById("btns")
var editColor = btns.querySelector("#couleur")
var editBold = btns.querySelector("#bold")
var editItalic = btns.querySelector("#italic")
var editLink = btns.querySelector("#url")
var editImg = btns.querySelector("#img")
function setColor(couleur){
document.execCommand('styleWithCSS', false, true);
document.execCommand('foreColor', false, couleur);
}
setColor(editColor.value)
editColor.addEventListener("change" , function(event){
setColor(editColor.value)
})
editBold.addEventListener("click" , function(event){
document.execCommand("bold", false, null)
})
editItalic.addEventListener("click" , function(event){
document.execCommand("italic" , false , null)
})
editLink.addEventListener("click" , function(event){
var link = prompt("lien a ajouter")
var linkTxt = prompt("text cliquable du lien")
edit.innerHTML = edit.innerHTML + "<a target='_blank' href=" + link + ">" + linkTxt + "</a>"
})
editImg.addEventListener("click" , function(event){
var linkImg = prompt("lien de l'image")
edit.innerHTML = edit.innerHTML + "<img src='"+linkImg+"'/>"
})
var res = document.getElementById("result")
var btnres = document.getElementById("show_result")
btnres.addEventListener("click" , function(event){
res.innerHTML = edit.innerHTML
})
</script>
</body>
</html>
- Edité par Anonyme 26 mai 2017 à 19:58:53
Cree un texte area like openclassroms
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Le CSS ça peut craindre -->Conférence CSS3.CREATE