web-dev-qa-db-fra.com

Contenteditable div vs iframe dans la création d'un éditeur de texte riche / wysiwyg

j'essaie de peser les avantages et les inconvénients de l'utilisation d'un <div> contre <iframe> pour créer mon propre éditeur de texte enrichi/wysiwyg.

Ce faisant, pourquoi ne puis-je pas simplement utiliser un contenteditable<div> Et pourquoi tant de gens préfèrent-ils le <iframe>?

Discussion d'arrière-plan: Une façon courante de créer un éditeur wysiwyg d'après ce que je comprends est de créer un div ou une iframe contenteditable puis de faire execCommand sur le document contenant le div ou le iframe body pour rendre son texte en gras ou autre.

Voici le HTML:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
       <div contenteditable="true"></div>
  </body>
</html>

contre.:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
    <iframe>
       <body contenteditable="true"></body>
    </iframe>
  </body>
</html>

et le JS:

$(document.body).on('click', '.btn-bold', function(){
     document.execCommand('bold', false, null); 
});

contre.:

$(document.body).on('click', '.btn-bold', function(){
     window.frames[0].document.body.execCommand('bold', false, null); 
});

Il semble que la plupart des éditeurs de texte enrichi bien conçus utilisent une iframe. Bien que je puisse facilement faire fonctionner ce combo contenteditable/execCommand sur un div/iframe dans les navigateurs Webkit, je passe un temps fou à essayer de faire fonctionner l'iframe dans Firefox. Je dois recourir au chargement de scripts et de feuilles de style dans l'iframe et à toutes sortes d'absurdités pour dupliquer ce que je peux facilement accomplir avec la version basée sur div. La méthode basée sur <div> Semble donc préférable. Y a-t-il de bonnes raisons pour lesquelles je reconsidère?

javascriptjquerywysiwygcontenteditableexeccommand
28
tim peterson

Raisons de iframe

Avantages

  1. Isolation CSS
  2. Isolement de sécurité (je ne suis pas en mesure de détailler ce point, je répète ce que j'ai lu)

les inconvénients

  1. Plus lourd (mais pas à un point significatif/perceptible)
  2. Plus difficile d'accès depuis JavaScript.

Personnellement, j'ai développé mon propre éditeur et j'ai choisi de le mettre dans un iframe.

17
Benibur

Tout d'abord ... N'essayez pas de créer votre propre éditeur WYSIWYG si vous envisagez une utilisation commerciale. C'est une bonne idée pour un projet personnel, car vous pouvez apprendre beaucoup , mais il vous faudra des années pour créer un éditeur que vous pourrez vendre à quelqu'un qui se soucie de savoir si cela fonctionne vraiment, pas seulement de son apparence. J'ai vu récemment de nouveaux éditeurs vraiment cool, mais ils ne fonctionnent vraiment pas. Vraiment. Et ce n'est pas parce que leurs développeurs sont nuls - c'est parce que les navigateurs sont nuls.

OK, c'était une excellente intro, maintenant quelques faits:

  1. Je suis l'un des développeurs de CKEditor.
  2. Il est développé depuis environ 10 ans.
  3. Nous avons encore environ 1 000 numéros actifs sur notre Trac.
  4. Nous ne sommes pas nuls dans le développement Web: P.

Maintenant la réponse - en plus de ce que Tim Down a écrit ici construction d'un éditeur wysiwyg vous pouvez lire ce que j'ai écrit sous cette question éditeur HTML WYSIWYG: pourquoi le contenu modifiable est-il déplacé dans un iFrame

Fondamentalement, dans une iframe, vous êtes plus en sécurité, vous avez un document entier, le contenu ne s'échappera pas de votre élément modifiable, vous pouvez utiliser des styles, etc. Il y a aussi peu d'inconvénients de l'approche iframe - c'est plus lourd, bootstrap le code est ... vraiment délicat, vous ne pouvez pas hériter des styles du site Web auquel l'éditeur est attaché, je suppose que la gestion du focus peut être plus difficile dans ce cas et vous devez faire attention dans quel document vous 'créer de nouveaux éléments (pertinent uniquement dans IE <8).

Et rappelez-vous - n'écrivez pas votre propre éditeur à moins d'être préparé à des problèmes comme celui-ci Coller en texte brut Contenteditable div & textarea (Word/Excel ...) : D

29
Reinmar