How to add Text dynamically in CKEditor 4 at the position where the cursor is currently?

LayTexas 0
Viewed 15

I have a screen where the user needs to fill in a rich document (I'm using Ckeditor4) and at some point he can click on a list, and the item in that list should appear at the current cursor position in the rich text. I saw that it is possible to do it using JQuery, but I didn't find anything similar with React. Can anyone recommend me some documentation for this?

Here is the code I've made so far.

import { CKEditor } from "ckeditor4-react";

const TextEditor = () => {

  function handleClick(fruit:string){
      //add to CKEditor
  }


  return (
    <>
      <div>
        {["Apple", "Banana", "Grape", "Pineapple"].map((item) => (
          <button key={item} onClick={()=>handleClick(item)}></button>
        ))}
      </div>

      <CKEditor initData="<p>This is an example CKEditor 4 WYSIWYG editor instance.</p>" />
    </>
  );
};

export default TextEditor;
ckeditor4.x reactjs
1 Answers

To solve this you can make use of State in setting your initial data and changing the state value on Click. I've done an implementation here using React Class Components: https://codesandbox.io/s/ckeditor-5-react-forked-5q7jmk?file=/src/index.js

For your case


import {useState} from 'react'
import { CKEditor } from "ckeditor4-react";

const TextEditor = () => {
  const [data, setData] = useState('')

  function handleClick(fruit:string){
     setData(fruit)
  }


  return (
    <>
      <div>
        {["Apple", "Banana", "Grape", "Pineapple"].map((item) => (
          <button key={item} onClick={()=>handleClick(item)}></button>
        ))}
      </div>

      <CKEditor initData={data} />
    </>
  );
};
Abdul-Qudus A O0
Related