Discussion :

[patricktoulon]

bonjour a tous

ma fonction d'insertion d'un div englobant une selection fonctionne mais le div va tout de suite a la ligne je ne sais pas comment le faire rester sur la meme ligne dans un content editable(WYSIWYG)


la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
var elementactif;
function selection(){ return window.getSelection().getRangeAt(0);}
function Insertdiv() {
var container = document.createElement("div");
container.style.width="200px";
container.style.height="200px";
var divID="div" + document.getElementsByTagName ("DIV").length;
container.id=divID;
container.style.border="1px solid black"; 
container.style.border="1px solid black"; 
container.innerHTML="<p> </p>";
document.title="divactif:" +divID;
selectione= selection();
documentFragment = selectione.extractContents(); 
container.appendChild(documentFragment);
selectione.insertNode(container);
document.getElementById(divID).addEventListener("mouseup", function() {  document.title="divactif:" +divID;  });
}
//codescript;
 
</script>

le resultat en haut l'original
en bas le resultat en ayant selectionner "un div stylé"


si quelqu'un a une solution ? je suis preneur

[Beginner.]

Salut,

Comment vas-tu depuis le temps ? Il est beau ton éditeur... C'est celui sur lequel tu bossais il y a quelques temps ?

Le code que tu mets n'est pas complet, non ? Je demande ça car je ne vois où tu mets le style qu'on voit sur l'image...

Sinon pour ta question, je vois deux points :

1- une div est un block donc je pense pour éviter le retour à la ligne tu pourrais rajouter : container.style.display = "inline";...

2- Le paragraphe est aussi un block donc je pense que cette instruction pose aussi problème : container.innerHTML = "<p> </p>";...

Et je pense qu'elle n'est pas utile dans ton cas...

ma fonction d'insertion d'un div englobant une selection fonctionne...

Si c'est pour englober la sélection alors pourquoi fixer une taille à la div avec ces instructions : container.style.width = "200px"; container.style.height = "200px";... La taille de la div ou du moins sa largeur devrait être celle du texte sélectionné, non ?

[patricktoulon]

Bonjour beguiner oui il y avait longtemps Meilleurs veux!!

oui plus ou moins c'est le meme sauf que travaille toujours dans un userform en vba excel et que les fonctions vont etre apellées a partir de controls dans celui ci
ca me permet d'avoir un form transportable sans etre accompagné de modules

et oui j'y ai pensé au P dans le div forcément
j'ymagine que le display in line est de rigeur pour le p parent je vais tester
il va faloir que je fasse une boucle pour remonter au parent P et le mettre en inline c'est ca ?

pour les style que tu ne vois pas c'est justement parce que c'est vba qui le fait

exemple en vba

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

with actifelem.style:.border=" 1px solid black":.backgroundcolor="#ff0000":end with

c'est ni plus ni moins que du dom

le model que j'avais fait en html je l'ai toujours si tu le veux

[Beginner.]

Ben en fait le paragraphe tu n'en as pas besoin, la div suffit, non ?

Sinon le display:inline c'est pour la div que tu insères, celle qui englobe la sélection, c'est-à-dire celle que tu as nommée "container" il me semble, c'est pourquoi je te disais que tu pourrais rajouter : container.style.display = "inline"; dans ta fonction...

Mais j'ai peut-être mal compris ?

[patricktoulon]

oui a la limite le div c'est pas grave son interieur mais c'est juste son alignement a son parent que je veux

je viends de tester le"inline " ca ne fonctionne pas il n'y a plus de P dans le container pourtant

demonstration(regarde bien le code obtenu j'ai un boutonpour ca) il est correcte pourtant (mesemble t il )

[NoSmoking]

Bonjour,
il faut de temps en temps reprendre les spécifications, et les lire.

Un élément <P> ne peut pas contenir un élément DIV et ce quelque soit son mode de rendu, inline, block ou autres... de plus la construction est invalide et le rendu par les navigateurs sera toujours le même :

Ce code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p>Un <div class="display: inline">deux </div>trois</p>

donnera

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p>Un </p><div class="display: inline">deux </div>trois<p></p>

Pour un rendu à l'affichage uniquement ce code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p style="display:inline">Un <div style="display:inline">deux </div>trois</p>

donnera

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p style="display:inline">Un </p><div style="display:inline">deux </div>trois<p></p>

cela reste NON CONFORME.

[patricktoulon]

Bonjour Nosmoking
ok donc c'est pas possible alors comme ca c'est clair

je voulaire des encarts type journal un carré de texte avec images et autres entouré de texte
tant pis je le ferais avec des div en position absolute
merci

[Beginner.]

Ah ok je n'avais pas percuté que le texte était dans un paragraphe...

Merci NoSmoking pour l'infos !

Dans ce cas tu peux utiliser des balises inlines comme <span>, je viens de tester tu peux mettre plusieurs styles (border, border-radius...) par contre si tu veux fixer une taille ça ne marche pas mais il suffit d'ajouter à la <span> un display: inline-block...

[Invité]

Bonjour,

Par contre, on peut mettre un <span> dans un <p> !
Auquel cas il faut le définir en display:inline-block (car un span est par défaut en inline).


Il faut VRAIMENT que tu connaisses mieux les balises HTML de base, leur sémantique et hiérarchie...

[Beginner.]

Ah ben je vois que jreaux62 confirme mais comme je disais dans mes tests le display:inline-block c'est si on veut fixer une taille mais le reste semble fonctionner même le padding...

Voici un lien pour vérifier : http://jsbin.com/puqevaqoju/edit?html,output

[patricktoulon]

re
merci messieux


c'est quand meme mieux que la commande execcommand "backcolor" quoi que j'ai pas testé

[Beginner.]

Ca dépend je pense... Si c'est pour mettre un style géré par execCommand je pense que execCommand est mieux mais si tu veux un style particulier non géré ben tu n'as pas le choix... Comme par exemple un border-radius ou un padding ou un height... il ne me semble pas avoir vu que execCommand puisse le faire...

[patricktoulon]

re
non je ne crois pas mais il est possoble d'identifier le nouveau font en background et lui mettre le borderradius
la selection reste la meme avec execcomnand
il te suffit de faire un second extract content il aura cette fois si la font en backcolor dans le segment et dans un createsegment contenant l'extraction ajouter tout les properties que tu veux
il me semble que je l'avais deja fait


mais de toute facon c'est pas ca que je voulais essayer de faire et visiblement comme tel c'est pas possible

[Beginner.]

Oui tu avais ouvert une longue discussion là-dessus... Mais rappelle-toi comment c'était galère de faire le ménage aussi bien que execCommand...

extractcontent pose problème parfois elle modifie le dom (lorsque la sélection est à chevale sur plusieurs balises)...

Rappelle-toi on s'était pris la tête pour supprimer un formatage/style tout en retrouvant le Dom comme il était avant qu'on mette ce formatage/style...

[patricktoulon]

re
oui je m'en rapelle mais c'etait pour les ombres de texte

mais la en l'occurence ca ne cause pas de soucis car la commande refait son netoyage toute seule(on sort pas de la fonction execcommand initiale

le netoyage est vite fait

je me bas depuis tout a l'heure pour faire un back dans un html local pour testyer la théorie et impossible une majuscule quelque part encore

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=10">
<title>JS Bin</title>
    <style>
      
      .code {       
        border: 1px solid black;
        height: 200px;
        white-space: pre;      
      }
 
    </style>
<script type="text/javascript">
      
        function selection() {
          return window.getSelection().getRangeAt(0);
        }
        
        function stylise() {
         document.execCommand("BackColor",False,"#FF0000"); /// ca ne fonctionne pas 
       
        //var container = document.createElement("span");
        //selectione = selection();
        //documentFragment = selectione.extractContents();
        //container.appendChild(documentFragment);
        //selectione.insertNode(container);
           
       }
   
 </script>
  </head>
  <body>
    <div class="code" contenteditable="true" spellcheck="false">Ici du texte pour faire des tests...
      Ici du texte pour faire des tests...
      Ici du texte pour faire des tests...  
    </div>
    <br>
      <button onclick="stylise();">style</button>
 
 
  </body>
</html>

une!! ligne et elle ne fonctionne pas
des fois je me rends fou avec des petits trucs comme ca

[Beginner.]

Ah Ah et oui...

Remplace "False" par "false"...

[patricktoulon]

j'avais fini par trouver

je suis en train de faire des tests et ca marche
un execcommand backcolor
clonnecontent 'ici on a deja le font avec le background
create container
appendchild le clonne
prendre le children(0) qui est le font background dans le container
mettre toutes les propriéte possibles au children(0) que l'on veux radius ca marche
et enfin selectione.insertNode(container.children(0));
ca marche
je verifie pour le netoyage eventuel mais je ne crois pas

[Watilin]

Bonsoir Patrick, ça faisait un moment

Quelques suggestions en vrac.

Apparemment on n’a pas le droit de mettre une <div> dans un <p>. Qu’à cela ne tienne, <span style="display: block"> (ou inline-block comme l’a suggéré Beginner) et le machin n’y voit que du feu

Le premier truc qui m’est venu à l’esprit en lisant le titre de la conversation, c’est white-space: nowrap. Il me semble que personne n’a encore suggéré ça. À combiner éventuellement avec overflow: visible, je ne sais jamais quand c’est nécessaire ou pas…

Pour ce qui est de la détection d’erreurs JavaScript, on l’a vu, ton environnement n’était pas idéal. Au moins pour les erreurs de syntaxe (dont ces agaçantes histoires de majuscules/minuscules), tu peux utiliser les outils F12 des navigateurs Chrome ou Firefox. Tu ouvres une console, tu colles ton code dedans, tu appuies pas trop fort sur entrée et tu vois ce que ça donne.
Pour des problèmes plus subtils, tu peux te servir d’un éditeur de texte avec un plugin JSLint ou JSHint. Il y a Atom et Brackets qui sont à la mode en ce moment, je crois qu’ils font ça tous les deux. Sinon il y a aussi des services en ligne comme jshint.com qui font ça très bien. …
Peut-être même trop bien

[patricktoulon]

bonjour waitlin meilleurs veux

mon soucis d'erreur de syntaxe et du aussi au fait que je me mélange les pinceaux VBA/javascript

et oui mon environnement est toujours le même a savoir un Control web browser dans VBa ,il est vrai que les maj/min sont un soucis pour moi ce qui fonctionne dans un html local dans IE ou

chrome ,ne fonctionnera pas toujours dans mon Control
mais bon je m’en sort quand même