#javascript #jquery #drupal #tinymce #wysiwyg
#javascript #jquery #drupal #tinymce #wysiwyg
Вопрос:
Проще говоря, я хочу определить, когда изображение было нажато внутри текстовой области редактора tinymce.
действительно ли это невозможно без создания плагина для него? я не могу использовать этот метод, потому что я разрабатываю плагин для модуля wysiwyg drupal, и я хочу быть совместимым со всеми редакторами, которые поддерживает wysiwyg.
onclick в атрибутах изображения не будет работать, прослушиватели .click не будут работать. api модуля wysiwyg не имеет никакой документации вообще.
кто-нибудь знает какое-либо решение для этого? я просто хочу определить, когда было нажато изображение, вот и все…
Ответ №1:
Документация — хорошее место для начала.
Вы можете передать функцию настройки для привязки событий 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);
});
}
});
Комментарии:
1. я получаю $ («textarea»).tinymce не является функцией. tinymce во всей своей красе прекрасен, но, как я уже сказал, я бы предпочел не использовать для этого функции, зависящие от редактора. однако, похоже, мне придется переписать плагин для tinymce вместо этого, поскольку это, похоже, невозможно
2. Очевидно, вы не используете плагин jQuery TinyMCE. Почему вы тогда отметили jQuery? В любом случае, вы можете передать вышеупомянутое свойство setup везде, где вы вызываете
tinymce.init(). Я думаю, вам следует использовать функции, зависящие от редактора, а не какой-то уродливый хак, на который вы можете только надеяться, что он продолжит работать в будущих версиях разных редакторов. Просто напишите общий код того, что вы хотите сделать, и соответствующим образом подключите его к каждому редактору, который вы хотите поддерживать.3. $ (‘textarea’) здесь не сработает, поскольку редактор состоит из редактируемого iframe, созданного tinymce, прежняя текстовая область становится скрытой и не реагирует при нажатии!!!
4. @Thariama: да, это был просто пример селектора для создания редактора. Его нужно поместить везде, где инициализирован редактор. Поскольку он пометил jQuery, я предположил, что он использует плагин jQuery TinyMCE, который принимает точно такие же параметры и свойства, и по сути точно такие же, как
tinyMCE.init().5. Я пометил jQuery, потому что Drupal использует его, и я предположил, что плагин jQuery будет загружен модулем wysiwyg. tinymce — это объект and, и я могу получить к нему доступ с консоли, однако не в коде, поскольку он говорит, что это не функция. Это может быть связано с тем, что .init() уже был вызван. я пытаюсь выяснить, как использовать функцию Drupal.wysiwygInit() для вызова функции tinymce.init () достаточно рано, но пока безуспешно.
Ответ №2:
В версии jQuery Tinymce 4.x мне удалось получить события фокусировки и размытия только с помощью следующего метода в настройке
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');
});
});
}
Ответ №3:
Как упоминал DarthJDG, здесь можно использовать параметр setup init
tinyMCE.init({
...
setup: function(ed) {
ed.onClick.add(function(ed, e) {
if (e.target.nodeName.toLowerCase() == 'img') {
alert('Img-Tag has been clicked!');
}
});
},
....
});
Комментарии:
1. На самом деле это не отличается от моего решения. 😉
2. это так. эта часть принадлежит функции инициализации tinymce, и $ (‘textarea’) не будет работать в вашем случае
Ответ №4:
Я думаю, что правильный подход здесь не имеет ничего общего с TinyMCE. Как вы писали, вы хотите поддерживать несколько типов редакторов WYSIWYG.
Я предлагаю вам просто использовать события делегирования jQuery. Вы привязываете обработчик события к своему собственному элементу dom, где-то «вверх по потоку» в документе. Он захватит все события щелчка на изображениях, которые вложены под ним, и затем будет действовать соответствующим образом.
Смотрите здесь: http://api.jquery.com/on /
Я несколько раз успешно использовал этот метод для привязки событий щелчка к элементам, которые еще не существовали (они динамически вставляются пользователем в dom).