Si tu as un exemple d'éditeur de code que tu as vu sur un site particulier et que tu peux nous montrer ce serait pas de refus... Je ne comprends absolument rien dans ta demande et je suis perdu...

Il me faudrait un exemple pour t'aider plus car là ta demande est trop vague...

Compte-supprimé

Le 11 juillet 2020 à 23:21 (Édité)

@Jerem971,

En gros je veux modifier une page par une page et je veux pas mettre le css dans la même page que le html. Mais sinon, je me contente de çà.

Jerem971

Le 11 juillet 2020 à 14:29

Re:

Qu'entends-tu par "une seule page" ? 🤔 L'éditeur est sur une seule page, le code, il faut que tu l'organises par contre...

Tu peux rajouter PHP dans le code que je t'ai fourni, c'est le même principe que j'ai fait pour HTML, CSS et JavaScript 😉

Compte-supprimé

Le 11 juillet 2020 à 9:19

Hey @Jerem971,

Ce que tu viens de me passer est cool, mais je code aussi en php et je veux faire un editeur d'une seule page.

Merci quand même, ça m'aide pour l'instant

Jerem971

Le 09 juillet 2020 à 17:53

Re:

Si c'est un éditeur de code style CodePen ou JSFiddle, il faut procéder comme suit :

Tu créeras bien sûr une page HTML avec ce code prédéfini :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Le code HTML du squelette de ton éditeur :

<div class="code-area">
    <textarea id="htmlCode" placeholder="Code HTML ici" oninput="showPreview()"></textarea>
    <textarea id="cssCode" placeholder="Code CSS ici" oninput="showPreview()"></textarea>
    <textarea id="jsCode" placeholder="Code JavaScript ici" oninput="showPreview()"></textarea>
</div>
<div class="preview-area">
    <iframe id="preview-window"></iframe>
</div>

Le code CSS pour styliser ton éditeur :

*
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body
{
    height: 100vh;
    display: flex;
}

.code-area
{
    display: flex;
    flex-direction:column;
    width: 50%;
    border-right:1px solid #FF0000;
}

.code-area textarea
{
    resize: none;
    outline: none;
    width: 100%;
    height: 33.33%;
    font-size: 18px;
    padding: 10px;
    border-color: #FF0000;
}

.preview-area
{
    width: 50%;
}

.preview-area iframe
{
    width: 100%;
    height: 100%;
    border: none;
}

Le code JavaScript pour l'interaction utilisateur :

function showPreview(){
    var htmlCode = document.getElementById("htmlCode").value;
    var cssCode = "<style>"+document.getElementById("cssCode").value+"</style>";
    var jsCode = "<scri"+"pt>"+document.getElementById("jsCode").value+"</scri"+"pt>";
    var frame = document.getElementById("preview-window").contentWindow.document;
    frame.open();
    frame.write(htmlCode+cssCode+jsCode);
    frame.close();
}

Est-ce que cela répond à ton besoin ? 🤔

Compte-supprimé

Le 09 juillet 2020 à 8:10

@Jerem971,

Je veux un éditeur de code et pas un editeur de texte

Voilà c'est tout.

Bonne journée.

Jerem971

Le 08 juillet 2020 à 19:55

Re:

Dans la formation PHP puis dans "Editeurs de texte" cela ne correspond pas à ton besoin ? 🤔

Cette pub permet au site de vivre ...

Éditeur de code dans un site

13 commentaires