Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Editeur html en javascript

16 réponses
Avatar
JC
Bonjour,

Auriez-vous connaissance d'un script fait en JavaScript qui pourrait simuler
un éditeur de texte dans un textarea et ensuite on sélectionne des mots et
on clique sur un bouton (bold) qui intègre automatiquement les balises html?

Merci.

10 réponses

1 2
Avatar
SAM
Le 12/13/08 12:24 AM, JC a écrit :
Bonjour,

Auriez-vous connaissance d'un script fait en JavaScript qui pourrait
simuler un éditeur de texte dans un textarea et ensuite on sélectionne
des mots et on clique sur un bouton (bold) qui intègre automatiquement
les balises html?



BBcode ? XBBcode ? Javascript+BBcode (google et wikipedia connaissent)

<http://actuel.fr.selfhtml.org/articles/javascript/bbcode/index.htm>
<http://www.editeurjavascript.com/scripts/scripts_formulaires_3_318.php>
<http://quentinc.net/javascript/script47-previsualisation-du-bbcode-en-live-!/>


Pas en rapport direct mais :
<http://bbcomposer.elitwork.com/>

--
sm
Avatar
davel_x
JC a écrit :
Bonjour,

Auriez-vous connaissance d'un script fait en JavaScript qui pourrait
simuler un éditeur de texte dans un textarea et ensuite on sélectionne
des mots et on clique sur un bouton (bold) qui intègre automatiquement
les balises html?



Pour les gros lourds (mais alors vraiment lourds !) tu as ça :
http://www.fckeditor.net/
http://tinymce.moxiecode.com/
ou
http://xinha.webfactional.com/

Et il doit y en avoir de plus légers, comme celui-ci
http://koivi.com/WYSIWYG-Editor/

Sinon tu as une bonne liste ici :
http://www.geniisoft.com/showcase.nsf/WebEditors
(elle n'est peut-être pas si à jour que ça)


--
**davel**
http://www.davel.fr/blog/
Avatar
SAM
Le 12/13/08 5:38 AM, davel_x a écrit :
JC a écrit :
Bonjour,

Auriez-vous connaissance d'un script fait en JavaScript qui pourrait
simuler un éditeur de texte dans un textarea et ensuite on sélectionne
des mots et on clique sur un bouton (bold) qui intègre automatiquement
les balises html?



Pour les gros lourds (mais alors vraiment lourds !) tu as ça :
http://www.fckeditor.net/



Il y en a vraiment trop, non ?
et le résultat parait être presque acceptable :
(il connaissent les accents)
<h1><span style="font-family: Comic Sans MS;"><span style="color:
rgb(255, 0, 0);">titre: <span style="color: rgb(153, 204,
0);">&eacute;l&eacute;phant</span><br />
</span></span></h1>

http://tinymce.moxiecode.com/



3 plombes à se charger ...
même genre de résultat que ci-avant.

ou
http://xinha.webfactional.com/



Là, la demo n'arrive même pas à se charger
<http://xinha.raimundmeyer.de/x_examples/ext_example.html>

Et il doit y en avoir de plus légers, comme celui-ci
http://koivi.com/WYSIWYG-Editor/



Celui-là ne fonctionne pas chez moi :
- impossible d'avoir les palettes (couleur)
- le code résultant est nul :
exemple :
<h1><font size="+1"><span style="font-family:
fantasy;">éléphant</span></font></h1>

Outre la chierie d'imbrications +/- habituelle,
ils utilisent <font>
ils ne connaissent que l'amerlock :-(

Sinon tu as une bonne liste ici :
http://www.geniisoft.com/showcase.nsf/WebEditors
(elle n'est peut-être pas si à jour que ça)



Merci pour ces bonnes infos.

--
sm
Avatar
TJ
On 2008-12-13, JC wrote:
Bonjour,



Bonjour,

Auriez-vous connaissance d'un script fait en JavaScript qui pourrait simuler
un éditeur de texte dans un textarea et ensuite on sélectionne des mots et
on clique sur un bouton (bold) qui intègre automatiquement les balises html?



Je crois qu'il n'a pas encore été cité alors mon préféré :

http://www.wymeditor.org/

Je cite les fonctionnalités car à l'époque ça répondait à certains
critères dont j'avais besoin, en particulier de faire du code « propre »
d'être suffisamment léger et de pouvoir réutiliser des CSS etc...

* XHTML strict + CSS compliant
* No font or text formatting, sizes or colors - WYMeditor is
* CSS-based
* Designed to be easy to integrate into your application
* No installation needed - this is 100% Javascript code - no plugin,
* no extension
* Will remain as simple as possible
* We focus on well-tested code, stability and usability before
* adding new features
* Image, link, table support
* Skins support via CSS
* Internationalization
* APIs, plugins support
* Free and Open Source, fully adaptable to your needs
Avatar
SAM
Le 12/13/08 2:36 PM, TJ a écrit :
On 2008-12-13, JC wrote:
Bonjour,



Bonjour,

Auriez-vous connaissance d'un script fait en JavaScript qui pourrait simuler
un éditeur de texte dans un textarea et ensuite on sélectionne des mots et
on clique sur un bouton (bold) qui intègre automatiquement les balises html?



Je crois qu'il n'a pas encore été cité alors mon préféré :

http://www.wymeditor.org/



Ou bien je n'ai pas ce qu'il faut pour m'en servir, ou bien les démos
sont incomplètes, ou bien je n'ai rien compris.
- Je n'ai pas de choix de couleurs
- je n'ai pas de choix de polices
- je n'ai pas le choix emphase ni radius (qui ne fait rien chez moi)
ici :
<http://files.wymeditor.org/wymeditor/trunk/src/examples/11-custom-parser.html>

et à More inline elements :
<http://files.wymeditor.org/wymeditor/trunk/src/examples/14-more-inline-elements.html>
je n'ai rien des "abbr, acronym, cite, code, del, ins and span"

--
sm
Avatar
Pierre Goiffon
davel_x wrote:
Pour les gros lourds (mais alors vraiment lourds !) tu as ça :
http://www.fckeditor.net/
http://tinymce.moxiecode.com/



J'allais répondre par ces deux : ce sont les 2 produits les plus
universellement utilisés à mon sens aujourd'hui.
Pourriez-vous préciser le "vraiment très lourds" ?
Avatar
TJ
On 2008-12-13, SAM wrote:
http://www.wymeditor.org/



Ou bien je n'ai pas ce qu'il faut pour m'en servir, ou bien les démos
sont incomplètes, ou bien je n'ai rien compris.
- Je n'ai pas de choix de couleurs
- je n'ai pas de choix de polices



Non car pour mettre des couleurs (ou font) l'éditeur serait obligé de
le mettre en dur dans des attributs style="" par exemple (je ne sais pas
comment font ceux qui permette ce choix). En ce qui me concerne je ne le
*désire pas*.

L'idée est plutôt de réutiliser des classes que tu auras de toute
façon déjà définies dans des CSS côté front (dans une logique front/back
office, avec l'éditeur HTML en back). Ça limite les possibilités de
mises en forme, en les contraignant, mais cette contrainte peut être
souhaité.

Lorsque tu définis des styles assez particuliers en CSS pour tout
l'univers d'un site, et que tout « est stylé », autant réutiliser ces
styles, plutôt que de refaire du bidouillage de choix de couleur ou
autre dans l'éditeur HTML.

J'explique sûrement mal, mais en ce qui me concerne cette approche
dans bien des projets est souhaitable, par exemple (pour des sites
vendus à des clients) le client qui administre son site sera bien
incapable de récupérer un code couleur et de reproduire exactement la
même dans l'éditeur, ce qui fait qu'on aura (par exemple) deux
« rouges » légèrement différents car celui proposé par défaut par un
éditeur permettant le choix des couleurs ne sera pas tout à fait le
même qu'un rouge subtil choisi en front.

Cet éditeur permet de renommer les classes et éléments HTML, donc on
peut mettre des noms parlant pour un utilisateur final :

* « Titre d'actualités » et derrière ça met en place la classe
news_title
* « Note informative » et derrière ça utilise une classe .note qui par
exemple réduit le font-size, ajoute un border, du padding...

L'idée est de ce « caler » sur la CSS, qu'on sera souvent de toute
façon obligé de faire.

- je n'ai pas le choix emphase ni radius (qui ne fait rien chez moi)
ici :
<http://files.wymeditor.org/wymeditor/trunk/src/examples/11-custom-parser.html>



Pour la balise radius je ne connais pas, par contre chez moi l'emphase
ajoute bien <em>la_chaine</em>.

et à More inline elements :
<http://files.wymeditor.org/wymeditor/trunk/src/examples/14-more-inline-elements.html>
je n'ai rien des "abbr, acronym, cite, code, del, ins and span"



Ils sont visiblement sur les deux derniers boutons de la barre
d'outils.


Cela dit je ne cherche pas à le défendre à tout prix en ce qui me
concerne voici surtout ce qui m'intéresse :

* plutôt que de mettre des styles en dur, il a l'approche de permettre
la réutilisation de styles généraux définis dans une CSS

* sort de l'HTML « suffisamment » propre

* moins lourd que FCKeditor ou TinyMCE, en terme de taille, de nombre de
fichiers, ou de besoins côté client (ça a peut-être changé depuis que
j'avais fait mon constat)
Avatar
Pierre Goiffon
TJ wrote:
L'idée est plutôt de réutiliser des classes que tu auras de toute
façon déjà définies dans des CSS côté front (dans une logique front/back
office, avec l'éditeur HTML en back). Ça limite les possibilités de
mises en forme, en les contraignant, mais cette contrainte peut être
souhaité.



La révision majeure 2.5 de FCK Editor était censé apporter cette
souplesse : pouvoir définir très précisément le markup correspond à
chaque actions ! Pas eu le loisir de tester encore (implémenté une
version plus ancienne de l'éditeur) mais ça semblait prometteur, et
répondre exactement à votre besoin.
Avatar
TJ
On 2008-12-16, Pierre Goiffon wrote:
TJ wrote:
L'idée est plutôt de réutiliser des classes que tu auras de toute
façon déjà définies dans des CSS côté front (dans une logique front/back
office, avec l'éditeur HTML en back). Ça limite les possibilités de
mises en forme, en les contraignant, mais cette contrainte peut être
souhaité.



La révision majeure 2.5 de FCK Editor était censé apporter cette
souplesse : pouvoir définir très précisément le markup correspond à
chaque actions ! Pas eu le loisir de tester encore (implémenté une
version plus ancienne de l'éditeur) mais ça semblait prometteur, et
répondre exactement à votre besoin.



Merci pour cette information c'est intéressant, cela dit une des
raisons de mon passage à wymeditor (en dehors de la raison ci-dessus),
était justement de remplacer FCK Editor que je trouvais un poil trop
lourd ;-)
Avatar
Pierre Goiffon
TJ wrote:
Merci pour cette information c'est intéressant, cela dit une des
raisons de mon passage à wymeditor (en dehors de la raison ci-dessus),
était justement de remplacer FCK Editor que je trouvais un poil trop
lourd ;-)



Devx a déjà parlé de "gros lourds" à propos de FCK et TinyMCE et j'avais
déjà demandé des précisions, je fais donc la même chose suite à votre
message ? UN poil trop lourd, qu'est-ce que ça veut dire dans les détails ?
1 2