如何在 svelte 中使用 editor.md？

Question

我想将editor.md markdown editor 包含在一个纤细的组件中。 我已经尝试设置它，但我什么也没得到：没有来自 javascript 的堆栈跟踪，也没有任何关于问题应该是什么的线索。

我包括手头问题的主要相关文件。

rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import globals from 'rollup-plugin-node-globals';
import builtins from 'rollup-plugin-node-builtins';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js'
    },
    plugins: [
    svelte({
        // enable run-time checks when not in production
        dev: !production,
        // we'll extract any component CSS out into
        // a separate file — better for performance
        css: css => {
        css.write('public/bundle.css');
        }
    }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration —
    // consult the documentation for details:
    // https://github.com/rollup/rollup-plugin-commonjs
    resolve({
        browser: true,
        preferBuiltins: true,
        dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
    }),
    commonjs(),
    globals({
        dirname: false,
        filename: false,
        baseDir: false
    }),
    builtins(),
    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
    ],
    watch: {
    clearScreen: false
    }
};

src/App.svelte:

<script>
 import { onMount } from 'svelte';
 import jQuery from 'jquery';
 import editormd from 'editor.md/editormd';

 export let content = "# Edit!";

 onMount(() => {
   window.jQuery = jQuery;
   var editor = editormd("editor", {
       width: "90%",
       height: 640,
       autoLoadModules: false,
   });
 });
</script>

<style>
 @import "editor.md/css/editormd.css";
</style>

<div id="editor">
    <textarea bind:value={content}/>
</div>

package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "rollup": "^1.12.0",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-inject": "^3.0.1",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-globals": "^1.4.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^4.0.4",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "editor.md": "^1.5.0",
    "jquery": "^3.4.1",
    "sirv-cli": "^0.4.4"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c -w",
    "dev": "run-p start:dev autobuild",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev"
  }
}

我希望编辑器能够加载，但结果我只显示了原始文本区域。 在开发人员控制台中，我什么也没显示。 我是一个使用汇总配置和插件的新手，所以我想我搞砸了这些，但不明白它们有什么问题。

Answer 1

看起来这个库的 CommonJS 发行版是一个工厂，所以你需要这样做：

const factory = editormd();
const editor = factory(id, opts);

在 REPL 中，我可以通过将 id 替换为 jQuery 对象来进一步了解它：https://svelte.dev/repl/355398c8d6bd4081980ed2abfc5f4286?version=3.9.2

不过，除此之外，加载各种资源似乎需要大量配置，我不知道如何设置。