125 lines
3.6 KiB
Svelte
125 lines
3.6 KiB
Svelte
|
<script>
|
||
|
|
import {onDestroy, onMount} from "svelte";
|
||
|
|
|
||
|
|
import tinymce from "tinymce/tinymce";
|
||
|
|
import "tinymce/models/dom";
|
||
|
|
import "tinymce/icons/default";
|
||
|
|
import "tinymce/themes/silver";
|
||
|
|
import "tinymce/skins/ui/oxide/skin.css";
|
||
|
|
import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";
|
||
|
|
|
||
|
|
import "tinymce/plugins/link";
|
||
|
|
import "tinymce/plugins/code";
|
||
|
|
import "tinymce/plugins/image";
|
||
|
|
import "tinymce/plugins/table";
|
||
|
|
import "tinymce/plugins/codesample";
|
||
|
|
import "tinymce/plugins/media";
|
||
|
|
|
||
|
|
import "tinymce/plugins/lists";
|
||
|
|
import "tinymce/plugins/autoresize";
|
||
|
|
import "tinymce/plugins/wordcount";
|
||
|
|
|
||
|
|
export let value = "";
|
||
|
|
export let additionalConfig = {};
|
||
|
|
let lastVal = "";
|
||
|
|
let textareaEl;
|
||
|
|
let activeEditor;
|
||
|
|
let editorWrapper;
|
||
|
|
const plugins = [
|
||
|
|
"autoresize",
|
||
|
|
"code",
|
||
|
|
"image",
|
||
|
|
"table",
|
||
|
|
"codesample",
|
||
|
|
"link",
|
||
|
|
"lists",
|
||
|
|
"media",
|
||
|
|
"wordcount",
|
||
|
|
];
|
||
|
|
const toolbar =
|
||
|
|
"bold italic underline strikethrough removeformat | link | subscript superscript bullist numlist media image codesample table code wordcount blockquote indent outdent blocks";
|
||
|
|
|
||
|
|
onDestroy(() => {
|
||
|
|
if (activeEditor) {
|
||
|
|
activeEditor.destroy();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
const config = {
|
||
|
|
target: textareaEl,
|
||
|
|
toolbar_mode: "sliding",
|
||
|
|
toolbar_sticky: true,
|
||
|
|
skin: false,
|
||
|
|
content_css: false,
|
||
|
|
content_style: contentUiSkinCss.toString(),
|
||
|
|
branding: false,
|
||
|
|
inline: false,
|
||
|
|
plugins: plugins,
|
||
|
|
contextmenu: false,
|
||
|
|
menubar: false,
|
||
|
|
statusbar: false,
|
||
|
|
entity_encoding: "raw",
|
||
|
|
convert_urls: false,
|
||
|
|
toolbar: toolbar,
|
||
|
|
image_caption: true,
|
||
|
|
relative_urls: false,
|
||
|
|
browser_spellcheck: true,
|
||
|
|
max_height: 600,
|
||
|
|
// media_poster: false,
|
||
|
|
// content_style:
|
||
|
|
// "body {font-family: 'Averta Std', sans serif; color: #152F77}",
|
||
|
|
setup: function (editor) {
|
||
|
|
activeEditor = editor;
|
||
|
|
|
||
|
|
editor.on("init", function (e) {
|
||
|
|
editor.setContent(value ?? "");
|
||
|
|
});
|
||
|
|
|
||
|
|
// editor.on("blur", function (e) {
|
||
|
|
// let content = setImageDimensions(editor.getContent());
|
||
|
|
// dispatch("editorBlur", content);
|
||
|
|
// editorWrapper.classList.remove("editorFocus");
|
||
|
|
// // return false;
|
||
|
|
// });
|
||
|
|
|
||
|
|
// editor.on("focus", function (e) {
|
||
|
|
// editorWrapper.classList.add("editorFocus");
|
||
|
|
// // return false;
|
||
|
|
// });
|
||
|
|
|
||
|
|
editor.on("change input undo redo", function (e) {
|
||
|
|
lastVal = editor.getContent();
|
||
|
|
if (lastVal !== value) {
|
||
|
|
value = lastVal;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
tinymce.init({...config, ...additionalConfig});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div bind:this={editorWrapper} class="tox-wrapper">
|
||
|
|
<div class="form-control" bind:this={textareaEl}>
|
||
|
|
{@html value}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
:global(.tox:not(.tox-tinymce-inline) .tox-editor-header) {
|
||
|
|
background-color: #fff;
|
||
|
|
border-bottom: 1px solid #ced4da;
|
||
|
|
box-shadow: none;
|
||
|
|
padding: 4px 0;
|
||
|
|
transition: box-shadow 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
:global(.tox-tinymce) {
|
||
|
|
border: 1px solid #ced4da;
|
||
|
|
}
|
||
|
|
</style>
|