Comment prévenir | Mozilla Firefox (3.6) contentEditable - applique CSS au conteneur modifiable au lieu de son contenu

Question

J'ai une avec quelque chose comme ceci:

<div id="editor" contenteditable="true">SomeText</div> 

J'ai un éditeur selfmade JS qui délivre en fait

document.execCommand(some_command,false,optional_value); 

lorsque l'utilisateur appuie sur un bouton dans l'éditeur. (Par exemple, j'ai un bouton simple [gras]).

Tout va bien tant que j'applique l'édition à une partie de "SomeText". Par exemple en sélectionnant « Texte » avec la souris et en appuyant sur le bouton [Gras] (ce qui conduit à document.execCommand (« gras », false, false);) produira:

<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div> 

mais quand je sélectionne le contenu entier de la div ("someText" dans cet exemple) et appuyez sur [Gras] dans mon éditeur, FF ne produira pas prévu

<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div> 

mais plutôt

<div id="editor" contenteditable="true" style="some-css-here">SomeText</div> 

Notez l'attribut "style" est entré dans la div éditable !

Pourquoi cela fait-il une différence pour moi? - C'est parce que, une fois l'édition terminée, je voudrais prendre le contenu de la div modifiable, avec tous les styles, la formation etc et l'utiliser plus loin sur la page. Mais je ne peux pas - tout le style se trouve maintenant à l'intérieur de la div. Une solution quand je serais conseillé d'extraire les styles de la div n'est pas acceptable - la div au cours de sa vie prend beaucoup de styles d'autres éléments actifs de la page (utilisation jQuery lourds)

Donc en bref: Comment dire à FF de ne jamais toucher div modifiable et d'appliquer tout le style à son contenu interne seulement?

Sincères remerciements pour votre temps. (juste tiré la dernière de mes cheveux, la navigation sur le site FF dev avec beaucoup d'autres (((()

Answer 1

organisation Parfois et écrire mes pensées me apporte des résultats très positifs. J'ai trouvé de solution satisfaisante.

1) insérer div caché dans un premier nœud enfant dans votre édition div:

<div id="editor" contenteditable="true"> 
    <div class="edit_text_mozilla_hack"></div> 
    SomeText 
</div> 

2) Le CSS pour elle:

.edit_text_mozilla_hack { 
    display: block; 
    width: 0; 
    height: 0; 
    -moz-user-edit: none; 
    -moz-user-select: none 
} 

3) Vous pouvez maintenant éditer. Je l'ai testé avec mon petit test (en fait j'ai besoin de tous ces trucs pour éditer de petits morceaux de texte comme des légendes, sujets de nouvelles etc)

4) Avant d'utiliser le contenu - obious - remoe that div. 5) Lorsque vous voulez revenir à l'édition - insérez-le à nouveau.

Quelques bits de code de travail (enfin!))) projet:

//adds hidden div to all editable regions 'editables' 
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions 
function editAddMozillaHack(editables) { 
    if (!editables) { 
     editables = editGetEditables(); 
    } 
    $("." + adminOptions["admin_loader"]).remove(); 
    editables.each(function() { 
     $(this).prepend('<div class="edit_text_mozilla_hack"></div>') 
    }); 
} 

//removes the hack from all regions 
function editRemoveMozillaHack() { 
    $(".edit_text_mozilla_hack").remove(); 
} 

//just returns all the editable regions -- my project often requires them all 
function editGetEditables() { 
    return $("[contenteditable=\"true\"]"); 
} 

bien sûr - test en cours. Je voudrais avoir de vos nouvelles;) ce qui concerne.

Answer 2

J'ai eu le même problème, lorsque tout sélectionner dans la zone contenteditable avec la souris ou utiliser CTRL-A là, puis appuyez sur CTRL + B par exemple, Firefox mettre style au conteneur contenteditable à la place son contenu. Il en va de même pour l'italique, la taille de police, la famille de polices et d'autres styles en ligne. J'ai écrit une fonction qui corrige ce problème. Elle crée de nouveaux éléments ci-dessous le contenu et les changements plage sélectionnée jusqu'à cet élément:

function checkSelectAll (container, cmd, args) { 
    if(document.getSelection) { 
     var  cn = container.childNodes, 
      s = document.getSelection(), 
      r = s.getRangeAt(0); 

     if(r.startContainer == container && r.endContainer == container){ 
      var endMarker = document.createElement('SPAN') 
      container.appendChild(endMarker); 
      r.setEndBefore(endMarker); 
      s.removeAllRanges(); 
      s.addRange(r); 
      document.execCommand(cmd,false,args); 
      container.removeChild(endMarker); 

     } else { 
      document.execCommand(cmd,false,args); 
     } 
    } else { 
     document.execCommand(cmd,false,args); 
    } 
}; 

ce code ne peut concerner que FF, pour les autres navigateurs, il applique simplement execCommand

Answer 3

appel une fois avant tout autre execCommand et le commutateur FF mode de marquage

document.execCommand('StyleWithCSS', false, false);