所以最近我一直在尝试在我的vuejs项目中添加grapesjs编辑器,但事情并没有按计划进行,我在浏览器中看不到编辑器,并且应该包含编辑器的标签是空的。这是我的 * 编辑器配置 *:
<template>
<div ref="canvas"></div>
</template>
<script setup>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
const canvas = ref(null)
const editor = grapesjs.init(
{
container: canvas.value,
fromElement: true, // Load existing HTML from the container
storageManager: {
type: "local", // Enable saving and loading from local storage
autosave: true, // Enable autosave
autoload: true, // Load previously saved data
},
canvas: {
styles: [
// Custom canvas styles
],
scripts: [
// custom scripts
],
},
plugins: ["gjs-preset-webpage"],
pluginsOpts: {
"gjs-preset-webpage": {
// Options for the preset plugin
},
},
});
</script>
字符串
注意:我在另一个vue3项目(使用btw语法)中尝试了这个配置< script>,它工作了:
<template>
<div ref="editor"></div>
</template>
<script>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
export default {
name: app,
data() {
return {};
},
mounted() {
const editor = grapesjs.init({
container: this.$refs.editor,
fromElement: true, // Load existing HTML from the container
storageManager: {
type: "local", // Enable saving and loading from local storage
autosave: true, // Enable autosave
autoload: true, // Load previously saved data
},
canvas: {
styles: [
// Custom canvas styles
],
scripts: [
// custom scripts
],
},
plugins: ["gjs-preset-webpage"],
pluginsOpts: {
"gjs-preset-webpage": {
// Options for the preset plugin
},
},
});
},
};
</script>
型
我已经尝试了 < script>* 版本在我目前的项目,以及它的工作,我有点肯定的问题是有关的 < script setup>* 语法。
有人能告诉我第一种情况下编辑器没有加载的原因是什么吗?我该如何解决这个问题?
1条答案
按热度按时间pkmbmrz71#
我已经添加了onMounted挂钩,现在它的工作,我真的不知道如何或为什么,因为我尝试了几次,它没有工作,我很困惑它怎么一整天都没有工作,现在它工作了。
我会让这篇文章,让任何人遇到同样的问题,可以找到它有用。下面是代码:
字符串