CKEditor 4: Comment obtenir et définir la position du curseur/curseur?

Question

Je cherche un moyen de faire 2 choses très basiques. Je veux juste récupérer la position du signe dans le texte. Ensuite, je veux placer le curseur dans une position spécifique dans le texte. Le but est de pouvoir modifier le texte par programmation.

J'ai trouvé beaucoup de gens qui essayaient de faire des choses semblables mais pas tout à fait ce que je voulais. En fait, la plupart des solutions examinent le code HTML, recherchant des plages et des éléments DOM. Peut-être que c'est la voie à suivre, mais je n'ai pas trouvé de solution de travail.

Vous cherchez à obtenir la position du curseur. J'ai trouvé la solution suivante à partir de diverses sources (this one par exemple):

var selection = e.editor.getSelection(); 
var range = selection.getRanges()[0]; 
var cursor_position = range.startOffset; 

Mais cela ne répond pas à mon problème. Dans le texte suivant:

d'Apple

Archers

Accent

Si le curseur est placé successivement directement après l'un de chaque mot, il renvoie 1 à chaque fois. Ce que je voudrais, c'est obtenir 1 quand positionné après le 1er A, puis 6 lorsqu'il est placé après le 2ème A, puis finalement 13 après le 3ème. En d'autres termes, il s'agit plus de savoir quelle position de caractère est le curseur à dans le texte. Cela devrait me permettre d'insérer du texte après le Xème caractère dans le texte par exemple.

Merci d'aider

Answer 1

En regardant votre dernier commentaire, vous pouvez essayer quelque chose comme la mise en œuvre des signets dans CKEditor mais plus durable. Comme je l'ai expliqué, les marque-pages originaux sont supprimés lorsque vous publiez des données sur le serveur ou que vous passez simplement en mode source et inversement. Qui plus est, les plages vides que je suggérerais d'utiliser sont supprimées par l'éditeur car elles n'ont aucune représentation visuelle et sont considérées comme des ordures.

Qu'est-ce que vous pouvez faire est d'utiliser protectedSource pour protéger votre marque personnalisée couvre:

var editor = CKEDITOR.replace('editor1', { 
    language: 'en', 
    protectedSource : /<span.*class="my-break-point".*\/>/g 
}); 

Ensuite vous devrez venir avec un code personnalisé qui insérera <span class="my-break-point"/> dans l'éditeur HTML chaque fois que vous en avez besoin et de garder trace de signets afin qu'il supprime le précédent lorsque le suivant est inséré.

Bien sûr, ce n'est qu'un exemple de base. Vous pouvez avoir un signet pour la sélection réduite ou deux signets pour le début/la fin de la sélection si la sélection n'est pas réduite.

S'il vous plaît essayez d'insérer des signets d'abord et voir ce qui est inséré dans HTML pour effondrés et des sélections non-effondrés: - https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.dom.range-method-createBookmark - https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.dom.range-method-createBookmark2

Exemple de code:

var range = editor.getSelection().getRanges()[0]; 
var bm = range.createBookmark(); 

Si quelque chose ne sait pas, s'il vous plaît faites le moi savoir.