Entourer un texte avec une balise dans on content editable

Version imprimable

Bonjour,

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

Code:

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:

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

17/06/2019, 19h01
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

1 pièce(s) jointe(s)

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".

Pièce jointe 484321

Code:

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:

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:

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

17/06/2019, 23h54
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:

1 2 3 let h1 = document.createElement("h1"); h1.appendChild( range.extractContents() ); range.insertNode(h1);
:arrow: Voir DocumentFragment et appendChild().

1 pièce(s) jointe(s)

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:

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); }
Pièce jointe 484411
Code:

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:

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:

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

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

Code:

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é :)