4.2.13 Type htmltext
4.2.13.1 Description
Les attributs de type htmltext permettent d'insérer du texte avec mise en forme.
Le langage de mise en forme est le html, et un éditeur WYSIWYG (basé sur CKEditor) permet d'en simplifier la saisie.
4.2.13.2 Représentation
-
consultation :
une
div
contenant la valeur. -
modification :
une
iframe
dans laquelle est initialisé une instance de CKEditor. -
odt :
la mise en forme est conservée.
Se reporter au chapitre sur les vues odt pour les restrictions sur l'utilisation des attributs de type html dans les document openDocument text.
4.2.13.3 Comportement
L'éditeur CKeditor nettoit le code HTML inséré. Il ne conserve que les balises qui peuvent être insérées avec la barre de menu.
3.2.19 Lors de l'enregistrement sur le serveur, le nettoyage suivant est effectué :
- Suppression de tous les attributs commençant par "on" ou "xmlns"
- Suppression du javascript, applet et vbscript (le contenu est conservé sans les balises )
- Suppression des éléments avec namespace
- Les entités UTF-8 sont décodées ;
- Les commentaires sont supprimés.
En ce qui concerne les balises "script", elles ne sont pas autorisées par CKEditor quelque soit la configuration. Le nettoyage côté serveur est réalisé pour les données qui peuvent provenir d'une autre source que l'éditeur web.
3.2.20 Lors de l'affectation de l'attribut, le fragment HTML est controllé afin de vérifier s'il est bien formé et retourne une erreur si ce n'est pas le cas.
4.2.13.4 Format de stockage
La valeur stockée est le html nettoyé selon les règles précédentes.
Le type utilisé en base de donnée est text
.
4.2.13.5 Options
En plus des options communes à tous les types d'attributs, ce type d'attribut dispose des options suivantes :
- doclink
-
Cette option nécessite l'installation du module dynacase-ckeditor-plugins.
Active l'option doclink du HTMLEditor. Cette option se présente sous la forme d'un nouveau bouton (dans la partie réservée au lien dans les toolbar et en fin de toolbar sur la Basic), en cliquant sur le bouton une interface vous propose de sélectionner un document et ajoute une balise de lien vers ce document.
Les valeurs possibles sont :
- un objet JSON (par exemple
{"famId": "DIR", "docrev" : "fixed"}
), contenant les propriétés suivantes :-
famId
(obligatoire) : nom logique de la famille des documents cible, -
docrev
(facultatif) : les valeurs possibles sont les mêmes que l'option docrev des attributs de type docid (latest, fixed, state(keystate)), -
filter
(facultatif) : un filtre SQL qui sera appliqué à la recherche
-
- un objet JSON (par exemple
- editheight
-
Indique la hauteur de la zone d'édition.
Les valeurs possibles sont :
- une taille en pixels (par exemple
400px
)
La valeur par défaut est
150px
. - une taille en pixels (par exemple
- htmlclean
-
Indique que le serveur nettoiera le contenu en supprimant toutes les balises de style, généralement issues d'un copier/coller :
- les attribut des balises
span
(le contenu est conservé) etfont
sont supprimés ; - les attributs
@class
et@style
sont supprimés ; - les balises
style
sont supprimées.
De plus, le fragment HTML est réécrit sous une forme normalisée3.2.20
Les valeurs possibles sont :
yes
no
(comportement par défaut)
- les attribut des balises
- allowedcontent 3.2.20
-
Indique que la liste des balises autorisées n'est pas liée au menu. Toute balise html supportée peut être insérée à l'exception de la balise
script
. Les attributs de ces balises peuvent aussi être utilisées à l'exception des attributs commençant paron
tel queonclick
ouonmouseover
.Les valeurs possibles sont :
-
all
: toute balise supportée est autorisée -
menu
(comportement par défaut) en fonction de la barre de menu (voir optiontoolbar
ci-après).
Les balises supportées sont :
a
,abbr
,acronym
,address
,applet
,area
,article
,aside
,audio
,b
,base
,basefont
,bdi
,bdo
,big
,blockquote
,body
,br
,button
,canvas
,caption
,center
,cite
,code
,col
,colgroup
,command
,datalist
,dd
,del
,details
,dfn
,dialog
,dir
,div
,dl
,dt
,em
,embed
,fieldset
,figcaption
,figure
,font
,footer
,form
,h1
,h2
,h3
,h4
,h5
,h6
,head
,header
,hgroup
,hr
,html
,i
,iframe
,img
,input
,ins
,isindex
,kbd
,keygen
,label
,legend
,li
,link
,main
,map
,mark
,menu
,meta
,meter
,nav
,noframes
,noscript
,object
,ol
,optgroup
,option
,output
,p
,param
,pre
,progress
,q
,rp
,rt
,ruby
,s
,samp
,section
,select
,small
,source
,span
,strike
,strong
,style
,sub
,summary
,sup
,table
,tbody
,td
,textarea
,tfoot
,th
,thead
,time
,title
,tr
,track
,tt
,u
,ul
,var
,video
,wbr
. -
- jsonconf
-
Cette option permet de configurer finement l'éditeur de texte WYSIWYG.
Elle permet notamment de fixer finement le comportement de l'éditeur et le contenu des toolbar. Les options de configuration sont celles de CKEditor, et l'objet de configuration doit être présenté en JSON valide.
Les options propres à CKEditor (resize, correction orthographique, etc) ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
Aux options de CKEDITOR, dynacase ajoute les options suivantes :
-
addPlugin : permet de charger un plugin additionnel.
La valeur doit être un tableau (JSON) de noms logiques de plugins (par exemple:
"addPlugins": ["docattr"]
). Dans ce cas, le plugin doit posséder une commande ayant le même nom que le nom logique du plugin. Cette commande est alors ajoutée en fin de toolbar.
Exemple de configuration permettant d'activer le plugin docattr et le plugin doclink et avec un menu basique et l'activation du mode resize :
jsonconf={"addPlugins" : ["docattr"], "doclink" : {"famId" : "DIR"}, "toolbar" : "basic", "resize_enabled" : true}
Attention : l'utilisation de cette option bas niveau désactive les options suivantes :
- toolbar
- toolbarexpand
- editheight
- doclink
Il est par contre possible de construire une option jsonconf qui a le même effet que les options précédentes.
-
- toolbar
-
Indique le template à utiliser pour la barre de menu.
La barre de menu contraint par défaut la liste des éléments acceptés par l'éditeur de texte.
Pour supprrimer cette contrainte, il faut utiliser l'option
allowedContent
de ckeditor. Exemple pour tout autoriser :jsonconf={"allowedContent" : true, "toolbar" : "Basic"}
Les valeurs possibles sont :
-
Simple
(comportement par défaut) :Les balises et attributs autorisés sont :
- "a[tout attribut] "
- "address"
- "br"
- "caption[text-align]"
- "div[text-align]"
- "em"
- "h1[text-align]"
- "h2[text-align]"
- "h3[text-align]"
- "h4[text-align]"
- "h5[text-align]"
- "h6[text-align]"
- "img[tout attribut] "
- "li[text-align]"
- "ol"
- "p[text-align]"
- "pre[text-align]"
- "s"
- "span[font-size, color, background-color]"
- "strong"
- "table[width, height]"
- "tbody"
- "td[width, height, border-color, background-color, white-space, vertical-align, text-align, text-align]"
- "tfoot"
- "th[width, height, border-color, background-color, white-space, vertical-align, text-align, text-align]"
- "thead"
- "tr"
- "u"
- "ul"
-
Basic
:Les balises et attributs autorisés sont :
- "a[tout attribut] "
- "br"
- "em"
- "img[tout attribut] "
- "li"
- "ol"
- "p"
- "strong"
- "td[width, height, border-color, background-color, white-space, vertical-align, text-align]"
- "th[width, height, border-color, background-color, white-space, vertical-align, text-align]"
- "ul"
-
Default
:Les balises et attributs autorisés sont :
- "a[tout attribut] "
- "address"
- "big"
- "blockquote"
- "br"
- "caption[text-align]"
- "cite"
- "code"
- "del"
- "div[text-align, padding, background, border]"
- "em"
- "h1[text-align]"
- "h2[text-align, font-style]"
- "h3[text-align, color, font-style]"
- "h4[text-align]"
- "h5[text-align]"
- "h6[text-align]"
- "hr"
- "img[tout attribut] "
- "ins"
- "kbd"
- "li[text-align]"
- "ol"
- "p[text-align]"
- "pre[text-align]"
- "q"
- "s"
- "samp"
- "small"
- "span[font-family, font-size, color, background-color]"
- "strong"
- "sub"
- "sup"
- "table[width, height, border-collapse, border-style, background-color]"
- "tbody"
- "td[width, height, border-color, background-color, white-space, vertical-align, text-align, text-align]"
- "tfoot"
- "th[width, height, border-color, background-color, white-space, vertical-align, text-align, text-align]"
- "thead"
- "tr"
- "tt"
- "u"
- "ul[list-style-type]"
- "var"
-
Full
:Les balises et attributs autorisés sont :
- "a[tout attribut] "
- "address"
- "big"
- "blockquote"
- "br"
- "caption[text-align]"
- "cite"
- "code"
- "del"
- "div[text-align, padding, background, border]"
- "em"
- "h1[text-align]"
- "h2[text-align, font-style]"
- "h3[text-align, color, font-style]"
- "h4[text-align]"
- "h5[text-align]"
- "h6[text-align]"
- "hr"
- "img[tout attribut] "
- "ins"
- "kbd"
- "li[text-align]"
- "ol"
- "p[text-align]"
- "pre[text-align]"
- "q"
- "s"
- "samp"
- "small"
- "span[font-family, font-size, color, background-color]"
- "strong"
- "sub"
- "sup"
- "table[width, height, border-collapse, border-style, background-color]"
- "tbody"
- "td[width, height, border-color, background-color, white-space, vertical-align, text-align, text-align]"
- "tfoot"
- "th[width, height, border-color, background-color, white-space, vertical-align, text-align, text-align]"
- "thead"
- "tr"
- "tt"
- "u"
- "ul[list-style-type]"
- "var"
Pour les toolbars qui comportent le bouton "insérer une image", le widget permet d'insérer des documents "image" déjà enregistrés sur le serveur. Il permet aussi d'ajouter de nouvelles images si le droit "créer" sur la famille "image" (nom logique :
IMAGE
) est donné à l'utilisateur. Les nouvelles images créées n'ont pas de profilage particulier et peuvent être réutilisées par d'autres utilisateurs. -
- toolbarexpand
-
Indique si la barre de menu doit être dépliée lors de l'affichage de l'éditeur. Dans le cas contraire, un petit bouton permet de la déplier.
Les valeurs possibles sont :
yes
(comportement par défaut)no