textarea輸入的彈出式預覽

我想爲帖子創建一個預覽功能，允許用戶查看它們輸入到textarea的輸出內容，一旦提交後它將如何顯示。該論壇使用bbcode，不允許在帖子中的HTML和textarea框的ID是「消息」textarea輸入的彈出式預覽

任何人都可以幫助我創建一個彈出窗口，可以在彈出窗口中預覽此文章，而無需將其任何數據傳遞給數據庫和回來？

我真的應該已經提供了更多的信息，我意識到......基本上，我們有一個post形式的

<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>

的形式提交按鈕

<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">

當它的點擊，表單會從其插入數據庫的位置發送到另一個頁面。我希望在那裏有一個預覽按鈕，就像livejournal上的預覽按鈕一樣，在這裏會創建一個新的彈出窗口，並顯示該文章的外觀。我查看了livejournal上的源代碼，它提供了jQuery，所以我嘗試了這裏給出的代碼：http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx 但是，這沒有奏效，因爲沒有任何東西出現，我也不喜歡實時預覽想法。

我也嘗試了JavaScript代碼從這裏：http://www.codingforums.com/showthread.php?t=174810，但再次，它沒有拿出任何東西......

我希望這是好消息，我是否應該包括什麼事，請讓我知道:)

來源

2012-02-11 Elizabeth

爲什麼PHP的標籤？ – 2012-02-11 19:24:12

刪除了PHP標記。另外，你有什麼嘗試？ – 2012-02-11 19:29:05

哎呀，對不起...該網站的PHP和我一定做了它沒有想到：P感謝編輯它本！我試過使用重定向到另一個頁面，但它並沒有從textarea中提取數據......我也嘗試過一個jQuery實時動作更新，但是甚至沒有顯示出來。 – Elizabeth 2012-02-11 19:34:10

這個問題正逐漸接近「寫我的代碼爲我」，但如果你只是想用最好的辦法幫助，這裏有幾個：

最乾淨的是有一個按鈕，（通過javascript）更改表格的action和target，並觸發submit（）...這將通過發佈將所有數據發送到模板頁面，該頁面可以獲取$ _POST數據並將其放置到模板中以模仿活模板。或者，您可以讓JavaScript/Jquery獲取所有字段值，然後在javascript中構建HTML模板，然後將其傳遞到頁面上的div，該頁面的樣式可以看作（a）像彈出窗口和（ b）有模仿活動頁面的CSS。

有很多方法可以做到這一點，但這兩者都可以。如果你嘗試了一些東西並進入一個狹窄的地方，請告訴我們，我們會幫助你。

來源

2012-02-11 19:30:33

我會編輯更多的信息，以防它可以幫助，抱歉讓它看起來像是「爲我寫代碼」的問題，我有點急於詢問 – Elizabeth 2012-02-11 20:11:32

解決了它與第二個選項和一些其他代碼的幫助....現在我只需要弄清楚如何從BBcode XD中的javascript document.write格式本身的輸出感謝您的建議！ – Elizabeth 2012-02-11 22:08:36

爲什麼你不試試所見即所得的編輯器，如TinyCME或CKEditor？

來源

2012-02-11 19:28:48

你想綁定一個keyup事件到textarea。每次用戶釋放一個密鑰，它都會觸發該功能。然後你的函數抓取textarea的值，並解析它爲BBCode，我不熟悉。然後它將獲取該輸出並將其作爲任何元素的內容。

HTML：

<textarea id="myText"></textarea> 

<div id="preview"></div>

的JavaScript（jQuery的）：

$(document).ready(function() { 

    var $textarea = $('#myText'), 
     $preview = $('#preview'); 

    $textarea.on('keyup', function() { 

     var $this = $(this), 
      output = $this.val(); 

     // Do something with the value of the code to parse out the BBCode stuff. 

     $preview.html(output); 

    }); 

});

來源

2012-02-11 19:31:41 Seth

textarea輸入的彈出式預覽

回答

相關問題