How can i change div contenteditable = "false" to "true"?

Question

I am playing around with angular2. I want to change the value of a div- Need to change all contenteditable="false" to contenteditable="true" which are there on my HTML page.

Please note sometimes the contenteditable="false" will be added to a DIV tag and sometimes to P, h1 tag or some other.

The html looks as following:

<button (click)="selectDiv()">select div</button>
<section>
      <div class="content">
        <h1 contenteditable="false" >Resize your browser and see how they adapt.</h1>
        <h1 contenteditable="false" >text2.</h1>
      </div>
      <div class="content" contenteditable="false">
        <p>Content 2.</p>
        <h1>text2.</h1>
      </div>
</section>

Please guide me what should i write in explore.ts so that when i click the button, selectDiv() is called and the function is executed and all the contenteditable="false" becomes "true"

Please note there can be any number of contenteditable="false" in my code.

selectDiv(){
//what should i write here
}

Please refer to this answer: https://stackoverflow.com/questions/39023701/angular-2-contenteditable — galvan, Jun 05 '17 at 07:40
Can't you just write the attribute as `[contentEditable]="contentEditable"` and in your controller have that variable and just change it to `true` when you click the button? — Arg0n, Jun 05 '17 at 07:43

score 4 · Accepted Answer · answered Jun 05 '17 at 07:50

4

For an Angular way of doing it:

HTML

<button (click)="selectDiv()">select div</button>
<section>
  <div class="content">
    <h1 [contentEditable]="contentEditable">Resize your browser and see how they adapt.</h1>
    <h1 [contentEditable]="contentEditable">text2.</h1>
  </div>

  <div class="content" [contentEditable]="contentEditable">
    <p>Content 2.</p>
    <h1>text2.</h1>
  </div>
</section>

TypeScript Controller

...
private contentEditable: boolean = false;
...
selectDiv(): void {
    this.contentEditable = true;
}
...

answered Jun 05 '17 at 07:50

Arg0n

8,283
2
21
38

what is the difference between `selectDiv(){}` and `selectDiv(): void{}` , it worked perfectly fine by the way.. – user2828442 Jun 05 '17 at 07:58
Well, the only difference is that TypeScript knows that this method should not return anything. Otherwise it does not matter. – Arg0n Jun 05 '17 at 07:59
thanks i am accepting your answer, please if my question is nicely formatted, do accept it – user2828442 Jun 05 '17 at 08:01
1

Thanks @Arg0n. Everyone please ensure its [contentEditable] and not [contenteditable] on the html markup. You could spend the whole day looking for a solution. – D_Edet Nov 04 '21 at 14:31

score 0 · Answer 2 · answered Jun 05 '17 at 07:45

You can query for the attribute and use attr property to update it's value.

Here all h1 will be selected which have the contenteditable attribute

function selectDiv() {
  $("h1[contenteditable='false']").attr('contenteditable', true)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="selectDiv()">
  select div</button>
<section>

  <div class="content">
    <h1 contenteditable="false">Resize your browser and see how they adapt.</h1>
    <h1 contenteditable="false">text2.</h1>
  </div>

  <div class="content" contenteditable="false">
    <p>Content 2.</p>
    <h1>text2.</h1>
  </div>

</section>

Remove `h1` from the selector, he wants all elements with the attribute. — Arg0n, Jun 05 '17 at 07:46

How can i change div contenteditable = "false" to "true"?

2 Answers2