Un simple, JavaScript riche éditeur de texte qui produit conforme tags?

Je suis en train de développer une application web qui permettra aux utilisateurs de stocker une petite "à propos de moi" section sur eux-mêmes. Pour des raisons de simplicité, je veux utiliser un JS-éditeur standard de fonctionnalités de mise en forme, c'est à dire. le gras, l'italique, le soulignement, les différentes tailles de polices et de couleurs, etc.

J'ai essayé de rouler le mien, mais j'ai trouvé que contentEditable a une fâcheuse tendance à se produire de différentes étiquettes dans les différents navigateurs (par exemple, certains insérer plus de balises br que d'autres, certains diviser les paragraphes dans les balises p différemment...), et depuis le stockage du HTML brut, il est hors de question pour des raisons de sécurité, je l'ai trouvé incroyablement difficile à écrire un analyseur qui peut rendre compte de toutes ces différences, et de stocker le résultat correctement dans un format standard (ie. remplacement à chaque retour à la ligne avec \n pour le stockage est plus difficile que pour une opération de remplacement).

Donc, existe-il des éditeurs de texte qui fonctionne dans la plupart/tous les navigateurs modernes, et plus important encore, de produire les mêmes balises dans chaque navigateur afin que je puisse les analyser de la même façon?

Merci d'avance! ^^

vous pouvez vous masser le html sur le backend, ou utiliser un abattement de l'analyseur.
Par la proximité des raisons, "Questions nous demandant de recommander ou trouver un outil, une bibliothèque ou un favori off-site de ressources sont hors sujet pour Stack Overflow car ils ont tendance à attirer les opinions des réponses et des spam".

OriginalL'auteur user2589389 | 2013-07-17

3

Je pense que si vous voulez un Éditeur WYSIWYG, alors il n'y a pas moyen de contourner contenteditable. Toutefois, comme la question est la structure sémantique du HTML puis j'ai trouvé une bibliothèque qui permettra d'assurer le code html sémantique, simple et propre:

https://jakiestfu.github.io/Medium.js/

La solution est ce qu'ils utilisent ici dans stackexchange. Un inputfield où vous pouvez placer différentes balises de formatage. phpBB utilise simlar approche avec le BBCode. Vous aurez besoin d'un analyseur de côté de serveur que vous pourriez avoir à écrire si vous ne pouvez pas en trouver un.
Plus d'infos:

https://code.google.com/p/pagedown/

https://code.google.com/p/markdownsharp/ (C#)

http://www.bbcode.org/

http://webcheatsheet.com/javascript/bbcode_editor.php (PHP)

Medium.js semble prometteur, mais je ne comprends pas comment vous êtes censé l'utiliser dans une page dynamique de l'édition de situation, c'est à dire un document que je pourrais chargement pour chaque élément contenteditable dans l'élément tout temps, il est cliqué sur ai - je besoin de créer un nouveau Moyen pour chaque élément, tel qu'il devient contentEditable? Si oui, comment dois-je détruire le Moyen de l'élément lorsque je ne veux pas qu'il contentEditable plus? Est de créer/détruire bien des cas un problème?
Semble que vous êtes en mesure d'ajouter un élément unique dans le Moyen et non pas une collection, donc je ne pense pas qu'il n'y a pas moyen d'avoir à nouveau chaque élément. Vous pouvez définir la contentEditable en JS comme ceci: document.getElementById("secondaire").contentEditable = false; (src: w3schools.com/jsref/prop_html_contenteditable.asp). Vous aurez probablement obtenir de meilleures réponses si vous postez une question

OriginalL'auteur Arne H. Bitubekk

C'est tellement simple et ne pas créer un script de conflit:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>Classic editor with default styles</title>
    <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>

<body>

    <textarea cols="80" id="editor1" name="editor1" rows="10" >&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
    </textarea>

    <script>
        CKEDITOR.replace( 'editor1', {
            height: 260,
            width: 700,
        } );
    </script>
</body>

</html>

OriginalL'auteur Lokesh Das

2

Vous pouvez utiliser mon éditeur est créé, basé sur JavaScript plage de sélection de l'API en mode natif, et ne repose pas sur document.execCommand qui se comporte de façon différente à travers les navigateurs.

https://github.com/tovic/rich-text-editor

Cet éditeur de texte enrichi est conçu pour être utilisé sur public formulaire HTML, donc c'est adapté pour vous.

Je l'ai trouvé incroyablement difficile à écrire un analyseur qui peut rendre compte de toutes ces différences, et de stocker le résultat correctement dans un format standard (ie. remplacement à chaque retour à la ligne avec \n pour le stockage est plus difficile que pour une opération de remplacement).

L'éditeur de simplement traiter les deux saut de ligne comme nouvelles <p> section et unique saut de ligne comme un <br>. Vous pouvez facilement jouer avec eux.

OriginalL'auteur Taufik Nurrohman
1

Bouclier de l'INTERFACE utilisateur de L'Éditeur WYSIWYG est également un très bon éditeur.

OriginalL'auteur Vladimir Georgiev

Vous devez vous connecter pour publier un commentaire.