Partage

Cree un texte area like openclassroms

Sujet résolu
19 mai 2017 à 19:59:54

Bonjour 

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.

merci beaucoup. 

19 mai 2017 à 21:12:02

T'as le même ici. après libre à toi de le personnaliser à la façon openclassrooms :)

TinyMCE

Zut grillé par Lucky13 ^^

-
Edité par stefde3 19 mai 2017 à 21:12:32

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
24 mai 2017 à 22:23:11

merci je vais suivre le cours sur open 

merci beaucoup 

Anonyme
26 mai 2017 à 8:43:03

essaie ca 

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é.
  • Editeur
  • Markdown