文本分量问题

Question

嗨。我希望有个文本组件，不会每次按“回车”键创建新段落时都生成新组件（这不方便使用）。此外，葡萄核心的实际文本部分存在一个问题（见下面的截图）。提前感谢大家的关注！ ![动图-屏幕葡萄]（https://user-images.githubusercontent.com/7770605/34945885-94dc9046-f9e3-11e7-9b6b-70111e5bdb04.gif）

Moikapy · Accepted Answer

不确定我是在这里的某个问题上还是Stack Overflow上看到这个代码，但这里的代码在按下回车键时会把Div替换成a
。我把这段代码放到了和我的 grapes-config 同一个文件里 ![葡萄示例]（https://user-images.githubusercontent.com/18318332/56316222-c0eeb900-6127-11e9-819b-dd9afe74bc6a.JPG） “''js var iframeBody = 编辑器。Canvas.getBody（）; $（iframeBody）.on（“keydown”， “[contenteditable]”， e => { 困住被按下回车键如果（e.keyCode === 13） { e.preventDefault（）; 插入2个BR标签（如果只插入一个BR标签，光标不会跳到下一行） e.target.ownerDocument.execCommand（“insertHTML”， false， “

”）; 防止按回车键的默认行为返回false; } }); ```

ryandeba · Answer

我几天前自己也查过......显然有一个 ['insertBrOnReturn']（https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand）选项用于 'execCommand'，但浏览器支持非常糟糕。像[https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome]这样的解决方案可能更好。 @artf 你希望这种情况如何改变？按回车是否应该像那
个SO讨论中顶部回答中所示的那样插入“''标签？你想把这个作为配置选项暴露出来吗？

gabrigcl · Answer

我找到了一个解决方案，使用 CKEditor 并覆盖原生“文本”组件，创建自己的。我的文本组件现在是一个带有 css 类的 div，用来标识组件： “JavaScript comps.addType（'text'， { model： textModel.extend（{ defaults： Object.assign（{}， textModel.prototype.defaults， { 标签名称：“div”， 名称：“Texto”， 可拖拽： ''， 可丢弃：错误 }), }, { isComponent： function（el） { if（el.tagName == 'DIV' && el.classList.contains（'txt'））{ return {type： 'text'}; } }, }) /...*/ ``` 现在，输入ENTER并不会创建新组件。然而，对于不想使用第三方文本编辑器的人来说，这个解决方案并不能解决这个问题。

文本分量问题

问题

回答（3）

相关问答

本地服务器上的 NPM 开始开发失败了

边境颜色问题

拖曳物品在初始拖拽时位置不定？

高亮和工具栏在外部滚动中位置错误

与此问题匹配的付费插件

相关教程

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

GrapesJS DevTools: A Developer Panel Inside Your Editor

How We Built Composeit in Record Time Using GrapesJS Shadcn

浏览插件分类