Asked Jul 2nd, 7:14 AM 68 0 1
  • 68 0 1
0

Hỏi về image trong froala editor

Share
  • 68 0 1

Chào mọi người mình có dùng froala editor cho công cụ soạn thảo. nhưng đang ko custom được khi upload image xong thì nó hiện ra chú thích như trang spiderum như hình dưới. Cho mình hỏi bạn nào dùng froala rồi có thể chỉ mình đc ko ạ?

image.png

1 ANSWERS


Answered Jul 3rd, 3:05 PM
Accepted
0

Cơ bản thì trong docs của froala có đầy đủ rồi.

Phương pháp là custom lại event image.inserted, sau khi froala insert image vào editor thì ta thêm element mong muốn vào thôi.

Docs: https://froala.com/wysiwyg-editor/docs/events/#image.inserted

Code:

new FroalaEditor('#froala-editor',  {
	toolbarButtons: ['insertImage'],
  events: {
    'image.inserted': function ($img, response) {
      // Do something here.
      // this is the editor instance.
      console.log($img);
      $img.after('<p style="text-align: center">insert caption here</p>');
    }
  }
});

Demo: https://jsfiddle.net/spojv6ag/

Share
Avatar quang hải @sven_9x
Jul 5th, 1:44 AM

@le.vinh.thien mình muốn tạo ra 1 cái placeholder để người dùng nhập ý bạn

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Jul 6th, 4:37 PM

@sven_9x 😂 thì bạn chỉ cần chỉnh sửa html, css của nó cho đúng là đc, còn nguyên lý thì như mình làm bên trên. còn muốn giống như kia thì mình cũng có demo đây, thêm có vài dòng css, html là đc mà:

Demo: https://jsfiddle.net/v20rdpqc/2

bạn muốn custom ntn thì cứ sửa html, css như bt thôi 😅

0
| Reply
Share
Avatar quang hải @sven_9x
Jul 6th, 4:50 PM

@le.vinh.thien cho mình hỏi là bạn xem mấy cái func wrap, after ở đâu đó ạ? Mình ko thấy trong docs. Tks bạn

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Jul 6th, 4:52 PM

@sven_9x trong docs nó ghi

Screenshot 2021-07-07 015127.png

$img là jquery object nên mình dùng jquery bình thường thôi. hàm wrap, after là của jquery chứ không có gì đặc biệt

0
| Reply
Share
Avatar quang hải @sven_9x
Jul 7th, 2:54 AM

@le.vinh.thien bạn ơi mình muốn tắt cái option insert caption khi ở trong cái popup khi insert ảnh xong thì làm ntn nhỉ bạn? Tại không thì click vào insert caption nó hiện ra 2 cái caption. tks bạn

Capture.PNG

với bạn có gặp cái lỗi này hoặc có cách nào để check xem nguyên nhân tạo sao bị lỗi này ko? Mình dùng quick insert mà icon nó bị lệch ko ở giữa. Tks bạn

Capture1.PNG

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Jul 7th, 4:45 PM

@sven_9x bạn suy nghĩ đơn giản đi 1 tý là sẽ làm đc ngay, sẽ có 2 cách như sau

Cách 1:

nếu nghĩ đơn thật đơn giản thì chỉ cần làm thế nào ẩn nút đó đi là đc. vậy nên có thể dùng css để cho nút đó ko hiện lên nữa :v

button[data-cmd="imageCaption"] {
  display: none!important;
} 

Cách 2:

đọc docs, tìm phần liên quan đến image, nhiều quá thì thử tìm với từ khóa "caption" ở trong docs. và đương nhiên là ra ngay

Docs: https://froala.com/wysiwyg-editor/docs/options/#imageEditButtons

sử dụng option lúc khởi tạo để quyết định xem sẽ có những button nào liên quan đến image đc hiện.

new FroalaEditor('#froala-editor',  {
	toolbarButtons: ['insertImage'],
  imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove'],
  events: {
    'image.inserted': function ($img, response) {
      // Do something here.
      // this is the editor instance.
      console.log($img);
      $img.wrap(`<figure class="aligncenter"></figure>`);
      $img.after(`<figcaption contenteditable="true" placeholder="Chú thích ảnh (không bắt buộc)" class="image-description"></figcaption>`);
    }
  }
});

Demo cả 2 cách: https://jsfiddle.net/kzef5nsm/

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Jul 7th, 4:47 PM

@sven_9x còn lỗi kia thì chắc do css thôi chứ ko có gì, do css của b ở đâu đó làm ảnh hưởng đến cả css của cái editor, cách khắc phục thì bật inspect lên rồi xem nó đang chịu ảnh hưởng của những css nào, từ file nào rồi fix thôi. 😅

0
| Reply
Share
Avatar quang hải @sven_9x
Jul 8th, 2:19 AM

@le.vinh.thien tks bạn nhiều nhé.

0
| Reply
Share
Avatar quang hải @sven_9x
Jul 9th, 8:46 AM

@le.vinh.thien mình thử tắt nuxt/tailwind mình đang dùng đi thì đc. Lạ thật, tailwind sao lại ảnh hưởng đc nhỉ b?

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Jul 17th, 8:17 PM

@sven_9x tailwind nó có nhiêu class bổ trợ nên việc xung đột với thư viện khác or code của bạn là điều bình thường, muốn ko xung đột thì đặt tên hay css phải theo quy tắc, rồi cứ thế mà làm theo.

0
| Reply
Share
Avatar quang hải @sven_9x
Jul 18th, 8:43 AM

@le.vinh.thien nhưng tailwind với froala đều là 2 thư viện mà nhỉ bạn? Thì có can thiệp đc đâu mà đặt tên khác nhỉ?

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Jul 19th, 2:26 AM

@sven_9x tailwind có thể thêm prefix cho các class css

refs: https://tailwindcss.com/docs/configuration#prefix

0
| Reply
Share
Avatar quang hải @sven_9x
Jul 19th, 9:48 AM

@le.vinh.thien oke tks b nhé

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.