Jquery / Javascript обнаруживает событие click внутри tinymce - PullRequest
Новая
       23

Jquery / Javascript обнаруживает событие click внутри tinymce

5 голосов
/ 25 мая 2011

Как просто, я хочу определить, когда изображение щелкнуло в текстовом редакторе tinymce.

Разве это не достижимо без создания плагина для него?я не могу использовать этот метод, потому что я разрабатываю плагин для модуля wysiwyg от drupal, и я хочу быть совместимым со всеми редакторами, которые поддерживает wysiwyg.

onclick в атрибутах изображения не будет работать, слушатели .click не будут работать.Модуль API wysiwyg не имеет никакой документации.

Кто-нибудь знает какое-либо решение для этого?я просто хочу определить, когда на изображение нажали, вот и все ...

Ответы [ 4 ]

6 голосов
/ 26 мая 2011

Документация - хорошее место для начала.

Вы можете передать функцию установки, чтобы связать события TinyMCE при инициализации. Посмотрите демо здесь: http://jsfiddle.net/xgPzS/5/

HTML: 

<textarea style="width:400px; height:400px;">
    some text
    <img src="http://www.hidekik.com/en/filelist/files/sample.jpg" />
</textarea>

Javascript: 

$('textarea').tinymce({
    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            alert('Editor was clicked: ' + e.target.nodeName);
        });
    }
});
3 голосов
/ 23 октября 2013

В версии Tinymce 4.x jQuery мне удалось получить фокус и размытие только при помощи следующего метода в настройке

JavaScript: 

setup : function(ed) {
    ed.on('init', function() {
        $(ed.getDoc()).contents().find('body').focus(function(){
            alert('focus');
        });

        $(ed.getDoc()).contents().find('body').blur(function(){
            alert('blur');
        });  
    });
}
2 голосов
/ 26 мая 2011

Как уже упоминал DarthJDG, параметр установки init - это путь сюда 

tinyMCE.init({

    ...

    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            if (e.target.nodeName.toLowerCase() == 'img') {
                alert('Img-Tag has been clicked!');
            }
        });
    },

    ....

});
0 голосов
/ 10 мая 2012

Я думаю, что правильный подход здесь не имеет ничего общего с tinyMCE.Как вы писали, вы хотите поддерживать несколько типов редакторов WYSIWYG.

Я предлагаю просто использовать события делегирования jQuery.Вы связываете обработчик событий с вашим собственным элементом dom, где-то «вверх по течению» в документе.Он будет захватывать все события щелчка на изображениях, вложенных под ним, и затем действовать соответственно.

См. Здесь: http://api.jquery.com/on/

Я несколько раз успешно использовал этот метод для привязкисобытия на элементах, которые еще не существовали (они вставляются в dom динамически пользователем).

...