Yêu cầu thg 7 2, 2021 7:14 SA 88 0 1
  • 88 0 1
0

Hỏi về image trong froala editor

Chia sẻ
  • 88 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 CÂU TRẢ LỜI


Đã trả lời thg 7 3, 2021 3:05 CH
Đã được chấp nhận
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/

Chia sẻ
Avatar quang hải @sven_9x
thg 7 5, 2021 1:44 SA

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

Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 7 6, 2021 4:37 CH

@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 😅

Avatar quang hải @sven_9x
thg 7 6, 2021 4:50 CH

@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

Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 7 6, 2021 4:52 CH

@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

Avatar quang hải @sven_9x
thg 7 7, 2021 2:54 SA

@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

Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 7 7, 2021 4:45 CH

@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/

Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 7 7, 2021 4:47 CH

@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. 😅

Avatar quang hải @sven_9x
thg 7 8, 2021 2:19 SA

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

Avatar quang hải @sven_9x
thg 7 9, 2021 8:46 SA

@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?

Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 7 17, 2021 8:17 CH

@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.

Avatar quang hải @sven_9x
thg 7 18, 2021 8:43 SA

@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ỉ?

Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 7 19, 2021 2:26 SA

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

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

Avatar quang hải @sven_9x
thg 7 19, 2021 9:48 SA

@le.vinh.thien oke tks b nhé

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí