從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" />

所以，我需要做的是得到任何「圖像 - url「文本輸入每當我點擊確定按鈕，並在我的編輯器中使用該文本。我知道我可以使用ed.selection.setContent（fieldValue），它將用image-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

什麼是圖像的URL？它從何而來？ – Thariama 2013-04-23 07:44:48

image-url是一個文本字段，我將粘貼一個圖片url，然後當我點擊OK時，我想能夠在我的編輯器中使用該URL – andrux 2013-04-24 16:22:50

好吧，這不應該是困難的。

在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中的情況下執行此操作？我不想讓這個更復雜，但是修改imageurl.html是我試圖避免的。 – andrux 2013-04-26 18:37:54

好吧，雖然我不想修改imageurl.html文件，但我知道它工作正常，但如果這是它需要完成的方式，那麼就這樣吧...現在，我只需要關閉彈出對話框，然後你就可以擁有50個rep點，那麼，我該怎麼做呢？ – andrux 2013-04-26 21:02:04

關閉彈出式菜單很簡單。但它應該從彈出代碼完成。我假設你正在使用tinymce彈出窗口。在彈出窗口中使用它來關閉彈出窗口：tinyMCEPopup.close（）; – Thariama 2013-04-29 08:13:58

所以您目前在其IFrame中imageurl.html確定你已經打開了一個窗口..

你所要做的就是

父頁面上創建全局類型的一個變量像

var image_url = "";

現在IMAGEURL頁面上創建的主體部分是這樣

腳本

確保你在imgurl上有jquery。或以其他方式使用addeventlistener或attachevent 方法

邏輯是從iframe獲取父窗口的元素並將其從iframe中保存。

來源

2013-04-30 08:27:02

好的，我發現了這個問題。我必須在imageurl.html中包含tiny_mce_popup.js，這就是爲什麼tinyMCEPopup。關閉（）沒有工作：

<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與其他用戶分享你的知識（這可能會節省一些人的時間） – Thariama 2013-05-02 08:42:27

不客氣......我以前從未授予過賞金，不知道我是否做得對或者有其他事情需要做 – andrux 2013-05-02 20:54:22

不，你已經完成了，因爲它應該完成 – Thariama 2013-05-03 07:18:28

最終代碼會喜歡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

回答

相關問題