2010-02-20 19 views
4

Je voudrais expérimenter avec l'interface utilisateur suivante:
1. Le contenu se compose de guillemets suivis de commentaires.
2. Les commentaires sont éditables, tandis que les guillemets ne le sont pas. Cependant, les citations devraient être en mesure d'avoir des parties du devis surlignées, en caractères gras, etc.
3. Le texte entier (y compris les citations et les commentaires) devrait pouvoir être sélectionné et copié en tant que texte enrichi. De préférence, il serait possible de supprimer la sélection, y compris les citations qui s'y trouvent (bien que cela puisse être intéressant si la sélection s'arrête au milieu d'une citation).
4. La fonctionnalité de mise en évidence de préférence, etc. devrait être similaire pour les citations et pour les commentaires (probablement une barre d'outils avec des icônes en gras, en italique, etc. au-dessus de la zone de texte).Sélectionner et opérer sur des sections en lecture seule dans un document HTML avec contentEditable

J'ai essayé de le faire en utilisant un div divisible et des citations environnantes avec un élément contenteditable = false. Un exemple est inférieur

<div id="editor" contenteditable="true" 
    style="height:200px; border:1px solid black"> 
This is some editable content. 
    <p><div contenteditable="false">This content should not be editable 
    <i contenteditable="true">(but this is)</i>. 
    </div></p> 
</div> 

Cependant, j'ai découvert que, bien que Chrome (et donc probablement WebKit) vous permet de sélectionner du texte dans une partie en lecture seule de l'élément contenteditable, Firefox ne vous permet de traiter la contenteditable comme un grand bloc et sélectionnez tout à la fois. Y at-il un moyen de contourner cela? Y a-t-il une meilleure façon de faire ce que je suggère?

Répondre

0

Vous pouvez essayer ceci.

<div id="editor" style="height:200px; border:1px solid black"> 
<p contenteditable="true">This is some editable content.<p> 
<div> 
<p>This content should not be editable 
<i contenteditable="true">(but this is)</i>. 
</p></div> 
</div> 

espoir que cela a aidé