Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial data not set #1

Open
Spaceman2019 opened this issue Mar 9, 2023 · 0 comments
Open

Initial data not set #1

Spaceman2019 opened this issue Mar 9, 2023 · 0 comments

Comments

@Spaceman2019
Copy link

Spaceman2019 commented Mar 9, 2023

The initial data is not inserted in the editor.

Here is my source code:

<script lang="ts">
  // Jodit wrapper component
  import JoditEditor from "jodit-svelte";
  // Use Jodit Community Version
  import "jodit/build/jodit.es2018.en.min.css"
  import {Jodit} from "jodit";

  // Editor constructor
  let editorConstructor = Jodit;
  // Reference to initialised editor instance
  let editorInstance = null;
  // Setting up any initial data for the editor
  let editorValue = "<p>Hello World<p>";

  // If needed, custom editor config can be passed through to the component
  // Uncomment the custom editor config if you need to customise the editor.
  let editorConfig = {
    toolbarButtonSize: 'small',
    buttons: [
      'font', 'paragraph', 'bold', 'italic', 'underline', 'eraser', '|',
      'superscript', 'subscript', '|',
      'left', '|',
      'ul', 'ol', '|',
      'outdent', 'indent', '|',
      'cut', 'copy', 'paste', '|',
      'brush', 'hr', '|',
      'table', 'link', 'image'
    ],
    uploader: {
      insertImageAsBase64URI: true
    },
    language: 'de',
    i18n: 'de',
    width: '100%',
    height: 'calc(100vh - 13rem)',
//    readonly: true,
    allowResizeY: false,
    statusbar: false,
    triggerChangeEvent: true,
  };

  function onReady({ detail: editor }) {
    editorInstance = editor;
    console.log(editor.isReady);
  }

  function onChange({detail: {data}}) {
    editorValue = data;
    console.log(data);
  }
</script>

<main>
  <div style="width=100%; height=800px">
    <JoditEditor
      bind:editorConstructor={editorConstructor}
      on:ready={onReady}
      on:input={onChange}
      bind:config={editorConfig}
      bind:value={editorValue} />
  </div>
  </main>

<style>
</style>

package.json:

  "dependencies": {
    "jodit": "^3.24.5",
    "jodit-svelte": "^1.0.3"
  }

The result is:
jodit-editor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant