ng2-ckeditor icon indicating copy to clipboard operation
ng2-ckeditor copied to clipboard

Replace or change selected text with external button click.

Open shubhamp861 opened this issue 2 years ago • 1 comments

How to replace selected text with different text or more on to add style . For example if i select any text from editor and click on bold button it will go and change my selected text with bold style. wanted to create a button which will change or replace my selected text in editor

shubhamp861 avatar Aug 05 '22 11:08 shubhamp861

Add a custom button to your editor with click event as shown here. To get the selected text use getSelection() method as shown here

kzimny avatar Aug 13 '22 07:08 kzimny

Able to get selected text and button, but still don't know how we can replace it with different text so it can reflect back same to ck editor window.

And also can we achieve Foot Note. for example refer below link

https://www.drupal.org/docs/8/modules/footnotes/adding-footnotes-to-content-via-the-ckeditor-toolbar

shubhamp861 avatar Aug 16 '22 10:08 shubhamp861

Your questions are out of scope of ng2-ckeditor. For more information how ckeditor works please refere the ckeditor documentation. Yes, you can replace the text or add your own element.

const selection = this.ckeditor.instance.getSelection();
const txt = selection.getSelectedText(); // or replace the text

let element: CKEDITOR.dom.element;
element = this.ckeditor.instance.document.createElement('span');
element .setAttribute('id', 'myIdXYZ');
element.setHtml(txt);
this.ckeditor.instance.insertElement(element);

kzimny avatar Aug 16 '22 10:08 kzimny

Thanks this will work for me. thanks for quick response.

shubhamp861 avatar Aug 16 '22 10:08 shubhamp861