Получить значение поля ввода из диалогового окна в TinyMCE

все.Получить значение поля ввода из диалогового окна в TinyMCE

Мне сложно понять это, это второй раз, когда мне нужно что-то сделать с помощью tinyMCE, но на этот раз я просто не могу найти ответ.

Вот что я хочу сделать: я добавил в свой редактор кнопку, которая открывает новое всплывающее окно с одним текстовым полем ввода и кнопкой. Я хочу нажать кнопку и захватить значение, которое я установил в своем поле ввода, а затем использовать это значение, чтобы изменить то, что у меня есть в моем редакторе.

Вот что я до сих пор - только соответствующий код:

init : function(ed, url) { 
     ed.addCommand('mceTooltip', function() { 
      ed.windowManager.open({ 
       file: 'imageurl.html', 
       width: 480, 
       height: 180, 
       inline: 1, 
       title: 'Please enter an image URL' 
      }, {}); 
     }); 
    }

Это то, что imageurl.html имеет:

<input type="text" id="image-url" /> 
<input type="button" id="submit-image-url" value="Ok" />

Итак, что мне нужно сделать, это получить то, что «image- url ", когда я нажимаю кнопку OK и использую этот текст внутри моего редактора. Я знаю, что могу использовать ed.selection.setContent (fieldValue), и он заменит мой выделенный текст значением url-изображения, я просто не знаю, как получить значение url-изображения.

Самая подробная информация, которую я нашел, была http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser, но я не могу заставить ее работать для моих нужд. Кто-нибудь, кто может мне помочь? Я уверен, что это должно быть просто для кого-то, у кого больше опыта в этом.

Спасибо всем за внимание.

Обновлено imageurl.html **

 <script> 
      document.getElementById('submit-image-url').onclick = function(){ 
       var imageUrl = document.getElementById('image-url').value; 

       window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, imageUrl); 
       window.parent.tinyMCEPopup.close(); // this line gets me this error: "Uncaught TypeError: Cannot read property 'windowManager' of undefined " 
      }; 
     </script>

источник

2013-04-22 andrux

что изображение-гиперссылка? От куда это? – Thariama

image-url - это текстовое поле, в которое я вставляю URL-адрес изображения, а затем, когда я нажимаю «ОК», я хочу использовать этот url в своем редакторе. – andrux

Хорошо, это не должно быть так сложно.

введите это в теге скрипта в нижней части вашего imageurl.html или используйте функцию javascript, готовую к документу. Следующее добавит обработчик onclick к вашей кнопке, который получит image_url и напишет это на выбор tinymces.

$('#submit-image-url').bind('click', function(){ 
    var image_url = $('#image-url').val(); 

    // in case you are using a real popup window 
    window.opener.tinymce.activeEditor.selection.setContent(image_url); 

    // in case you use a modal dialog 
    tinymce.activeEditor.selection.setContent(image_url); 
});

источник

2013-04-25 07:25:07 Thariama

Возможно ли это сделать, не помещая скрипт внутри imageurl.html? Я не хочу делать это более сложным, чем нужно, но изменение образа. Я пытаюсь избегать – andrux

. Хорошо, я работал, хотя я не хотел изменять файл imageurl.html, но если это как это должно быть сделано, так и быть ... теперь, мне просто нужно закрыть всплывающее диалоговое окно, и тогда у вас могут быть 50 точек реплики, так как я могу это сделать? – andrux

Закрытие всплывающего диалогового окна очень просто. Но это должно быть сделано из всплывающего окна. Я предполагаю, что вы используете всплывающее окно tinymce. Используйте это во всплывающем окне, чтобы закрыть всплывающее окно: tinyMCEPopup.close(); – Thariama

Вы открыли окно, так что вы в настоящее время в IFrame, имеющий imageurl.html ок ..

то, что вам нужно сделать, это

на родительской странице создать переменную глобального типа как

var image_url = "";

теперь ImageUrl странице создать скрипт на части тела, как этот

<body> 
<script> 
$("#button").click(function(){ 
window.parent.image_url = $('image-url').val(); 
}); 
</script> 
</body>

убедитесь, что у вас есть jquery на imgurl. или иным образом использовать addeventlistener или attachevent метод

логика - это элемент родительского окна из iframe и сохранить его из iframe.

источник

2013-04-30 08:27:02

Хорошо, я нашел проблему. Я должен был включить tiny_mce_popup.js внутри imageurl.html, вот почему tinyMCEPopup.close() не работает:

<script type="text/javascript" src="js/tinymce/tiny_mce_popup.js"></script> 
    <script> 
     document.getElementById('submit-image-url').onclick = function(){ 
      var imageUrl = document.getElementById('image-url').value; 

      tinyMCEPopup.execCommand('mceInsertContent', 0, imageUrl); 
      tinyMCEPopup.close(); 
     }; 
    </script>

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

Первоначально я не хотел, чтобы изменить imageurl.html, но похоже, что это именно так, как это должно быть сделано ...

Во всяком случае, я уже знал, как я мог бы решить некоторые из этих задач, от внутри файла imageurl.html, и я уже видел, что у tinyMCEPopup был метод close(), но чтобы он был честным, я согласен с ответом от человека, который, как я чувствовал, более активно пытался помочь мне.

Спасибо всем.

источник

2013-05-01 15:48:50 andrux

+1 thx за то, что поделился своим knowlegde с другими пользователями (это может сэкономить некоторое время) – Thariama

Добро пожаловать ... Я никогда не награждал щедростью раньше, не уверен, правильно ли я сделал это, или если что-то еще я необходимо сделать – andrux

нет, вы сделали это, как это должно быть сделано – Thariama

Окончательный код понравится this.working ...

imageurl.html 

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="tiny_mce_popup.js"></script> 
</head> 
<body> 
    <input type="text" id="image-url" /> 
<input type="button" id="submit-image-url" value="Ok" /> 
    <script> 
     document.getElementById('submit-image-url').onclick = function(){ 
      var imageUrl = document.getElementById('image-url').value; 

      tinyMCEPopup.execCommand('mceInsertContent', 0, imageUrl); 
      tinyMCEPopup.close(); 
     }; 
    </script> 
</body> 
</html>

источник

2014-11-17 17:18:16 user2799360

Получить значение поля ввода из диалогового окна в TinyMCE

ответ

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