我如何使用（div [contenteditable]）將他保存和與server傳輸

html5 javascript jquery django python

hank20818 2020-06-29 10:36:43 ‧ 2539 瀏覽

分享至

我做了一個留言板，我想讓他能添加圖片，所以我用的是有contenteditable屬性的div標籤而不是input的textarea，可是我遇到一些問題，我不知道該如何讓contenteditable裡的文字和圖片傳送到後端儲存再傳送到前端印在我要讓他出現的地方，並且保持他在留言版裡輸入的順序打印出來(例如:文字圖片文字圖片，由上至下這樣的順序)

我把它寫在codepen裡，裡面的js代碼是可以讓我在（div [contenteditable]）裡即時預覽圖片
https://codepen.io/hankhsiao823/pen/YzwxmZv

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

firecold

iT邦新手 1 級 ‧ 2020-06-29 10:51:28

你用div 的話你在post出去的時候
要先取得div裡面的內容
用.html()或者.text()試試看
用ajax就直接傳資料
一般導頁面
就多準備一個hidden的textarea
不用input傳是因為你用base64上傳圖片會有長度限制

不過你要上傳留言板建議使用人家寫好的編輯器就是了
記得自己注意版權及使用說明

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

hank20818 iT邦新手 5 級 ‧ 2020-06-29 11:29:04 檢舉

不好意思，如果是用.html()把內容都抓出來的話，後端是可以儲存的嗎?是以文字的格式將其儲存嗎?但這樣img裡的scr會很長

hank20818 iT邦新手 5 級 ‧ 2020-06-29 11:32:29 檢舉

為甚麼要建立一個hidden的textarea?textarea只支持文本好像不能放圖片，不好意思，我問題那麼多

froce iT邦大師 1 級 ‧ 2020-06-29 11:35:26 檢舉

建議用人家寫好的編輯器如quill或markdown-it來做。
div [contenteditable]是沒辦法的辦法。

firecold iT邦新手 1 級 ‧ 2020-06-29 12:08:46 檢舉

你要存base64的話一定會長阿
依照你規劃資料用div顯示存放用隱藏textarea阿
不然就用ajax抓div裡面內容

但我看你情況....用編輯器吧
TinyMCE, ckeditork之類的
但我不知道你留言板用途
所以自己要注意版權說明

hank20818 iT邦新手 5 級 ‧ 2020-07-04 17:07:57 檢舉

謝謝你們的建議 :)

登入發表回應

咖咖拉

iT邦好手 1 級 ‧ 2020-06-29 14:25:03

你用JQ的話取

selDiv[0].innerHTML
//console.log(selDiv[0].innerHTML);

拿到值在整理DATA放到資料庫就好了

回應 3
分享
檢舉

hank20818 iT邦新手 5 級 ‧ 2020-07-04 17:15:03 檢舉

請問有甚麼方法可以整理date的值，.html()取出來就是整串的包含標籤的程式碼，這樣的可以存到後端嗎?跟後端請求是他會把html貼給我嗎?電腦不會把標籤都當成字串嗎直接把標籤都印到網頁上。

不好意思，我有些觀念不太懂，麻煩你解釋了

咖咖拉 iT邦好手 1 級 ‧ 2020-07-05 11:16:41 檢舉

1.整理DATE通常是看資料庫怎麼開再做整理，一般用JS、JQ或正則來整理
2.不管值是甚麼你傳到資料庫的都是字串，除了內容長度限制，基本上都能存
3.取值後你想怎麼做都看你自己，要直接顯示還是做甚麼都可以啊

hank20818 iT邦新手 5 級 ‧ 2020-07-05 12:46:26 檢舉

我知道了謝謝你 :)

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙