当我们用 editor.getHtml（）获取 HTML 时，图片不会改变

Question

你好@artf

我正在用grapes.js来做我的网站建设工具，把它集成到我的网站里。当我双击任意图片时，资产管理器会打开，我可以从资产管理器中选择图片。

问题是我设置了条件，比如一旦用户选择asset-manager里的任何图片，我会把'img'标签替换成'div'标签，并在那里初始化一个image-editor（它是cropper.js）'。

现在一旦我在选择图片后关闭资产管理器，新的图片路径会被设置，新的 div 也会被设置，而不是 img 标签。

一旦用户点击编辑器（我指的是图片编辑器）中的完成按钮，它就会给我们64进位的图片，我也会把更新后的64进位图片替换到UI里，但当我用“editor.getHtml（）”获取实际HTML内容时，我只得到更新后的路径img标签，而不是被替换的div和base：64图像路径。

我能知道如何在使用 editor.getHtml（）获取 HTML 内容时更新新的图片路径（base-64）吗？

我附上了相同的屏幕录制视频， https://drive.google.com/file/d/1zeUcO8aVXDCeWCVakHpbycgHGtfnU4Qa/view

artf · Accepted Answer

你没有展示任何代码，但我猜你只是编辑了组件的DOM元素，实际上你应该更改它的[Component]（https://grapesjs.com/docs/api/component.html）模型数据（例如'imgModel.set（'src'， 'base64....'）'）

AkibDeraiya123 · Answer

你好@artf 感谢你对我问题的回复。 我这里附上了我的代码，请告诉我哪里做错了。 基本上，上面的代码会运行，用户会双击特定图片。在这个函数里，我会在选中的图片中添加一个随机生成的“id”属性。 现在我也叫了“stop：open-assets”， 我试过类似“这代码运行正常，而我打算用”.set“函数配合”opts“。但这里的问题是，当我添加这3行时，assetManager无法打开。 如果有 editor.command 方法，当用户选择图片并关闭 assetManager 时，它会用三个参数运行，比如“editor”、“sender”、“opts”，所以通过这个“opts”，我可以设置新的图像路径，这些路径会反映到界面和模型中，所以当我拿到完整的 HTML 时，这个 src 应该会更新。 否则我怎么能让这三个参数“editor， sender， opts”进入“editor.on（”stop：open-assets“'函数？ 我做了什么，我试着在这里解释你。如果你还是不明白我的意思，告诉我，我会再解释一次，但请给我一些例子，让我更好地了解如何通过出色的grapes.js自由以及那...

artf · Answer

目前在这个函数里，我用jQuery更改了图片“src”，运行正常。但当我看到'editor.getHtml（）'时，它并没有被重新填入。

......@AkibDeraiya123这正是我之前评论里告诉你的......不要用JQuery编辑DOM......按照我说的编辑模型

当我们用 editor.getHtml（）获取 HTML 时，图片不会改变

问题

回答（3）

相关问答

自定义组件的选择无法通过Canvas进行。

编辑时内容将自动删除

物品掉落在打开图层面板后会重复。

模型与组件示例代码及问题

与此问题匹配的付费插件

相关教程

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

浏览插件分类