Suis-je fou? (Comment) dois-je créer un éditeur de contenu jQuery?

Question

Ok, j'ai donc créé un CMS principalement destiné aux Écoles Primaires. Il devient assez populaire en Nouvelle-Zélande, mais la seule chose que je déteste avec une passion est en grande partie sur la mauvaise qualité de la dans le navigateur des éditeurs WYSIWYG. J'ai été en utilisant KTML (faite par InterAKT qui a été acheté par Adobe il y a quelques années). À mon avis, cet éditeur fait beaucoup de grandes choses (retouche d'image/gestion, thumbnailing et un assez bon d'édition de contenu). Malheureusement, le temps a fait son méchant chemin avec ce produit et de nouveaux navigateurs commencent à briser les caractéristiques et généralement dégrader les performances de cet outil. C'est aussi assez effrayant de baser ma vie sur une défunte produit!

J'ai été à la chasse, en fait, j'ai régulièrement chasser autour pour voir si quelque chose a changé dans le WYSIWYG arène. La chose la plus proche que j'ai vu qui m'excite est le WYSIHAT cadre, mais ils ont décidé d'ignorer une jolie pertinentes de l'édition de paradigme que je vais décrire ci-dessous. C'est l'idée proposée pour mon éditeur, et je ne sais pas du tout les produits existants qui peuvent le faire correctement:

Droit, de sorte que le modèle traditionnel de l'édition, disons, d'une Page dans un CMS est de vous connecter à un 'back-end' et cliquez sur modifier dans la page. Ce sera ensuite de charger un autre écran avec l'éditeur et peut-être quelques autres domaines. Plus avancé de la CMS sera peut-être avoir plusieurs montage de boîtes à pour les différentes parties de la page. De toute façon, le gros problème avec cette façon de faire est que l'utilisateur est en train de modifier un document en dehors de la finale contexte, il apparaîtra dans. En termes simples, cela signifie que le modèle de page. Beaucoup de choses peuvent être mal, par exemple, le avec de la zone d'édition peut être différente de la largeur de la modèle de la zone. La hauteur est presque toujours fixe, parce que les éditeurs semblent toujours utiliser des IFRAMES pour la compatibilité descendante. Et il y a beaucoup d'autres renforce les fonctions dont je suis sûr que vous êtes tout à fait conscient de si vous êtes dans cette zone de développement.

Voici mon éditeur de l'utopie:

Vous cliquez sur "Modifier la Page": La page réelle (avec son modèle réel) s'affiche. Des parties de la page qui ont été marqués comme modifiable via un nom de classe. Vous cliquez sur l'un de ces domaines (dans mon cas, il avait juste être le grand "corps" de la zone au moyen du modèle) et une barre d'édition des gouttes vers le bas à partir du haut de l'écran avec toutes vos commandes standard (gras, italique, insérer une image, etc...). Iframes ne sont jamais utilisés, au lieu de cela, nous nous appuyons sur la définition de contentEditable de vrai sur le DIV en question. La version 2 de Firefox et IE6 peut aller loin, passons. Vous pouvez modifier la page, en sachant exactement à quoi il ressemblera quand vous l'enregistrez. Parce que tous les styles de ce modèle sont chargés, vos en-têtes de l'air correct, tout sera juste dandy. Est-ce un tel concept radical? Pourquoi sommes-nous toujours du contenu avec TinyMCE et que d'autres l'éditeur qui est trop embarrassant pour les utiliser parce qu'il sonne comme un gros mot!?

Regardons les choses en face:

Je suis un JavaScript novice. Je l'ai fait une fois jouer dans ce domaine à l'aide de Javascript Anthologie de SitePoint comme un guide. C'était assez cool expérience d'apprentissage, mais elles sont bien sûr utilisé les IFRAME pour leur rendre la vie plus facile. J'ai essayé d'aller un itinéraire différent et il suffit d'utiliser contentEditable et même essayé de contourner le natif d'édition de contenu routines (execCommand) et plutôt écrit mon propre. Elles ont travaillé, mais il y avait toujours des problèmes.

Maintenant, nous avons jQuery, et un peu de bibliothèques que les choses abstraites comme IE manque de support de la Fourchette. Je me demande, suis-je fou, ou est-ce réellement une bonne idée d'essayer de construire un éditeur autour de cette édition de paradigme à l'aide de jQuery et pertinentes plugins pour rendre le travail plus facile?

Mes questions:

• Où voulez-vous commencer?
• Quels sont les plugins savez-vous de qui aiderait l' la plupart des?
• Ça vaut le coup, ou est-il un magiques projet qui existe déjà que je devrais rejoindre?
• Quels sont les plus grands obstacles à surmonter dans un ce genre de projets?
• Suis-je fou?

J'espère que cette question a été posté sur le droit du conseil. J'ai pensé que c'est une question technique, car je suis désireux de savoir spécifique obstacles et les écueils à éviter et aussi si il est techniquement possible avec la technologie d'aujourd'hui.

Hâte d'entendre les peuples des pensées et des opinions.

Mise à JOUR

J'ai décidé que je vais avoir un aller à ce et va commencer un projet github pour ça quand j'ai quelque chose de cool à regarder. À partir de là, je serais tout à fait heureux pour toute aide que les gens ont à offrir. Il sera open source, bien sûr :)

Mise à JOUR 2

J'ai fait le projet et décrit les objectifs. Laissez-moi savoir si vous voulez vous joindre au groupe de projet en tant que contributeur, mais je vais commencer par les bases en premier donc il ya quelque chose pour commencer.

Voici le lien: http://github.com/brendon/SpikeEdit

Mise à jour 3

Wow! J'ai trouvé ce projet. Quelle bonne idée! Je reçois en contact avec lui pour voir si il a jamais eu n'importe où avec elle:

http://www.fluffy.co.uk/stediting

Mise à jour 4

Ok, je suis raisonnablement loin. Les problèmes les plus importants (comme chacun sait) comment garder le code généré dans un état raisonnable d'affaires. WYSIHAT semble prendre toute la part de non-IFRAME chose, donc je m'accroche pour voir dans quelle mesure ils se. Ils prennent l'approche de nettoyage le code à la fin de l'édition de cycle. Je pense qu'il devrait être nettoyé à la volée sinon, vous pouvez modifier vous-même dans un bourbier (je l'ai fait à quelques reprises). Quand j'ai le temps je vais enquêter sur une sorte d'homogénéisation moteur qui pourrait être relié à rendre le processus d'édition se comportent comme de la même manière que possible dans tous les navigateurs modernes.

Answer 1

Je suis entièrement d'accord avec votre suggestion d'un éditeur de balisage et les iframes sont tellement 2001 :) Le monde est à la tête de la sémantique nous avons donc besoin d'outils modernes pour en modifier le contenu. (voir mes photos http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable) j'ai commencé à l'Aloha (Éditeur http://aloha-editor.org) plus ou moins avec la même intention que le vôtre au-dessus de derrière. L'utopie :-) dans notre cas, est devenue plus ou moins la réalité et nous avons déjà quelques logiciels de les utiliser:

Ces sont connus pour utiliser des Aloha Éditeur principal de l'éditeur

• Typo3 (dans la prochaine version majeure V5 http://latest.phoenix.demo.typo3.org/. Cool les gars, énorme cms opensource dans l'UE. Environ 500 000 utilisateurs)

• Gentics De Contenu.Nœud V5 (d'Abord connaître grand système de production à l'aide de Aloha de l'Éditeur. Client avec 16.000 utilisateurs. http://gentics.com/Portal.Node/blog-detail/gentics/postings/company/Telekom-Austria-Group---communication-with-16-000-em.en.html)

Ces systèmes sont connus pour avoir des plugins

• Drupal (cms opensource https://github.com/evo42/aloha-drupal)

• Midgard (cms opensource http://www.midgard-project.org/discussion/developer-forum/aloha_editor-and_hrungnir_user_interface/)

• quelques autres projets que j'ai entendu, mais je ne sais pas

Nous souhaitons la bienvenue à tous les développeurs quelle veut participer, contribuer, participer, commentaires ou quoi que ce soit. Nous voulons garder la feuille de route de développement et aussi ouvert que possible pour tout le monde. Commentaires sont les bienvenus!

Answer 2

Ok, wow! Ces gars font exactement ce à quoi je pensais:

http://aloha-editor.com/

Je n'aime pas beaucoup leur barre d’outils mais leur fonctionnalité est superbe! Je garderai un œil sur leurs progrès :)

Answer 3

Cela peut aider.

Joe Armstrong avait à peu près la même idée que vous avez un peu de temps il ya et a passé une semaine à jouer avec ContentEditable jumelé avec CouchDB pour la persistance. Il n'était pas très poli de l'éditeur, mais c'est un bon point de départ pour rouler vos propres (si c'est ce que vous voulez faire). Il me semble qu'il serait assez simple de prendre ce qui est là-bas et obtenir en un solide dans le contexte de l'éditeur.

Comme une note, je suis d'accord avec votre idée que la modification des interfaces doivent être placés dans leur contexte et à la mise en page à l'artefact qu'ils sont de modifications que possible. Laissez-moi savoir si vous finissez de rouler votre propre; je serais intéressé à participer à un projet comme celui-ci.

Avant de sortir et de faire un éditeur bien, il pourrait payer pour vérifier ce que vos utilisateurs sont en train de faire. Dans l'informatique d'entreprise, neuf fois sur dix, ce que vous allez voir, c'est les gens de mettre leurs pages dans Word ou somesuch, puis coller les résultats dans tout ce "éditeur" vous avez. Je ne pense pas que cela fonctionnerait aussi bien avec le ContentEditable méthode. D'ailleurs, c'est pourquoi nous continuons à l'utiliser TinyMCE; il a une demi-chemin décent "Coller à partir de Word" bouton. Vous êtes visant l'outil écoles primaires, plutôt que de l'environnement d'une entreprise, donc les choses peuvent être différentes.

Answer 4

Avez-vous essayé uEditor ? C'est une solution simple et solide qui transforme les zones de texte en éditeurs WYSIWYG

 //Grab the content of the editable area then replace it with a textarea like so...

var editableContent = $(selector).html();
$(selector).after("<textarea>" + editableContent + "</textarea>")

// add attributes to text area as desired

// kill the original area:

$(selector).remove();

// call uEditor

$(textareaSelector).uEditor({options});
 

Vous ajouterez évidemment des options et des gestionnaires d’événements à uEditor.

Juste une pensée. Rob

Answer 5

JQuery a un grand nombre d'éditeurs WYSIWYG, mais pour être honnête, j'ai été déçu par la plupart d'entre eux. Ce que vous suggérez des sons très utile. Voici comment je ferais:

D'abord un objet ne reçoit que des événements de touche quand il a le focus. La meilleure façon de contourner ce problème est d'attraper des événements clés au niveau de la page. Puis ajouter le caractère correct de la div qui est actuellement en cours d'édition. Qui pourrait gérer une base de taper dans tous les div qui sera probablement la première chose que vous voulez aborder.

Ensuite, vous voulez une barre d'outils qui devraient probablement être tirée de la page par réglage de l'affichage fixe. Vous auriez besoin d'un peu de logique pour insérer travées et de tel pour gérer esthétique du texte.

Bien sûr, si vous construisez tout cela vous-même, vous aurez besoin de construire tout - même le curseur clignotant indiquant où se trouvent vos caractères tapés aller. La sélection de texte, insérer le curseur dans le texte, copier et coller, vous feriez à peu près à construire toutes les choses que nous allons utiliser pour arriver à partir de zéro. L'autre option est d'utiliser une sorte de zone de texte, mais si je comprends bien, vous voulez éviter que.

De toute façon, mon verdict final est que son possible, mais il serait encore beaucoup de travail. Il semble que il ya beaucoup d'intérêt dans le bien, de sorte que vous pourriez probablement obtenir de l'aide.