Comment fonctionnent les éditeurs de texte en ligne?

Question

J'essaie de développer un éditeur en ligne (comme FCKEditor / etc) mais je ne sais pas du tout comment ils fonctionnent. Je sais que les WYSIWYG ont Javascript et les IFrames, mais comment fonctionnent-ils réellement?

Je suis particulièrement curieux de pouvoir avoir un aperçu en temps réel de ce qui est saisi dans l'éditeur.

Answer 1

Les environnements d'exécution sont généralement (toujours?) mis en œuvre à l'aide d'un iframe. L'objet de document disponible dans iframe doit avoir la propriété designMode défini sur . Après cela, il ne vous reste plus qu'à mettre en œuvre les fonctionnalités de base telles que gras, italique, couleur, fond, etc. à l'aide de la méthode execCommand de l'objet document.

La principale raison de l'utilisation d'un iframe est que vous ne perdrez pas le focus de la sélection lorsque vous cliquez sur les boutons de style (Firefox permet de définir cette propriété uniquement sur les iframes). De plus, l’attribut contentEditable n’est pas disponible dans les versions de Firefox antérieures à 3.

Les choses se compliquent un peu lorsque vous voulez faire des choses fantaisistes avec ce RTE. À ce stade, vous devez utiliser les objets Range (qui sont implémentés différemment dans les différents navigateurs). .

Answer 2

FCKEditor est open source et le code source est disponible gratuitement.

Code de l'éditeur utilisé sur Stackoverflow est également disponible

Cela vaut peut-être la peine de passer un peu de temps à lire le code source. Les gens ici se feront un plaisir de vous aider à expliquer tous les éléments de code qui ne sont pas clairs.

Answer 3

Je crois que la clé des éditeurs WYSIWYG réside dans le contenteditable attribut (qui peut s'appliquer à n'importe quelle balise HTML, mais vraisemblablement quelque chose comme un div dans ce cas). Le reste de la fonctionnalité est généralement fourni par Javascript en accédant au DOM et en manipulant le code HTML. En ce qui concerne la fonctionnalité de prévisualisation, il s’agit probablement de lier l’événement généré lorsque l’élément est édité par l’utilisateur, puis de récupérer son code HTML et de l’afficher ailleurs sur la page à l’aide de Javascript relativement simple.

Answer 4

  

(ex: ah, il y a une entrée de texte sans bordure, qui est synchronisée avec la partie réellement affichée. Donc, pour mettre la lettre en rouge, ils ne font que changer de style) et etc ..

c'est comme ça que ça se passe.

Answer 5

Mise à jour: Si vous avez simplement besoin d'un éditeur, je vous suggère d'utiliser l'une des autres suggestions proposées par les utilisateurs. Mais si vous avez un but académique pour construire ceci, ce qui suit sera un tremplin.

Ceci s’accomplit assez facilement (certaines parties). Par exemple, vous pouvez utiliser jQuery pour être opérationnel très rapidement.

div.theScreen {
  width:320px;
  height:75px;
  border:1px solid #CCCCCC;
  background-color:#f1f1f1;
}

<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>

Maintenant que les balises et les styles sont en place, nous pouvons ajouter du code Javascript simple pour déclencher des aperçus en temps réel.

$(document).ready(function(){
  $(".typePad").keyup(function(){
    $(".theScreen").html($(".typePad").val());
  });
});

Ceci est un exemple très brut et simple, mais il vous aidera à démarrer.

Answer 6

J'ai lancé un open source & "sourceforge &"; projet de faire un éditeur de texte riche il y a environ un an et demi. Je n'ai jamais compris comment obtenir mon code là-bas, mais pour le développer, je devais rechercher comment le & "Mode éditable du contenu"! fonctionne dans IE et Firefox. Mes recherches ont principalement porté sur le site Web firefox et le site Web Microsoft.

Le code que j'ai vu pour faire ceci était moche et pas très amical (désolé je suis un objet bigot je ne peux pas m'en empêcher) donc il a fallu beaucoup de re-factorisation pour entrer dans une forme que je pourrait se développer et s'étendre.

Malheureusement, même si vous suivez les fonctionnalités fournies par le " mode éditable du contenu du navigateur " vous aurez toujours un éditeur plein de bogues. La raison en est que le mode éditable du contenu & Quot; ne fonctionne pas de manière cohérente avec le collage à partir de MS Word (tout le monde essaie de le faire) ou la création de listes numérotées, et les annotations générées seront incohérentes et mal formées.

C’est pourquoi j’utilise désormais TinyMCE . TinyMCE est plein de décisions de conception que j'aurais personnellement évitées, mais elles ont corrigé la majorité des bugs que vous rencontrerez en essayant de créer votre propre éditeur. Il propose également de nombreuses fonctionnalités vous permettant de le personnaliser selon vos besoins.

Je ne peux rien recommander d'autre car je n'ai pas vraiment essayé les alternatives.

Bien que TinyMCE semble être la meilleure option, cela reste un casse-tête car coller des documents Word est toujours imprévisible, la promesse WYSIWYG n’est pas vraiment possible en HTML, mais le client s’y attend, et de nombreux problèmes s’insinuent. Une fois que vous commencez à laisser les utilisateurs mettre du HTML brut dans votre base de données. (surtout lorsque votre base de code contient des pièces mises à jour pour la dernière fois en 1993 ...)