Définition du contenu

Pour une performance optimale, privilégiez la première approche présentée ci-dessous.

Initialisation via HTML

Intégrez directement le contenu dans l'élément div destiné à l'éditeur lors de sa création.

<div id="conteneur-edit">
    <p>Texte initial</p>
    <p>Contenu supplémentaire</p>
</div>

<script src="/chemin/wangEditor.min.js"></script>
<script>
    var WE = window.wangEditor;
    var editeurInst = new WE('#conteneur-edit');
    editeurInst.creer();
</script>

Définition via JavaScript

Une fois l'éditeur instancié, utiilsez la méthode dédiée pour modifier le contenu programmatiquement.

<div id="conteneur-edit"></div>

<script src="/chemin/wangEditor.min.js"></script>
<script>
    var WE = window.wangEditor;
    var editeurInst = new WE('#conteneur-edit');
    editeurInst.creer();
    editeurInst.txt.html('<p>Contenu chargé par script</p>');
</script>

Ajout de contenu

Pour insérer du contenu additionnel après l'initialisation, employez la fonction d'ajout.

Exemple : editeurInst.txt.append('<p>Nouveau élément</p>')

Effacement du contenu

Pour réinitialiser l'éditeur, invoquez la méthode de effacement.

Exemple : editeurInst.txt.clear()

Lecture du contenu

Le contenu peut être extrait sous forme de balisage HTML ou de texte simple.

<div id="conteneur-edit">
    <p>Bienvenue dans l'éditeur</p>
</div>
<button id="recuperer-html">Extraire HTML</button>
<button id="recuperer-texte">Extraire Texte</button>

<script src="/chemin/wangEditor.min.js"></script>
<script>
    var WE = window.wangEditor;
    var editeurInst = new WE('#conteneur-edit');
    editeurInst.creer();

    document.getElementById('recuperer-html').addEventListener('click', function () {
        // Extraction du code HTML
        var contenuHtml = editeurInst.txt.html();
        alert(contenuHtml);
    });

    document.getElementById('recuperer-texte').addEventListener('click', function () {
        // Extraction du texte brut
        var contenuTexte = editeurInst.txt.text();
        alert(contenuTexte);
    });
</script>

Attention : Le HTML obtenu ne contient aucun style intégré. Pour une mise en forme personnalisée (par exemple, pour appliquer des thèmes), ciblez des balises spécifiques avec du CSS. Voici des règles typiques utilisées dans l'éditeur :

/* Mise en forme des tableaux */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* Mise en forme des citations */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* Mise en forme du code */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* Mise en forme des listes */
ul, ol {
  margin: 10px 0 10px 20px;
}