web-dev-qa-db-fra.com

HTML contentieux avec des îles non modifiables

J'ai une sorte d'éditeur WYSIWYG basé sur le navigateur où les utilisateurs peuvent modifier des modèles de documents.

Le modèle de document est un HTML ordinaire avec certains "espaces réservés de codes de fusion spéciaux". Ce modèle est "instancié" en remplaçant ces espaces réservés par des données provenant de dB. Ceci donne un document final - une instance du modèle.

Mon approche actuelle ressemble à ceci:

<div contenteditable>
  Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>

(Échantillon en ligne à jouer avec: http://jsfiddle.net/tfbkn/ )

L'entrée n'est pas modifiée dans ce cas et se comporte comme un bloc solide - exactement ce dont j'ai besoin. Les utilisateurs peuvent supprimer de tels codes de fusion en cliquant sur Suppr ou BackSpace comme d'autres caractères, etc. en disposant de CSS appropriés pour un tel entrée.Mergecode, je suis capable de réaliser la recherche d'apparence que je veux.

Mais avec une telle approche, j'ai trois problèmes différents dans trois UA différentes:

  • IE - CSS { font:inherit } ne fonctionne tout simplement pas là-bas, alors si l'entrée est à l'intérieur <b> comme ici <b><input value="test"></b> Il n'hérite pas de styles de police.
  • FF - Copie du fragment contenant <input> Élément supprime cette entrée de contenu du presse-papiers afin d'accéder davantage de coller l'opération insertion tout sauf sans entrées.
  • GC - Cliquez sur {Backspace} immédiatement après la <input> produit des résultats étranges ( bug )

Je suis donc à la recherche d'autres idées sur la manière de représenter les "îles" non modifiables en ligne dans HTML.

Autre approche que j'ai essayée jusqu'à présent:

  • <span contenteditable="false">MergeCode1</span> - Cela ne fonctionne pas comme la plupart des UAS suppriment un tel nœud de la sélection. Donc, il n'est pas possible de, disons, appliquer <b> ou <i> sur la sélection contenant une telle portée.

Toute autre idée?

htmlcontenteditable
32
c-smile

Je suis un développeur CKEditor. Nous avons une certaine expérience avec des éléments lisonly imbriqués (c.-à-d. placeholder Plugin et la fonctionnalité que nous travaillons actuellement # 9764 ) et je ne le fais pas avoir de bonnes nouvelles. Vous devez gérer tous les comportements manuellement si vous voulez avoir une impression constante. Il n'y a pas de trucs qui corrigeront les navigateurs. Et beaucoup de choses (comme celle-ci avec des choses étranges qui se produisent autour de l'entrée sur GC) semblent être insolubles.

22
Reinmar

Je connais c'est un vieux fil que je suis tombé sur un problème similaire. Il suffit de prendre peu de couvre non modifiables dans Div modifiable. A fini par mettre en œuvre un pirate de hack-autour de ...

$('#testDiv').on('keydown', function(e) { 
    var targetNode = getSelectionStart();
    if(targetNode != undefined && targetNode.nodeType === 1 && targetNode.nodeName == 'SPAN')    
    {
      var nodeHtmlString = targetNode.outerHTML;

      if(~nodeHtmlString.indexOf("nonEditable"))
      {
        e.preventDefault();
        e.stopPropagation();
      }
    }
});

function getSelectionStart() {
 var node = document.getSelection().anchorNode;
 return (node.nodeType == 3 ? node.parentNode : node);
}

Fiddle complet à https://jsfiddle.net/fxmb3nl6/20/

3
Pravin

Solution ci-dessous - avec une petite mise en garde. Mais d'abord, vous êtes génial!
[.____] Je ne suis pas un expert JS ou HTML, mais je ne savais pas non plus sur Jsfiddle.net. Lisez donc vos commentaires plus d'autres recherches en ligne et quelques tests sur Jsfiddle j'ai créé le code suivant qui a fonctionné.

<pre><code>
<div contenteditable="false" class="editor" readonly="true" UNSELECTABLE="ON">
    Sample template with <span class="mergecode test1" />.
    <span contenteditable> editable </span>
    <font color=red><span UNSELECTABLE="ON" contenteditable="false" readonly="true"
     UNSELECTABLE="ON">  uneditable1 </span></font>
    <span contenteditable> editable2 </span>
    <font color=red><span contenteditable=false readonly="true" UNSELECTABLE="ON"> uneditable3</span></font>  
    <span contenteditable> editable4 </span>
    <span contenteditable="false" readonly="true" UNSELECTABLE="ON"> uneditable5 </span>
< /div>
</code></pre>

Si vous mettez cela en jsfiddle sur chrome, vous voyez qu'il fonctionne dans chrome (et IE et FF, mais un peu différemment), mais il semble y avoir une petite mise en garde.

La mise en garde est ce que votre clé de claquette avec le retour arrière! Dans mon cas, lorsque je sélectionne une phrase underitable et appuyez sur BackSpace à Chrome, il semble rafraîchir ou faire une "aller à la dernière page"! J'ai fait les deux premiers indéditbles rouges (à gauche du dernier noir) afin que vous puissiez voir ce qui se passe. Je le teste sur Jsfiddle dans Chrome et dans FF et dans IE. Tout cela semble avoir agi correctement, donner ou prendre la question de l'espace de retour.

Et je pense que voici la logique de la façon dont cela fonctionne. Le premier div est le parent de niveau supérieur, et c'est contenttible = "False". Donc, tout sous elle devrait être non modifiable. Sauf les enfants à l'intérieur de celui qui ont la portée contestation = "vrai", ils deviennent éditables. Donc, vous héritez de votre parent, mais vous pouvez écraser comme un enfant.

J'ai aussi mis les tags lisonly = "vrai" non sélectionnable = "on" parce que j'ai lu environ leur place. Et il a fallu plus de tests !!! Remarque S'il vous plaît, j'ai dû prendre des polices ... en dehors de la portée ou cela ne fonctionnerait pas. Mais dans IE cela fonctionnait parfaitement. Les ONDItables étaient la couleur que je leur ai dit d'être et aucune quantité de célibataire, de doueur ou de triple clic ne sélectionnerait les autorités de Jsfiddle !!! :-) Pour Chrome Un simple clic n'a rien fait, double-cliquez sur Sélectionné l'ONDITAIBLE et avec le backspace, il est allé un peu de noix! Il semblait que cela irait à la page précédente. Avec FF Les choses étaient un peu plus fastidieuses! Double-cliquez sur Choisir l'Office et l'éditables avant de cela! Aucune idée de pourquoi.

Si quelqu'un peut comprendre et écrire sur les problèmes avec Chrome et FF ce serait génial. Il serait agréable d'avoir un double clic ou un nombre de clics rapides pour ne pas travailler dans Chrome et FF aussi. Encore une fois, je veux souligner la portée ... semble avoir à être à côté des undithables et des polices ... en dehors de la portée.

J'espère que tout est logique.

2
user96265