html div 光标位置,ContentEditable div-在更新内部html之后设置光标位置

// some mock logic to identify spelling error

const errorWords = ["helloo", "dudeee"];

// Find words from string like ' Helloo world .. '

// Perhaps you could find a better library you that does this logic.

const getWords = (data) =>{

console.log("Input: ", data);

const allWords = data.split(/\b/);

console.log("Output: ", allWords)

return allWords;

}

// Simple mock logic to identify errors. Now works only for

// two words [ 'helloo', 'dudeee']

const containsSpellingError = word => {

const found = errorWords.indexOf(word) !== -1;

console.log("spell check:", word, found);

return found;

}

const processSpellCheck = text => {

const allWords = getWords(text);

console.log("Words in the string: ", allWords);

const newContent = allWords.map((word, index) => {

var text = word;

if(containsSpellingError(word.toLowerCase())) {

console.log("Error word found", word);

text = $("")

.addClass("spell-error")

.text(word);

}

return text;

});

return newContent;

}

function initalizeSpellcheck(editorRef) {

var editorSize = editorRef.getBoundingClientRect();

var spellcheckContainer = $("

.addClass("spell-check")

.prop("spellcheck", "false");

var spellcheckSpan = $("")

.addClass("spell-check-text-content")

.css({

width: editorSize.width,

height: editorSize.height,

position: "absolute",

zIndex: -1

});

var text = $(editorRef).text();

var newContent = processSpellCheck(text);

spellcheckSpan.append(newContent);

spellcheckContainer.append(spellcheckSpan);

spellcheckContainer.insertBefore(editorRef);

$(editorRef).on("input.spellcheck", function(event) {

var newText = $(event.target).text();

var newContent = processSpellCheck(newText);

$(".spell-check .spell-check-text-content").text("");

$(".spell-check .spell-check-text-content").append(newContent);

});

}

$(document).ready(function() {

var editor = document.querySelector("#editor");

initalizeSpellcheck(editor);

});

#editor {

border: 1px solid black;

height: 200px;

}

.spell-check {

color: transparent;

}

.spell-error {

border-bottom: 3px solid orange;

}

dudeee