Within a conteneditable div, I am displaying pre-populated grey text with the data-suggestion attribute.
Upon clicking the text:
- The text color changes to black
- The
data-suggestionattribute is removed from the selected line
An input event on the contenteditable div triggers the onInput() function, populating the text in the final_doc_summary variable.
Issue:
- The
final_doc_summaryvariable does not preserve new lines when the event is triggered. - I specifically want to include text without the
data-suggestionattribute in thefinal_doc_summaryvariable.
<div
id="div_textarea2"
class="textarea mb-3"
contenteditable="true"
v-html="doc_summary"
@input="event=>onInput(event,index)"
></div>
data(){
return {
final_doc_summary:'',
suggestion_list : ['Line 1','Line 2','Line 3'],
}
}
mounted(){
this.AddSuggestedLine();
}
methods: {
onInput(event, index){
this.final_doc_summary = $(event.target).text();
},
AddSuggestion1() {
for (var i=0;i<this.suggestion_list.length; i++){
var suggestions = "<div><span data-suggestion=true class='suggestedContent' id='suggested-content-"+i+"'>" +this.suggestion_list[i]+ "</span></div>";
this.doc_summary +=suggestions;
}
},
}
The following jQuery code changes text to black and removes the data-suggestion attribute:
$(".suggestedContent").click(function () {
$(this).css({ color: "black", "text-decoration": "none" });
$(this).removeAttr('data-suggestion');
});