Elements with a contenteditable="true"
attribute support textContent
and innerHTML
bindings:
<div
contenteditable="true"
bind:innerHTML={html}
></div>
App.svelte
xxxxxxxxxx
15
1
<script>
2
let html = '<p>Write some text!</p>';
3
</script>
4
5
<div contenteditable="true"></div>
6
7
<pre>{html}</pre>
8
9
<style>
10
[contenteditable] {
11
padding: 0.5em;
12
border: 1px solid #eee;
13
border-radius: 4px;
14
}
15
</style>
Console
xxxxxxxxxx
53
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
attr,
5
detach,
6
element,
7
init,
8
insert,
9
noop,
10
safe_not_equal,
11
space
12
} from "svelte/internal";
13
14
function create_fragment(ctx) {
15
let div;
16
let t0;
xxxxxxxxxx
53
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
attr,
5
detach,
6
element,
7
init,
8
insert,
9
noop,
10
safe_not_equal,
11
space
12
} from "svelte/internal";
13
14
function create_fragment(ctx) {
15
let div;
16
let t0;
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
[contenteditable].svelte-15eq6hk{padding:0.5em;border:1px solid #eee;border-radius:4px}
xxxxxxxxxx
1
1
[contenteditable].svelte-15eq6hk{padding:0.5em;border:1px solid #eee;border-radius:4px}