68 lines
2.1 KiB
Svelte
68 lines
2.1 KiB
Svelte
<script>
|
|
import { onDestroy, onMount } from "svelte";
|
|
import Trix from "trix";
|
|
import "trix/dist/trix.css";
|
|
|
|
export let value = "";
|
|
export let field;
|
|
let editor;
|
|
|
|
function updateValue(e) {
|
|
value = e.target.value;
|
|
}
|
|
|
|
export function insertMedia(html) {
|
|
console.log({ html });
|
|
var attachment = new Trix.Attachment({ content: html });
|
|
editor.editor.insertAttachment(attachment);
|
|
// if (info.file.width > 0) {
|
|
// var attachment = new Trix.Attachment({ content: html });
|
|
// editor.editor.insertAttachment(attachment);
|
|
// } else {
|
|
// editor.editor.insertHTML(html);
|
|
// }
|
|
}
|
|
|
|
onMount(() => {
|
|
editor.addEventListener("trix-file-accept", (e) => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
editor.addEventListener("trix-before-initialize", (e) => {
|
|
Trix.config.blockAttributes.heading1.tagName = "h2";
|
|
const { toolbarElement } = e.target;
|
|
const h1Button = toolbarElement.querySelector(
|
|
"[data-trix-attribute=heading1]",
|
|
);
|
|
h1Button.insertAdjacentHTML(
|
|
"afterend",
|
|
`<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`,
|
|
);
|
|
});
|
|
});
|
|
// onDestroy(() => {
|
|
// editor.removeEventListener("trix-before-initialize")
|
|
// })
|
|
|
|
Trix.config.blockAttributes.default.breakOnReturn = false;
|
|
Trix.config.blockAttributes.heading3 = {
|
|
tagName: "h3",
|
|
terminal: true,
|
|
breakOnReturn: true,
|
|
group: false,
|
|
};
|
|
// console.log(Trix.config)
|
|
</script>
|
|
|
|
<div class="tox-wrapper">
|
|
<input id="x-{field.name}" {value} type="hidden" />
|
|
<trix-editor
|
|
bind:this={editor}
|
|
class=" content"
|
|
input="x-{field.name}"
|
|
role="textbox"
|
|
tabindex="0"
|
|
on:trix-change={updateValue}
|
|
></trix-editor>
|
|
</div>
|