Asked Jul 31st, 2018 9:49 AM 429 3 1
  • 429 3 1
+8

Custom Upload ảnh trong simplemde-markdown-editor

Share
  • 429 3 1

Mọi người ơi cho em hỏi custom phần upload ảnh trong simplemde-markdown-editor thì như nào nhỉ. em có làm được như viblo là show modal rồi chọn ảnh rồi . code em custom như thế này

var simplemde = new SimpleMDE({
	element: document.getElementById("textarea"),
	spellChecker: false,
	promptURLs: true,
	toolbar: [
		{ name: "bold", action: SimpleMDE.toggleBold, className: "fa fa-bold", title: "Bold", },
		{ name: "heading-1", action: SimpleMDE.toggleHeading1, className: "fa fa-header fa-header-x fa-header-1", title: "Bold",},
		{ name: "heading-2", action: SimpleMDE.toggleHeading2, className: "fa fa-header fa-header-x fa-header-2", title: "Bold",},
		{ name: "heading-3", action: SimpleMDE.toggleHeading3, className: "fa fa-header fa-header-x fa-header-3", title: "Bold",},
		"|",
		{ name: "link", action: SimpleMDE.drawLink, className: "fa fa-link no-mobile", title: "Create Link",},
		"|",
		{ name: "preview", action: SimpleMDE.togglePreview, className: "fa fa-eye no-disable", title: "Toggle Preview",},
		{ name: "side-by-side", action: SimpleMDE.toggleSideBySide, className: "fa fa-columns no-disable no-mobile",title: "Toggle Side by Side",},
		{ name: "fullscreen", action: SimpleMDE.toggleFullScreen, className: "fa fa-arrows-alt no-disable no-mobile", title: "Toggle Fullscreen",},
		{
			name: "image",
		    action: function() {
				$('#UpImage').modal("show");
		    },
			className: "fa fa-image",
			title: "Upload Image",
		}
	]
});

nhưng giờ em muốn làm là ko show modal nữa mà nhấn vào ảnh sẽ hiện luôn chọn ảnh như thẻ <input type="file"> luôn (bow) mong mọi người giúp đỡ. em cảm ơn ạ.

Vũ Nguyễn @vunguyen10111995
Jul 31st, 2018 10:23 AM

định làm blog cá nhân đúng k =))

+1
| Reply
Share
Jul 31st, 2018 10:25 AM

@vunguyen10111995 Blog gì. chú nghĩ anh rảnh thế à =)) yêu cầu của dự án thôi. mà khách hàng ko muốn show modal như của viblo. chọn phát là phải có ảnh rồi hiện kiểu markdown luôn

0
| Reply
Share
Truong Dang @xdangminhtruongx
Jul 31st, 2018 2:32 PM

@mih2t9x (tat) Nhà có đông anh em có khác, đi hỏi thôi mà cũng được 5 cái upvote lận 😂 😂 😂

+1
| Reply
Share
Jul 31st, 2018 4:07 PM

@xdangminhtruongx quan hệ rộng ông ơi 😃) =))

0
| Reply
Share

1 ANSWERS


Answered Jul 31st, 2018 10:39 AM
Accepted
+6

Bạn có thể đặt một thẻ <input type="file" style="display:none"/> vào trong form. Sau đó, ở trong callback action:

const inputFile = document.querySelector('#hidden-input-file');
...
{
  name: "image",
  action: () => inputFile.click()
}
Share
Jul 31st, 2018 10:52 AM

em cảm ơn anh (bow) em làm được rồi ạ

+1
| Reply
Share
Nguyễn Văn Quy B @ruacondepzaj
Aug 2nd, 2018 6:17 AM

Kim Siêu Quần @vunguyen10111995 =))

+1
| Reply
Share
Aug 17th, 2018 1:17 AM

@huukimit a ơi cho em hỏi với ạ .task này delay hôm nay em mới làm tiếp. em có gặp 1 vấn đề là khi edit thì muốn convert từ html->markdown để cho ra màn hình edit , em có sửa dụng thư viện turndown để convert lại nhưng hình như nó convert hơi sai vì thẻ h1 với h2 nó lại ra kiểu khác Screenshot (2).png

có cách nào convert mà đúng định dạng # với ## ko anh, chắc là có nhưng em vẫn chưa tìm ra, mong anh cho ý kiến với ạ (bow)

0
| Reply
Share
Aug 17th, 2018 4:18 AM

@mih2t9x Khi lưu thì bạn lưu markdown gốc mà người dùng đã nhập, vào database. Khi edit thì lấy markdown trong database ra cho người dùng sửa. Còn việc render markdown để hiển thị thì đó là chuyện khác (yaoming)

0
| Reply
Share
Aug 17th, 2018 6:17 AM

@huukimit nếu vậy thì khi bên app lấy api về thì mình lại phải render lại xong mới trả lại cho app. tại mình ko muốn động vào api nên lưu thằng vào database là dạng html luôn. đến lúc bên app chỉ cần nhận dữ liệu xong show ra thôi

0
| Reply
Share
Aug 17th, 2018 6:27 AM

@mih2t9x Đối với app thì có thể để app tự render markdown mà bạn. Việc render markdown ra html thì ko khó nhưng việc render từ html về markdown thì ẩn chứa nhiều rủi ro sau này. Giả sử markdown của bạn có những cú pháp riêng thì bạn khó lòng mà parse ngược từ html về markdown hoặc mất rất nhiều thời gian.

0
| Reply
Share
Aug 17th, 2018 6:28 AM

Tốt hơn hết, mình nghĩ bạn nên lưu giữ liệu gốc mà người dùng nhập, người ta nhập như nào thì phải lưu đúng như thế cho họ chứ. Người ta nhập markdown mà =))

0
| Reply
Share
Aug 17th, 2018 6:29 AM

@huukimit thế như viblo bây giờ của mình là app đang tự render markdown à bạn

0
| Reply
Share
Aug 17th, 2018 6:29 AM

@huukimit Trong trường hợp, nếu mobile ko tự render thì server viết thêm api trả về nội dung đã được render thành html về cho mobile app. Cái này chắc cũng ko mất nhiều thời gian đâu bạn.

0
| Reply
Share