Forums

Hello. I am new to MyScript and also a little new to REACT JS.
I have been using iink.js and wanted to somehow export/save what ever I had written inside the editor, to a text file. 

I have been following the guides and have configurated my editor, I think, to serve the purpose mentioned above. However, my main issue is, I do not know how to build a function that will let me export everything into a text file. Can anyone please guide me as to how can I make a function that can be used to export the handwritten part into a text?

Below is my configuration. 

Olivier @MyScript

Thank you for your answer. I would look into it.

I had another issue I wanted to ask. My main purpose is for users to write into the editor through a pen/mouse/pointer and have an image taken of it which would be sent into a database.

How can I make the editor's configuration as such that it would send the image of the hand written text?

Hi,

I am also a novice programmer trying to save the converted text to a variable so I can save the converted text to the database. I have copied the code provided and can not work out how to access the converted text. I tried var exportText = editorElement.editor.export_(); alert("exportText: " + exportText); which displays "exportText: [object Promise]".

Also, the "Export" button becomes active after I start writing instead of after the convert. As I want to capture the converted text the export button should only become active when there is some converted text available to export.

Kind regards,

Glyn

Hi,

Sorry for the delay; however, I am concentrating on swabs and jabs at the moment as part of the COVID-19 response. Unfortunately this does not answer my question.

The use case is that I write text on the page. I then convert it. I then want to save that converted text to a database. I have looked at the documentation and the examples and can not work out how to do this. Please note that I am not an experienced programmer so I do need detailed instructions.

My code is:

HTML:

<nav style="flex-direction: row;">
							<div class="button-div">
								<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
									<img src="images/undo.png">
								</button>
								<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
									<img src="images/redo.png">
								</button>
							</div>
							<select id="language" class="col-lg-2 col-md-3"></select>
							
							<div class="spacer"></div>
						    <input type="text" class="input-field" id="importContentField" data-type="text/plain" placeholder="e.g. hello world">
						    <button class="classic-btn" id="importContent">Import</button>
						    
							<div class="spacer"></div>
							<button class="classic-btn" id="exportContent" disabled>Export</button>
						</nav>
						
						<div id="editor" touch-action="none"></div>

 JS:

$(document).on('click', '#handwritingBtn', function(){

		$("#handwriting").show();
		
		const editorElement = document.getElementById('editor');

		const languageElement = document.getElementById('language');
		const undoElement = document.getElementById('undo');
		const redoElement = document.getElementById('redo');
		
		const importContentField = document.getElementById('importContentField');
		const importContentElement = document.getElementById('importContent');
		
		const exportElement = document.getElementById('exportContent');

		editorElement.addEventListener('changed', (event) => {
			undoElement.disabled = !event.detail.canUndo;
			redoElement.disabled = !event.detail.canRedo;
			exportElement.disabled = !event.detail.canExport;
		});
		
		editorElement.addEventListener('loaded', async (evt) => { //invalid arrow arrow function parameters
		    /**
		     * Retrieve the list of available recognition languages
		     * @param {Object} The editor recognition parameters
		     */
			const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang; //Semi-colon expected
			const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);

			if (languageElement.options.length === 0) {
				Object.keys(res.result).forEach((key) => {
					const selected = currentLanguage === key;
					languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
				});
			}
		});
		
		languageElement.addEventListener('change', (e) => {
			const configuration = editorElement.editor.configuration;
			//The path to the language depend of the version of API you are using.
			configuration.recognitionParams.iink.lang = e.target.value;
		});

		undoElement.addEventListener('click', () => {
			editorElement.editor.undo();
		});
		
		redoElement.addEventListener('click', () => {
			editorElement.editor.redo();
		});
		
		importContentElement.addEventListener('click', () => {
			const value = importContentField.value.replace('\\n', '\n');
			editorElement.editor.import_(value, importContentField.dataset.type);
		});
		
		exportElement.addEventListener('click', () => {
			exportElement.disabled = true;
			var convertedText = editorElement.editor.export_();
			alert("exportText: " + exportText);
		});

		  /**
		   * Attach an editor to the document
		   * @param {Element} The DOM element to attach the ink paper
		   * @param {Object} The recognition parameters
		   */
		iink.register(editorElement, {
			recognitionParams: {
				type: 'TEXT',
				protocol: 'WEBSOCKET',
				server: {
					scheme: 'https',
					host: 'webdemoapi.myscript.com',//cloud.myscript.com
					applicationKey: 'xxxxxxxxxxxx',
					hmacKey: 'xxxxxxxxxxxxxxxx'
				},
				iink: {
					export: {
						jiix: {
							strokes: true
						}
					}
				}
			}
		});

		window.addEventListener('resize', () => {
			editorElement.editor.resize();
		});
	});

 Or do I need to pay for this level of support? If I do then how much does it cost please?

Kind regards,

Glyn

Thank you Olivier, I will try to work this out.