Issue #1426💬 AnsweredOpened September 14, 2018by YashPrince0 reactions

Make some element unediatble by default.

快速解答by artf

Extend the text component type and implement your logic in isComponent. If the element meets your conditions (you would probably check for inner elements) just return the object in this way

Read full answer below ↓

Question

@artf how can we set some configuration so that while importing html in editor it will not consider some element as text component and it should consider as inside text of the parent. eg.. <p> here is some example text.<span> Do not make it as text component </span> Example text 2 </p> I don't want to make span as text component as P is already editable. I can not set data-js-editable as false. because it need to update multiple places. So I want to know that there is any way where I can put that span like element will not convert to text component. Thank You!

Answers (2)

artfSeptember 15, 2018

Extend the text component type and implement your logic in isComponent. If the element meets your conditions (you would probably check for inner elements) just return the object in this way

isComponent(el) {
	// ...
	if (isWhatYouNeed) {
		return {
			type: 'text',		
			content: el.innerHTML,
			components: [], 
			// By putting components you prevent the parser 
			// from going deeper traversing of your DOM elements
		}
	}
},
lock[bot]September 17, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.