我正在尝试使用grapes Js 来编辑HTML（即字体大小、颜色等）。我正在将 HTML 和 CSS 动态加载到葡萄 Js 中。
但我想知道有没有一种方法可以在没有葡萄 js 画布的情况下直接在该 HTML 中编辑字体大小的功能？
请找到我用来将 HTML 的 html 和 css 加载到葡萄 JS 中的以下代码
const createGrapesJSTemplate = (body) => {
const str = `<div>
<div class="panel__top">
<div class="panel__basic-actions"></div>
<div class="panel__switcher"></div>
</div>
<div class="editor-row">
<div class="editor-canvas">
<div id="gjs">
${body}
</div>
</div>
<div class="panel__right" id="panel__right">
<div class="layers-container"></div>
<div class="styles-container"></div>
<div class="add-class" id="add-class">
<label htmlFor="class">Class Name</label>
<input
style="margin-top: 2%; color:black"
type="text"
id="add-class-input"
/>
<button style="background-color:red; color:white" onclick="addClass()">
Add
</button>
</div>
<div id="doneChanges" class="doneChanges" style="margin-top:5%; display:flex; justify-content: flex-start">
<button onclick="onClickingDone()" style="background-color:red; color:white">
Done
</button>
</div>
</div>
</div>
</div>`
let html
if (false) {
} else {
var dom = document.createElement('div')
dom.innerHTML = str;
html = dom;
}
$("body").html(html)
}
const appendGrapesJSScript = (style) => {
const grapesJSScript = document.createElement("script")
grapesJSScript.innerHTML = `editor = grapesjs.init({
// Indicate where to init the editor. You can also pass an HTMLElement
container: "#gjs",
// Get the content for the canvas directly from the element
// As an alternative we could use: "components: '<h1>Hello World Component!</h1>'",
fromElement: true,
// Size of the editor
// Disable the storage manager for the moment
storageManager: false,
// Avoid any default panel
layerManager: {
appendTo: ".layers-container",
},
//we define the panel right as layout manager
panels: {
defaults: [
{
id: "layers",
el: ".panel__right",
// Make the panel resizable
draggable: true
},
// code for layers and style manager
{
id: "panel-switcher",
el: ".panel__switcher",
buttons: [
{
id: "show-layers",
active: true,
label: "Layers",
command: "show-layers",
// Once activated disable the possibility to turn it off
togglable: true,
},
{
id: "show-style",
active: true,
label: "Styles",
command: "show-styles",
togglable: true,
},
{
id: "add-class",
active: true,
label: "CLS",
togglable: true,
command: "add-classes",
},
],
},
],
},
// The Selector Manager allows to assign classes and
// different states (eg. :hover) on components.
// Generally, it's used in conjunction with Style Manager
// but it's not mandatory
// selectorManager: {
// appendTo: ".styles-container",
// },
styleManager: {
appendTo: ".styles-container",
sectors: [
{
name: "Dimension",
open: false,
// Use built-in properties
buildProps: ["background-size", "margin", "padding", "width", "height", "font-size", "border-radius"],
// Use "properties" to define/override single property
properties: [
{
// Type of the input,
// options: integer | radio | select | color | slider | file | composite | stack
type: "integer",
name: "The width", // Label for the property
property: "width", // CSS property (if buildProps contains it will be extended)
units: ["px", "%"], // Units, available only for 'integer' types
defaults: "auto", // Default value
min: 0, // Min value, available only for 'integer' types
},
],
},
{
name: "Extra",
open: false,
buildProps: [
"background-color",
"box-shadow",
"custom-prop",
"font-size",
],
properties: [
{
id: "custom-prop",
name: "Font Size",
property: "font-size",
type: "integer",
defaults: "32px",
units: ["px", "%"],
min: 0,
},
],
},
],
},
blockManager: {},
});
editor.Panels.addPanel({
id: "panel-top",
el: ".panel__top",
});
editor.Panels.addPanel({
id: "basic-actions",
el: ".panel__basic-actions",
buttons: [
{
id: "export",
className: "btn-open-export",
label: "Exp",
command: "export-template",
context: "export-template", // For grouping context of buttons from the same panel
},
],
});
// Define commands
editor.Commands.add("show-layers", {
getRowEl(editor) {
return editor.getContainer().closest(".editor-row");
},
getLayersEl(row) {
return row.querySelector(".layers-container");
},
run(editor, sender) {
document.getElementById("panel__right").style.width = "230px";
document.getElementById("doneChanges").style.display = "none";
const lmEl = this.getLayersEl(this.getRowEl(editor));
lmEl.style.display = "";
},
stop(editor, sender) {
document.getElementById("panel__right").style.width = "0px";
document.getElementById("doneChanges").style.display = "none";
const lmEl = this.getLayersEl(this.getRowEl(editor));
lmEl.style.display = "none";
},
});
editor.Commands.add("show-styles", {
getRowEl(editor) {
return editor.getContainer().closest(".editor-row");
},
getStyleEl(row) {
return row.querySelector(".styles-container");
},
run(editor, sender) {
document.getElementById("panel__right").style.width = "230px";
document.getElementById("doneChanges").style.display = "flex";
const smEl = this.getStyleEl(this.getRowEl(editor));
smEl.style.display = "";
},
stop(editor, sender) {
document.getElementById("panel__right").style.width = "0px";
document.getElementById("doneChanges").style.display = "none";
const smEl = this.getStyleEl(this.getRowEl(editor));
smEl.style.display = "none";
},
});
editor.Commands.add("add-classes", {
run(editor, sender) {
document.getElementById("panel__right").style.width = "230px";
document.getElementById("doneChanges").style.display = "flex";
document.getElementById("add-class").style.display = "flex";
},
stop(editor, sender) {
document.getElementById("panel__right").style.width = "0px";
document.getElementById("doneChanges").style.display = "none";
document.getElementById("add-class").style.display = "none";
},
});
editor.setStyle(${JSON.stringify(style)})
window.editor = editor
`
document.body.appendChild(grapesJSScript)
}
有人可以帮我弄清楚在没有葡萄JS Canvas的情况下直接在网页内加载grapesjS文本编辑器吗？