Closed alexiswbr closed 4 years ago
@alexiswbr using the below snippet, the div
's will become br
's as the expected behaviour:
var iframeBody = editor.Canvas.getBody();
$(iframeBody).on("keydown", "[contenteditable]", e => {
// trap the return key being pressed
if (e.keyCode === 13) {
e.preventDefault();
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
e.target.ownerDocument.execCommand("insertHTML", false, "<br><br>");
// prevent the default behaviour of return key pressed
return false;
}
});
I use such way to prevent transformation to component and keep original html.
Just override component that you need, for example text
or create new.
Maybe it's not good solution, but it works :)
export default (editor, type) => {
const comps = editor.DomComponents;
const typeToExtend = comps.getType(type);
const modelToExtend = typeToExtend.model;
comps.addType(type, {
model: modelToExtend.extend({
init() {
if (modelToExtend.prototype.init) {
modelToExtend.prototype.init.apply(this, arguments);
}
const models = this.components().models;
if (models.length) {
const elem = models.reduce((content, component) => {
content.append(component.get('rawContent') || component.get('content'));
return content;
}, document.createElement('div'));
for (let i = models.length; i !== 0; i--) {
models[i - 1].remove();
}
this.set({content: elem.innerHTML});
}
}
}, {
isComponent(el) {
if (el && el.parentElement && el.parentElement.dataset && el.parentElement.dataset.gjsType === type) {
return {
type: type,
content: el,
rawContent: el,
tagName: 'raw_html'
};
}
return false;
}
}),
view: typeToExtend.view
});
}
Well these are some quick fix but there is another bug maybe linked to this one.
The more you click on the text component, the more the ids are duplicated and you end up with some HTML nodes having this kind of id : ilin-2-2-2-2-2-2-2-2-2-2-2-2
.
Ok I'll try to check this out
@artf The same issue exists in the latest online demo : https://grapesjs.com/demo.html Please help me find a solution to the problem. Although it's marked fixed, but maybe because of some other code it's happening again.
This bug is also on the online demo : https://grapesjs.com/demo.html
Now if you click on the "view code" button, you will see that the HTML nodes inside the Text Block have some
draggable="true
attributes. This always occure at step three. The first time you edit the text and add break lines, everything is fine, as long as you do not want to edit the block again later.The problem is, in the final HTML displayed on a website, these attributes are still there. You can not select anything because the navigator interpreting the draggable attributes. And yes I am saving in database both of the
html
andcomponents
separatelyIt seems like a bug to me, or I misunderstood something else