Add content at cursor position with Ckeditor 4.5

Asked

Viewed 662 times

4

I have a textarea where certain text will be typed. This text may contain some specific fields (variable type, which will be replaced later). I need to know how to insert these "variables" in the specific location I need, for example where the mouse cursor was, because all the examples I’ve seen so far only include at the end of the text.

An example of how it should work:

"The [nameClient] is registered in the system since [dataCadastro]"

The words in bold would be the "variables". You need to take the last mouse position because the user can choose where to insert the fields, which simplifies for him.

Additional information: the textarea contains rich text (Ckeditor).

According to the image below, the user selects the "group" (e.g.: personal data, company data, vehicle data, etc.) and then the "fields" combo and populated according to the group (e.g.: personal data => fields: name, age, address, date of birth, etc.). When selecting an item in the "fields" combo, this item will be added in the textarea, exactly at the last mouse location, which can be either at the end of the field or in the middle of the text.

inserir a descrição da imagem aqui

  • 2

    Which version of the ckeditor? If it is the 4, I think that is enough: CKEDITOR.instances.editor1.insertText( 'texto' );

  • @Bacco version 4.5

  • 1

    @Bacco, I fixed my test here and actually your suggestion worked - the mistake was mine. That’s exactly what I need, just adapt now to my need (take the value of the field, etc). The important thing that way of doing I have already discovered. Thank you!

2 answers

7


The method for inserting arbitrary text at the cursor position is this:

CKEDITOR.instances.editor1.insertText( 'texto' );

Beyond the insertText, note that there are the methods insertElement and insertHtml, choose the most suitable one for the context.

More details in the manual:

http://docs.ckeditor.com/#! /api/CKEDITOR.editor-method-insertText

0

I don’t see your code, but you can try:

var texto_var = document.getElementById("id_textarea").value = 
    "O" + nomeDoCliente "está cadastrado no sistema desde "+ dataCadastro;
  • the point is that there are several "variables" and they will be available through options for the client to select which one they want at a given time. The way you exposed it got static and not functional for my case.

  • For your case now or for the case outlined in your question ? Remembering that only you know the real problem to solve, the more specific you are, the more specific the answer will be...

  • For the case in question.

  • Which code in question, has how to edit your question and put the relevant snippet ?

  • No code. So far you have only one textarea with Ckeditor.

  • Maybe a diagram ? Although now has one textarea and a static operating model.

  • I added an image and explanatory text

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.