2010-10-04 8 views
0

je suis tombé sur quelques étrangetés cross-browser tout en essayant d'intégrer le htmleditor ExtJs dans notre projet:htmleditor et augmentation/taille des caractères diminuer avec Midas commandes

Si vous diminuer/augmenter la taille de la police dans Firefox3.6, il enveloppe le texte sélectionné dans une balise '' avec un attribut de taille (par exemple 'visiteur'). Si vous faites de même dans Chrome6 ou Safari4, il l'enveloppe dans un attribut '' tag avec 'style = font-size ...' (par exemple 'visiteur'). Par conséquent, une fois que vous aurez modifié la taille de la police dans Firefox, vous ne pourrez pas la modifier dans Safari ou Chrome et vice versa.

Ceci est fait par le moteur Midas du navigateur (comme documenté ici: http://www.mozilla.org/editor/midas-spec.html). La mise en œuvre appelle:

document.execCommand('FontSize', false, value); // value is the font size as a numeric value

Donc, il n'y a pas grand-chose que je peux changer à ce sujet. J'étais sur le point d'écrire ma propre mise en œuvre du changeur de taille de police, mais après que je sois allé sur la route j'ai reconnu que ce serait une mise en œuvre plutôt compliquée.

Est-ce que quelqu'un d'autre a rencontré ce problème? Y a-t-il de bonnes solutions pour celui-ci?

Répondre

0

Tant que vous sauvegarderez la source quelque part sur un serveur, je vous recommande de laisser l'éditeur tel quel. Sur le côté serveur, vous allez normalement valider la source, donc la validation sera un bon moment pour transformer la source en un style unique.

+0

Je préfère ne pas le faire sur le backend. Pour moi, c'est une fonctionnalité frontend. En outre, dans le frontend, nous utilisons le même composant RichTextEditor pour tous les champs de clob. J'ai seulement besoin de réparer un composant. Alors que dans le backend, nous avons une logique métier différente autour de ces champs avec des validateurs différents, qui devraient tous être changés et il y a plus de points de défaillance potentiels. Le changement sur le backend serait aussi compliqué que de trouver ma propre solution frontend. – Johannes

+0

Si je devais le faire côté client, je prendrais le nœud (documentElement si vous utilisez un iframe ou l'élément editor si vous utilisez un élément contenteditable) et récupèrerais tous les éléments de police avec getElementsByTagName(). Je voudrais les remplacer par un span/div, et définir le style de l'span/div selon par exemple. l'attribut size de l'élément font-element (notez que l'attribut size de la police n'utilise pas les pixels). Il y a aussi une commande "styleWithCss", mais je suppose que ceci n'est pas accepté dans IE. –

+0

Je viens d'essayer le styleWithCss. Cela n'a pas changé le comportement de Firefox. Je vais aller de l'avant et essayer votre autre suggestion. – Johannes