问题描述
我正在尝试使用葡萄 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",label: "Styles",command: "show-styles",togglable: true,{
id: "add-class",label: "CLS",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",buildProps: [
"background-color","Box-shadow","custom-prop",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",getStyleEl(row) {
return row.querySelector(".styles-container");
},sender) {
document.getElementById("panel__right").style.width = "230px";
document.getElementById("doneChanges").style.display = "flex";
const smEl = this.getStyleEl(this.getRowEl(editor));
smEl.style.display = "";
},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";
},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 的情况下直接在网页内加载葡萄 JS 文本编辑器吗？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）