editor - 如何在 svelte 中使用 editor.md?
问题描述
我想将editor.md 降价编辑器包含在一个纤细的组件中。我试过设置它,但我什么也没得到:没有来自 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"
}
}
我希望编辑器能够加载,但结果我只显示了原始文本区域。在开发人员控制台中,我什么也没显示。我是一个使用汇总配置和插件的新手,所以我想我把它们搞砸了,但不明白它们有什么问题。
解决方案
看起来这个库的 CommonJS 发行版是一个工厂,所以你需要这样做:
const factory = editormd();
const editor = factory(id, opts);
在 REPL 中,我可以通过替换id
为 jQuery 对象来进一步了解它:https ://svelte.dev/repl/355398c8d6bd4081980ed2abfc5f4286?version=3.9.2
不过,除此之外,加载各种资源似乎需要大量配置,我不知道如何设置它。
推荐阅读
- wpf - WPF TextBox.Text 属性 OneWay 绑定错误?
- css - 哪些 CSS 属性会穿透 WebComponent 的影子根?
- azure-devops - 在 Azure Devops 中使用 git
- swift - 如何快速修复“在范围内找不到‘存在’和‘解雇’”错误
- python - 如何从熊猫系列中的字符串中删除标点符号
- python - Python 类:查找总和等于特定数字的数组
- c++ - 概念的部分排序如何解决约束重载?
- python - 在 Python 中发送广播
- powershell - 运行带参数的 PS 脚本
- kotlin - Kotlin 的“if”关键字实际上是一个函数吗?