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.