0

I simply trying to make a div editable. It was working like a charm on chrome before adding Drag-n-drop to my component with cdkDrag directive. However, it works fine with FireFox and Edge and it does show the input cursor.

 <app-note-item  
      *ngFor=" let note of notes"
      cdkDrag
      [note] = "note"
      class="note-item"
      [cdkDragFreeDragPosition] = "note.position"
  ></app-note-item>

App-note-item :


<div contenteditable="true"   class="note-content">

      {{note.content}}
  </div>

Any help would be grateful.

Improve this question
3
  • I am facing the same issue. But I think contenteditable is also not fully functioning on FireFox with cdkDrag, if you want to double click to select a word, or select a part of paragraph, it is not working. Please update if you have any progress~ Commented Aug 12, 2019 at 9:58
  • Hi Wayne, yes unfortunately its not stable with other browsers too, so as an alternative solution i just used the html textarea Commented Aug 13, 2019 at 14:53
  • See this answer for a solution. Commented Apr 9, 2020 at 21:05
Related questions
3
HTML5 ContentEditable not working in Chrome
0
AngularJS: Issue with ContentEditable
1
Simple text editor with contenteditable weird behavior in chrome
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.