iT邦幫忙

0

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

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

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

2 個回答

0
firecold
iT邦新手 3 級 ‧ 2020-06-29 10:51:28

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

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

看更多先前的回應...收起先前的回應...
hank20818 iT邦新手 5 級 ‧ 2020-06-29 11:29:04 檢舉

不好意思,如果是用.html()把內容都抓出來的話,後端是可以儲存的嗎?是以文字的格式將其儲存嗎?但這樣img裡的scr會很長http://cclab.ocu.edu.tw/y58/666.png

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邦新手 3 級 ‧ 2020-06-29 12:08:46 檢舉

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

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

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

謝謝你們的建議 :)

1
咖咖拉
iT邦新手 1 級 ‧ 2020-06-29 14:25:03

你用JQ的話 取

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

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

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 檢舉

我知道了謝謝你 :)

我要發表回答

立即登入回答