How to bind HTML contents using ReactiveHTML

Panel
2

I think you need to insert the text in the div as a literal value with {{...}}. Then you can use a script to to set data.content.

I’ve refactor and renamed to the below. Hope it helps.

import panel as pn
import param

pn.extension()


class EditableDiv(pn.reactive.ReactiveHTML):
    value = param.String()
    placeholder = param.String(default="Edit me")

    _template = """
    <div id="div" class="test" contenteditable="true" 
         oninput="${script('some_script')}">{{placeholder}}</div>
    """

    _scripts = {
        "some_script": "data.value=div.innerText;console.log(event.data);console.log(div.innerText)"
    }


editable = EditableDiv()

pn.Column(editable, editable.param.value, margin=50).servable()
2 Likes