给新的特征类型添加葡萄色选色器？

Question

我正在构建一个新的特质类型，想在里面包含Grapesjs的颜色选择器——有什么建议吗？目前我在“inputEl”的html里包含标准HTML颜色输入（还有文本字段和单选按钮），但如果可能的话，我很想用grapesjs自带的颜色输入。举个我想放葡萄采摘器的位置示例。 inputEl = '

这里有 HTML

颜色

： <输入类型=“颜色” id=“colorpicker” value=“”

这里>更多 HTML

感谢任何建议。顺便说一句，这是个很棒的工具，谢谢你创建它。

pnellesen · Accepted Answer

@nojacko我稍微修改了代码，基本上我现在的做法是： “''js getInputEl： function（） { 如果（！this.inputEl） { var input = document.createElement（'div'）; input.innerHTML = this.inputHtml var inputEl = input; var pickerEl = inputEl.querySelector（“.myolorPicker”）; pickerEl.id = “ppcp” + this.cid; if （！this.model.colorPickerEl） {// 将jQuery光谱色彩选择器添加到我们的特征编辑器中 this.model.colorPickerEl = 编辑器。TraitManager.getType（'color'）.prototype.getInputEl.apply（this， arguments）; } pickerEl.appendChild（this.model.colorPickerEl） ...用于处理值变更和更新其他字段...

artf · Answer

你好@pnellesen这其实是个很好的问题，确实应该允许这样做，但遗憾的是，目前情况并不那么简单。我们应该重构一些模块，让界面更易复用。 顺便说一句，试着扩展编辑器。TraitManager.getType（'color'）.prototype.getInputEl' 在 'getInputEl' 方法里，看看它是否能帮到你

pnellesen · Answer

@artf——谢谢你的回复！你的建议效果不错（甚至在 Internet Explorer 里也能用，比我用的 html5 颜色选择器还好:p）。我对样式和输入数据还有些调整，但总体来说还不错。 再次感谢！ 给好奇它是怎么运作的（我相信可能还有更好的方法）： 只需要添加大约5行代码（下面加粗），并在我想连接拣选器的元素上添加一个“data-colorp-c”属性： getInputEl： function（） { 如果（！this.inputEl） { var input = document.createElement（'div'）; var thisModel = this.model; var thisTarget = this.target; var that = this var thisColorPicker = function（） { 返回编辑。TraitManager.getType（'color'）.prototype.getInputEl.apply（that， arguments）; } ...更多的代码...... myColorPickerEl.append...

给新的特征类型添加葡萄色选色器？

问题

回答（3）

相关问答

使用自定义视图时无法选择子组件

错误的BG重复CSS设置

：尝试添加背景图像时出现404（演示中可复现）

文本：每次我按下回车键，都会创建新的div，而不是创建一个 </br>

与此问题匹配的付费插件

相关教程

Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉

GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework

浏览插件分类

问题