Adding extra HTML element in editor

And in API tab using graphql I can check that the content is saved,

But if I came back to the content and check for bodyManiraj content, It gives empty value only,

Sorry couldn’t include that textarea showing no value image as I am new user restricted with replies and image uploading, but I hope you can get the view that no value is there inside textarea of bodyManiraj.

(Refer previous image where table is there instead of that there is a empty <p> </p> tag alone with <br /> statement inside it but the data we entered is saved and available in API tab)

Could you please help me in any squidex Function/Method to load data in editor after page refresh.

What actually I am doing wrong here and how to make the saved content append to the textarea?

Awaiting for your help and thanks in advance…

The tiny editor is very tricky to work with.

I would say it should look like this:

var field = new SquidexField();

tinymce.init({
   setup: (editor => {
      editor.on('init', () => {		
		// Subscribe here. The onValueChanged might be called directly with the current value.
		field.onValueChanged(function (value) {
			editor.setContent(value || '');
		});
		
		// Subscribe here. The onValueChanged might be called directly with the disabled state.
		field.onDisabled(function (disabled) {
			editor.setMode(disabled ? 'readonly' : 'design');
		});
	  });
	  
	  editor.on('change', () => {
		const value = editor.getContent();

		field.valueChanged(value);
	  });
	  
	  editor.on('blur', () => {
		field.touched();
	  });
   }
});

NEVER ever communicate with the underlying textarea.

@Sebastian, I have included the code given by you above but it still doesn’t make the content appended to textarea by default.

Modified link: https://repl.it/@ManirajVanna/tinymcevanna#index.html

Also can you verify whether it is var field = new SquidexField(); ?? If I gave SquidexField then it gives error and SquidexFormField doesn’t throw error but expected result is not achieved either way…

Please take a look at the editor and kindly please check for the changes I have made and let me know your feedback on it.

Also the above code changes doesn’t allow to make any change and save which works previously…

Also can you explain in detail what you mean by this statement ??

I htink you should not set the value of the textarea, but use setContent and getContent.

But your updated sample works fine for me.

1 Like

Yes @Sebastian , I have just done few cleanup work and it works fine now and now able to save the content and also able to retrieve the content on page load and very big thanks for your help…

1 Like

You could able to see the below working snippet(codepen) where the pinterest link was embeded.

Codepen Link: https://codepen.io/Maniraj_Murugan/pen/PoZpVrd

The same thing I need to implement inside the text editor

Text editor that I have built: https://repl.it/@ManirajVanna/tinymcevanna#index.html

In that the steps I have implemented,

-> Included <script async defer src="//assets.pinterest.com/js/pinit.js"></script> inside body tag.

-> Then at the right side editor view I have clicked on View => Source Code.

Then included the following link and saved it too,

<a href="https://www.pinterest.com/pin/192740059037785029" data-pin-do="embedPin"> </a>

But it doesn’t embed pinterest inside editor.

When Opening it again with same View => Source Code then the code is like,

<p><a href="https://www.pinterest.com/pin/192740059037785029" data-pin-do="embedPin"> </a></p>

But the pinterest post is not visible inside the editor.

Please kindly help me how can I embed pinterest inside the editor I have given above…

It is something like

editor.execCommand('mceInsertContent', false, myHtml);

Once again thanks @Sebastian … But the above gives me error as Uncaught ReferenceError: myHtml is not defined … If I give like editor.execCommand('mceInsertContent',false,'<b>Hello world!!</b>'); inside init method then there is no error but it also doesn’t show the pinterest post inside the editor… Again link for the same implementation: https://repl.it/@ManirajVanna/tinymcevanna#index.html

Also user will add the html <a href="https://www.pinterest.com/pin/192740059037785029" data-pin-do="embedPin"> </a> via View => Source Code in the toolbar using the editor…

myHtml is just a placeholder for your html code.

Yes I got that and changed it like '<b>Hello world!!</b>' but still no luck… If you can help me what exact change should I need to make in tinymce then that would be really a great help @Sebastian

Sorry, thats a problem you have to solve yourself. I am only “responsible” for the squidex stuff.

You are right but I have tried like editor.execCommand('mceInsertContent',false,'<b>Hello world!!</b>'); inside init method but that doesn’t resolve the issue… And I am very new to squidex, So seeking your help…

I guess it just does not work in init: https://repl.it/repls/RapidImmaculateTelephones

Still it doesn’t work when we include <a href="https://www.pinterest.com/pin/192740059037785029" data-pin-do="embedPin"> </a> via View => Source Code (Using editor toolbar)… It is displaying Hello World if we click on Click Me… But expectation is that user will add this above a tag using toolbar View => Source Code…

I have also posted question in tinymce: https://community.tiny.cloud/communityQuestion?id=9063i000000PuUlAAK

But there is no answers yet… If you have any clue on how to make it working then that would be great @Sebastian … Still your help is highly appreciable for previous conversations…

I don’t know where you need my help. I have to do the same as you: Dig into the samples and documentation and try it out.

Okay @Sebastian … Thanks for your help…