Insert text on position of cursor inside CKeditor

0
Hello everyone,   I would like to insert a piece of text inside the CKeditor with a button. The people using my app create their own e-mail templates and would like to use tokens in their templates. I have created buttons so that they can insert the tokens, but I want the token to be inserted on the position of the cursor. Is there someone who did something similar and wants to share their thoughts?   Kind regards, Roy
asked
1 answers
1

You can do it with a nanoflow and calling a javascript action. I use the following. It has two input parameters: the string to be inserted (obviously) and a boolean which indicates if it’s html already or regular text like the user would type it. Warning: this will only work if there’s only one ckeditor widget on the page.

 

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * @param {string} insertableString
 * @param {boolean} insertAsHtml
 * @returns {Promise.<boolean>}
 */
export async function JS_CKE_InsertAtCursorPosition(insertableString, insertAsHtml) {
	// BEGIN USER CODE
	if(typeof CKEDITOR !== 'undefined') {
		var cke = CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]];
		if (cke !== 'undefined'){
			if(insertAsHtml) {
				cke.insertHtml(insertableString);
			} else {
				cke.insertText(insertableString);
			}
			return true;
		} else {
			return false;
		}
	} else {
		return false;
	}
    
	// END USER CODE
}

 

answered