Căn phải img html

Lý Đức Long @longlyduc

Theo dõi

830 24 41

Đã đăng vào ngày 29 tháng 5 năm 2017 2. 29 CH 4 phút đọc

1. 4K

0

0

• Report
• Add to series of me

Trong quá trình làm việc với các trang web, chắc chắn các bạn thường xuyên sử dụng bộ công cụ ckeditor để chỉnh sửa những đoạn văn bản hay dữ liệu để lưu vào dữ liệu. CKEditor là một trình soạn thảo văn bản HTML có sẵn để sử dụng được thiết kế để đơn giản hóa việc tạo ra nội dung web. Đó là một trình soạn thảo WYSIWYG mang lại các tính năng xử lý văn bản phổ biến trực tiếp đến trang web của bạn. CKEditor là một ứng dụng mã nguồn mở, có nghĩa là nó có thể được sửa đổi theo bất kỳ cách nào bạn muốn. Lợi ích của nó từ một cộng đồng chức năng không liên tục phát triển các ứng dụng với các tiện ích bổ sung miễn phí và quá trình phát triển trong suốt (quá trình phát triển minh bạch). Nếu trang web của bạn chưa là một ckeditor, đừng ngần ngại tìm hiểu nó tại đây, chắc chắn rằng bạn sẽ thấy thú vị với nó. Ckeditor cũng cung cấp cho người dùng khả năng thao tác linh hoạt và đa dạng với đoạn văn bản mà mình soạn thảo bao gồm chèn liên kết, hiện mà nguồn, tạo bảng, căn lề, tùy chỉnh chèn ảnh,. và nhiều tùy chọn khác như ảnh bên dưới.

http://example.com/ckeditor/plugins/image

Sau khi cài đặt hình ảnh, bộ tùy chỉnh hình ảnh của chúng ta sẽ có dạng như sau.

 /ckeditor/plugins/image/dialogs/image.js

Tiếp theo, hãy tìm đoạn mã bắt đầu bằng id: 'cmbAlign' và chỉnh sửa như sau

               {
                  id: 'cmbAlign',
                  type: 'select',
                  widths: ['35%', '65%'],
                  style: 'width:90px',
                  label: editor.lang.common.align,
                  'default': '',
                  items: [
                    [editor.lang.common.notSet, ''],
                    [editor.lang.common.alignLeft, 'left'],
                    [editor.lang.common.alignRight, 'right'],
                    [editor.lang.common.alignCenter, 'center']  //=> display: block; margin-left: auto; margin-right: auto;
                  ],
                  onChange: function () {
                  	updatePreview( this.getDialog() );
										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
                  },
                  setup: function (type, element) {
                    if (type == IMAGE) {
                      var value = element.getStyle('float');
                      switch (value) {
                        case 'inherit':
                        case 'none':
                            value = '';
                      }!value && (value = (element.getAttribute('align') || '').toLowerCase());
                      this.setValue(value);
                    }
                  },
                  commit: function (type, element, value) {
                    var value = this.getValue();
                    if (type == IMAGE || type == PREVIEW) {
                      if (value) {
                            switch (value) {
                            case 'left':
                                element.setStyle('float', value);
                                break;
                            case 'right':
                                element.setStyle('float', value);
                                break;
                            case 'center':
                                element.setStyle('display','block');
                                element.setStyle('margin-left','auto');
                                element.setStyle('margin-right','auto');
                                break;
                            default:
                                element.setStyle('float', value);
                          }
                      }
                      else {
                        element.removeStyle('float');
                        element.removeStyle('display');
                        element.removeStyle('margin-right');
                        element.removeStyle('margin-left');
                      }
                      if (!value && type == IMAGE) {
                        value = (element.getAttribute('align') || '').toLowerCase();
                        console.log(value);
                        switch (value) {
                            case 'left':
                                break;
                            case 'right':
                                break;
                            case 'center':
                            break;
                          default:
                            element.removeAttribute('align');
                        }
                      }
                    } else if (type == CLEANUP){
                        element.removeStyle('float');
                        element.removeStyle('display');
                        element.removeStyle('margin-right');
                        element.removeStyle('margin-left');
                    }
                  },

Sau đó, kiểm tra lại cửa sổ tùy chỉnh cấu hình ảnh của ckeditor và tận hưởng thành quả

ckeditor

Đã đăng ký Bản quyền

• Report
• Add to series of me