Insert html tag with linked metadata in document

[Renato]

This question is about including a html tag with linked metadata in the component "Document Editor". I am using Essential JS2 JavaScript (ES5) in an Angular 1.5.x project.

I am currently developing a 'tag adding tool' in which the user creates a template document where he can include tags with text and linked metadata.

So, when the template is being used to create a new document, these tags with metadata are replaced with the real data from the database.

To accomplish that, I was trying  (... with no success...) to insert/paste an html tag with the associated metadata, like the example below:

       '<span data-tag="{{datatag}}" data-context="{{datacontext}}">{ ' + angular.element(elem).text() + ' }</span>'

Is there some solution to insert an html tag with associated metadata in the document editor page? If not, is there a way to execute this idea?

Thank you so much in advance.

Greetings!

[Suriya Murugan]

Hi Renato, 

Syncfusion Greetings! 

Documenteditor: 

We don’t have direct options to insert html tag in documenteditor. You can process the html string and insert it in documenteditor. Using LoadString, you can process the html in backend and then convert to sfdt. In client side, using paste API, you can insert that sfdt in Documenteditor. 

Backend 

Using load string API, you can convert the RTF to Sfdt.  

Syncfusion.EJ2.DocumentEditor.WordDocument doc = Syncfusion.EJ2.DocumentEditor.WordDocument.LoadString(“provide your processed html string here”, Syncfusion.EJ2.DocumentEditor.FormatType.Html);  

var sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(doc);  

Load the return Sfdt in Documenteditor Paste API.  

Code snippet in client side: 

container.documentEditor.editor.paste(“provide return sfdt here”); 

Using ej2-richtexteditor component, you can insert html and it won't process binding data, which placed in the tag. 

https://ej2.syncfusion.com/documentation/rich-text-editor/exec-command/  

rteObj.executeCommand('insertHTML', 'inserted an html'); 

Documentation link: https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started/  

Can you please check above and let us know this satisfied your requirement? 

Regards, 

Suriya M. 

[Renato]

Hello Suriya,

Thank you for the quick reply.

I appreciate the suggestion of the component ej2-richtexteditor. However, I am intend to use Document Editor component, as it is easier for the users to visualize the templates as a document page.

So, when creating the element which is being 'translated' from html to sfdt (in server side), is there a way/is it possible to also include a custom parameter in the returned json, so that custom parameter has an element/object with that binding data?

For instance, imagine the final json string to be pasted in the container would be something like:

let json = {

"characterFormat": {

"bold": true,

"italic": true

},

"customElement": {

"dataTag": "dataTagValue",

"dataContext": "dataContext"

},

"text": "Tag"

};

container.documentEditor.editor.paste(json);



Once again, thank you so much for the assistance.

Greetings

[Suriya Murugan]

Hi Renato, 

We are sorry to say that its not possible to add custom element in Json. We have created JSON based on word structure format and process it. Can you please try creating the Sfdt(Json) after data binded in html? 

Please let us know if you have any questions. 

Regards, 

Suriya M.