init

2023-10-02 23:10:49 +03:00
commit c6cb488379
255 changed files with 18731 additions and 0 deletions
@@ -0,0 +1,124 @@
+<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>