Javascript Girl
  1. Javascript Girl
  3. Éditeur de texte enrichi Javascript avec get AND set support de position de curseur
Intereting Posts
Créer une propriété javascript comme propriété C # Qu'est-ce que jQuery (edge) dans jsfiddle.net? Appel de VBScript à partir de JavaScript ou vice versa? Garder une page Web centrée lorsque la barre de défilement du navigateur apparaît et disparaît L'appel ajax simple semble bloquer Comment supprimer l'image téléchargée dans n'importe quelle case? Erreur dans IE lors de l'appel manuelle du gestionnaire d'événements, compte tenu de certaines conditions Portée de "this" en JavaScript Onsubmit = "return false" n'a aucun effet sur Internet Explorer 7/8 (le formulaire est toujours soumis) Faire de la largeur div égale à la longueur de phrase / phrase la plus longue à l'intérieur Knockout JS ObservableArray avec des relations de plusieurs à plusieurs Jquery / javascript check string pour plusieurs sous-chaînes La valeur de la propriété différente s'affiche lorsque l'objet javascript est étendu dans la console Chrome HTML 5 <audio> – Lecture du fichier à un certain moment JavaScript regex pour chaîne alphanumérique avec une longueur de 3-5 caractères

Éditeur de texte enrichi Javascript avec get AND set support de position de curseur

Existe-t-il des éditeurs de texte enrichi javascript qui prennent en charge l'obtention et la définition de la position du curseur?

Je ne vais pas expliquer les détails horribles, mais cela fonctionnera: 

function getTextNodesIn(node) { var textNodes = []; if (node.nodeType == 3) { textNodes.push(node); } else { var children = node.childNodes; for (var i = 0, len = children.length; i < len; ++i) { textNodes.push.apply(textNodes, getTextNodesIn(children[i])); } } return textNodes; } function setSelectionRange(el, start, end) { if (document.createRange && window.getSelection) { var range = document.createRange(); range.selectNodeContents(el); var textNodes = getTextNodesIn(el); var foundStart = false; var charCount = 0, endCharCount; for (var i = 0, textNode; textNode = textNodes[i++]; ) { endCharCount = charCount + textNode.length; if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) { range.setStart(textNode, start - charCount); foundStart = true; } if (foundStart && end <= endCharCount) { range.setEnd(textNode, end - charCount); break; } charCount = endCharCount; } var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.selection && document.body.createTextRange) { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(true); textRange.moveEnd('character', end); textRange.moveStart('character', start); textRange.select(); } }

Maintenant, vous obtenez simplement votre élément et sélectionnez des éléments: 

 setSelectionRange(document.getElementById('dijitEditorBody'), 10, 50);

Oui, redactor.js le fait:

$('#redactor').redactor('setCaret', element, 4);

Je cherchais une solution pour un dijit.Editor et je me suis penché sur cette ancienne question. Voici la façon dont j'ai fait cela (c'est un ripoff le plugin dijit / _editor / EnterKeyHandling).

J'ai créé mon propre plugin, comme ceci: 

 define([ "dojo/_base/declare", "dijit/_editor/_Plugin", "dijit/_editor/range", "dijit/_editor/selection" ], function(declare, _Plugin, rangeapi, selectionapi) { var MyPlugin = declare(_Plugin, { setToolbar: function(editorToolbar){ // [...] this.own(this.editor.on('keypressed', lang.hitch(this, 'onKeyPressed'))); }, onKeyPressed: function(){ // summary: // Handler for after the user has pressed a key, and the display has been updated. var block = undefined, blockNode = undefined, selection = rangeapi.getSelection(this.editor.window), range = selection.getRangeAt(0); if(!range.collapsed){ range.deleteContents(); selection = rangeapi.getSelection(this.editor.window); range = selection.getRangeAt(0); } block = rangeapi.getBlockAncestor(range.endContainer, null, this.editor.editNode); if (block.blockNode) { blockNode = block.blockNode; // this is the node under the cursor... console.debug(blockNode); } }); _Plugin.registry["myplugin"] = _Plugin.registry["myplugin"] = function(args){ return new MyPlugin(); }; return MyPlugin; });

Ensuite, ajoutez "myplugin" à la propriété "extraPlugins" de votre dijit / Editor.