Автоматически конвертировать две черты в - в TinyMCE - PullRequest
Новая
       19

Автоматически конвертировать две черты в - в TinyMCE

2 голосов
/ 07 ноября 2011

Я ищу плагин TinyMCE или другое специальное решение, которое преобразуется в & mdash; автоматически. В идеале решение не требует обработки всего содержимого TinyMCE для каждого события keyPress / keyUp, а вместо этого проверяет только, когда пользователь вырезал, вставил или набрал - Прямо сейчас я использую что-то вроде следующего, и это немного медленно, когда содержание TinyMCE большое: 

tinyMCE.init({
    //...            
    setup: function (ed) {
        ed.onKeyUp.add(function(ed) {
            //find and replace two dashes with emdash
            //if there was a change, update tinymce/textarea contents
        });
    }
});

В общем, мне любопытно быстрое решение для обработки текста для TinyMCE. Я понимаю, что, возможно, нет ничего лучше, чем метод, который я использую сейчас, но мне было просто интересно, если кто-нибудь из вас, ребята, нашел лучшее решение. Спасибо!

Ответы [ 2 ]

1 голос
/ 19 ноября 2014

Создайте пользовательскую функцию обработки в настройках

Вы на правильном пути, и для этого вам не понадобится плагин.

На самом базовом уровне просто выполните .replace() в обратном вызове вашего события: 

tinyMCE.init({
    //...            
    setup: function (editor) {
        editor.onKeyUp.add(function (editor) {
            var content = editor.getContent({ format: 'html'});  // Get content in HTML entity encoded format

            // RegEx replacements
            content = content.replace(/--/g, '—'); // Convert two dashes into —

            // Set content of iframe editor with modified string
            editor.setContent(content, { format: 'html' });
        });
    }
});

Но вы также захотите прослушать событие onChange и, поскольку вы заменяете два символа одним, приведенный выше метод приведет к появлению курсорасмещение позиции не синхронизировано.

Вот лучший способ: 

tinyMCE.init({
    //...            
    setup: function (editor) {
        var customProcess = function (editor) {
            var lastSelection = editor.selection.getBookmark(2, true), // Store last selection for later restoration
                content       = editor.getContent({ format: 'html'});  // Get content in HTML entity encoded format

            // RegEx replacements
            content = content.replace(/--/g, '—'); // Convert two dashes into —

            // Set content of iframe editor with modified string
            editor.setContent(content, { format: 'html' });

            // Restore selection
            editor.selection.moveToBookmark(lastSelection);
        };

        // Listen for change event
        editor.onChange.add(customProcess);

        // Listen for key up event
        editor.onKeyUp.add(customProcess);
    }
});

См. этот JSFiddle для рабочего примера .

РЕДАКТИРОВАТЬ:

Теперь я вижу, что вы ищете альтернативу onKeyUp событие.Событие onChange, вероятно, ваша лучшая альтернатива.Я не знаю других решений для быстрой обработки.

1 голос
/ 07 ноября 2011

Относительно вырезания и вставки (и перетаскивания) вы можете проверить наличие соответствующих ярлыков или использовать событие onPaste. Для добавления содержимого в редактор вы можете привязать обработчик onDrop к телу iframe экземпляров tinymce редактора (т. Е. Используя jQuery).

Если вы хотите проверить каждый набранный символ, который вводит пользователь, у вас уже есть решение, которое вы хотите - за исключением скорости. Но я не вижу более быстрого решения для этого случая - вам придется проверять каждый новый символ, за исключением того, что вы можете проверить введенный символ (delete, backspace и & mdash.)

...