Замена текста на лету в contenteditable с помощью чистого jQuery

Я видел несколько вопросов об этом в StackOverflow, но, похоже, сложно найти решение на основе jQuery. Поэтому я хотел бы задать этот вопрос.Замена текста на лету в contenteditable с помощью чистого jQuery

Я хочу заменить текст на лету внутри div с атрибутом contenteditable="true".

Я ищу для JQuery на основе решения, которое будет сделать следующее:

Автоматически заменить письменный текст на лету (как тип)
Будучи в состоянии продолжать писать (в то время как замена делается)

Я посмотрел на редакторе SC (http://www.sceditor.com/), кажется, что это делает именно то, что (например, если вы пытаетесь типа :) он получает заменен на n смайлик.

Я думаю, что хороший старт будет массив со всеми элементами для замены:

$.settings = { 
    path: 'https://example.com/images/', 
    emoticons: { 
     ':(' : 'stupid.jpg', 
     ':)' : 'smart.jpg', 
    } 
}

Я не смог найти хорошие примеры этого. Был бы рад, если кто-то может поделиться своими мыслями и любым кодексом относительно этого.

Каким образом замена будет выполнена наилучшим образом, с вышеуказанным кодом?

источник

2015-12-19 Robin

Я не знаю, если это лучший способ, но вы можете добавить слушателя на вход и сделать его прочитанным символом когда вы набираете, если последний символ записи соответствует последнему из ваших эмоций, вы проверяете возможные предыдущие символы, которые соответствуют любым эмоциям. Если я напишу :(когда он будет использовать ловушку (это будет шрифт для: если поиск заменит ваши эмоции. – Rodrigo

У меня есть был доволен http://ckeditor.com/. Я думаю, что я не большой поклонник изобретать колесо. – Bindrid

@Bindrid: Это не очень хорошая возможность использовать весь редактор ck, если вам нужна только эта функция, следовательно, вопрос – Robin

$('div').keyup(function(){ 
    //make here for loop which replace all emoticons 
    $(this).text().replace(':(', 'stupid.jpg'); 
});

источник

2015-12-19 21:58:25 wiz6

, если вы используете текстовый элемент управления, вы не сможете вставлять изображения. Если вы используете div, тогда вы будете Мне нужно зафиксировать каждый ключевой штрих, чтобы проверить ключ и посмотреть, какой элемент управления html должен использоваться на своем месте, все время, отслеживая, где должен быть курсор. Это то, что делает редактор S C. – Bindrid

Я нашел это. Если вы его отрегулируете, это может удовлетворить ваши потребности. Он заменяет {с {} и (с(), и курсор заканчивается посередине.

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#d").keypress(function (e) { 


        var charTyped = String.fromCharCode(e.which); 
        if (charTyped == "{" || charTyped == "(") { 
         // Handle this case ourselves 
         e.preventDefault(); 

         var sel = window.getSelection(); 
         if (sel.rangeCount > 0) { 
          // First, delete the existing selection 
          var range = sel.getRangeAt(0); 
          range.deleteContents(); 

          // Insert a text node with the braces/parens 
          var text = (charTyped == ")") ? "{}" : "()"; 
          var textNode = document.createTextNode(text); 
          range.insertNode(textNode); 

          // Move the selection to the middle of the text node 
          range.setStart(textNode, 1); 
          range.setEnd(textNode, 1); 
          sel.removeAllRanges(); 
          sel.addRange(range); 
         } 
        } 


      }); 
     }); 
    </script> 
</head> 

<body> 
    <div id="d" contentEditable="true">....</div> 
</body> 
</html>

источник

2015-12-20 00:14:56 Bindrid

Замена текста на лету в contenteditable с помощью чистого jQuery

ответ

Смежные вопросы