Skip to main content

Part 3 / Advanced bindings / Contenteditable bindings

Elements with a contenteditable="true" attribute support textContent and innerHTML bindings:

App.svelte
<div
	contenteditable="true"
	bind:innerHTML={html}
></div>

Next: Each block bindings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	let html = '<p>Write some text!</p>';
</script>
 
<div contenteditable="true" />
 
<pre>{html}</pre>
 
<style>
	[contenteditable] {
		padding: 0.5em;
		border: 1px solid #eee;
		border-radius: 4px;
	}
</style>
initialising