Discussion :

[keokaz]

Bonjour,

je recherche à faire mon propre wysiwig sous html5 avec le conteneditable.
voici mon bout de code:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
  <button mat-raised-button color="{{colorBouton}}" (click)="changeEdit()" >{{nameBouton}}</button>
 
 
<div id="page"  [attr.contenteditable]="modeEdit"  class="{{modeEdit ? 'wysi':'null' }}">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis lectus vel enim mollis, sit amet dictum eros suscipit. Vestibulum vel suscipit justo, molestie lacinia velit. Vivamus malesuada elit non felis dictum, eget volutpat nibh vehicula. Aliquam arcu odio, vulputate vitae ullamcorper eget, porta in ligula. Fusce iaculis vel massa vel sodales. 
</div>
<div id="menu_wysi" [ngStyle]="{'display':displayWysi}">
  <div>bolder</div> <div>  Title H1</div>
</div>

voici mon composant:

Code :

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

1
2
3
4
5
6
7
8
 
  changeEdit(){ //mode editer ou non edition
    this.permuteEdit();
    if( this.modeEdit == false){
      console.log("enregistrement dans la base");
      console.log( document.getElementById("page").focus);
    }
  }

comment je dois procéder pour récupérer un bout de texte ? ensuite l'entourer d'une balise h1 par exemple ?
je suis sous angular8 et j'utilise aussi material.

merci d'avance de vos réponses

[Watilin]

Salut,
voici ma réponse à une question qui a été posée il y a quelques mois, il me semble que ça pourrait te convenir :
modifier la taille du texte sélectionné uniquement

[keokaz]

Merci de la réponse , c'est bien ce que je cherchais, j'ai donc essayé, dans l'image j'ai selectionné "456", après avoir cliqué sur "titre H1",
la section à disparu , je m'attendais avoir "456" mais j'a comme résultat "#document-fragment".

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div id="page"  [attr.contenteditable]="modeEdit"  class="{{modeEdit ? 'wysi':'null' }}">
123456789
</div>
 
<div id="menu_wysi" [ngStyle]="{'display':displayWysi}">
  <div (click)="tagBolder()">bolder</div> 
  <div (click)="toH1()">Title H1</div>
</div>

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
export class WysiComponent implements OnInit {
 
  modeEdit:boolean = false;
  colorBouton:string = "disabled";
  nameBouton:string = "modifier";
  displayWysi="none";
  range;
 
  constructor() { }
 
  ngOnInit() {
    console.log(this.colorBouton);
  }
 
  changeEdit(){ //mode editer ou non edition
    this.permuteEdit();
    console.log(this.modeEdit+"!!!!!!");
    this.modeEdit ? this.editContent() : this.saveNewWysi();
  }
 
  saveNewWysi(){
    console.log("save !!");
  }
 
  editContent(){
    console.log("editer !!");
 
  }
 
  getContentEdit(){
    let sel = window.getSelection();
    for (let i = 1; i < sel.rangeCount; i++) {
     sel.removeRange(sel.getRangeAt(i));
    }
    console.log(sel);
    let range = sel.getRangeAt(0);
    console.log(range.extractContents());
    this.range = range;
 
  }
 
  toH1(){
    this.getContentEdit();
 
  }

je souhait recupérer la selection pour ensuite pour l'englober de la balise H1 en faisant un

Code :

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

1
2
 
range.insertNode("<h1>"+la_selction+"</h1>");

[Watilin]

Attention à ne pas confondre les objets du DOM et les chaînes de code HTML. Tu dois créer un élément h1 et y ajouter le contenu extrait :

Code :

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

1
2
3
let h1 = document.createElement("h1");
h1.appendChild( range.extractContents() );
range.insertNode(h1);

Voir DocumentFragment et appendChild().

[keokaz]

Je ne comprenais pas pourquoi cela ne fonctionnais pas, mais en fait cela fonctionne mais seulement sur le texte du bouton,
ici j'ai mis une sélection en bleu à la place du h1:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
  toH1() {
    var getText = document.getElementById("page").innerHTML;
    console.log(getText);
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement("span");
    span.style.color = "blue";
    span.appendChild(selectedText);
    selection.insertNode(span);
 
  }

Code html :

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

1
2
3
4
5
6
7
8
9
10
<button mat-raised-button color="{{colorBouton}}" (click)="changeEdit()" >{{nameBouton}}</button>
 
<div id="page"  [attr.contenteditable]="modeEdit"  class="{{modeEdit ? 'wysi':'null' }}">
123456789
</div>
 
<div id="menu_wysi" [ngStyle]="{'display':displayWysi}">
  <div (click)="tagBolder()">bolder</div> 
  <div (click)="toH1()">Title H1</div>
</div>

Pour le moment je n'arrive pas à sélectionner dans la div page.

Code html :

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

1
2
 
<div (click)="toH1()">Title H1</div>

Pour pouvoir modifier le div page, je dois cliquer sur le bouton modifier et avec le css je change la propriété display:

Code :

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

 this.modeEdit ? this.displayWysi = "flex" : this.displayWysi = "none";

[keokaz]

En fait pour que cela fonctionne il fallait juste que je mettre un bouton et pas une div

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
  <button mat-raised-button color="{{colorBouton}}" (click)="changeEdit()" >{{nameBouton}}</button>
 
<div id="page"  [attr.contenteditable]="modeEdit"  class="{{modeEdit ? 'wysi':'null' }}">
123456789
</div>
 
<div id="menu_wysi" [ngStyle]="{'display':displayWysi}">
  <div (click)="tagBolder()">bolder</div> 
  <button (click)="toH1()">Title H1</button>
</div>

merci encore pour m'avoir guidé