Установка ширины изображения в CKEditor 5

У меня есть страница, на которой я использую CKEditor 5 с CKFinder 3. По умолчанию изображения, включенные в текстовое поле, являются адаптивными и могут быть выровнены только как full или right.

На соответствующей странице есть фотографии контактов, и они не должны быть такими большими. Как настроить ширину изображения, вставляемого с помощью кнопки на панели инструментов?

ClassicEditor
    .create( document.querySelector( '#pageTextArea' ), {
        image: {
            styles: [ { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' } ]
        }
        ckfinder: {
            uploadUrl: 'example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
        }
    })

    .catch( error => {
        console.error( error );
        process.exit(1);
    });

image ckeditor width ckfinder ckeditor5

03.10.2018 16:24

Применение градиента к изображению с помощью CSS

Здравствуйте, братья и сестры, как дела? Недавно я застрял на применении градиента к изображению. Я применял это много раз, но иногда наши требования...

Получение URL-адреса изображения курса в Moodle с помощью PHP

Moodle - это популярная система управления обучением с открытым исходным кодом, используемая многими учебными заведениями и организациями по всему...

2 127

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы создать индивидуальный стиль изображения, вам необходимо:

Сначала настройте параметр image.styles.

ClassicEditor.create( element, {
     // ...
     image: {
          // ...
          styles: [
              // Pottentially some other style can go here. E.g. the `full` or `side`.
              { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' }
          ]
     }
}

А во-вторых, сделайте изображение шириной 100 пикселей с помощью CSS:

.ck-content figure.image.my-contact-side-image {
      float: right;
      width: 100px;
}

Обратите внимание, что вам также необходимо обрабатывать стили созданного контента вне редактора.

Спасибо за ответ. Если я добавлю параметр image.styles, панель инструментов исчезнет, и текст будет показан в коде. Я скорректировал код выше. Что я делаю неправильно?

— 04.10.2018 11:41

Какая панель инструментов исчезнет? Какой текст показан? Я улучшил семпл, может, вам это поможет. У вас есть ошибки в консоли?

— 04.10.2018 14:43

Текстовое поле обычно имеет панель инструментов ckeditor. Когда я настраиваю параметр image.styles, панель инструментов исчезает, превращаясь в текстовое поле. Я получаю сообщение об ошибке: «Неперехваченная SyntaxError: неожиданный идентификатор». Это относится к строке, где начинается ckfinder

— 05.10.2018 12:32

class: '...' должно быть className: ... Отлично работает. Спасибо. Как мне добавить для этого собственный значок? Возможно ли это при использовании CDN?

— 10.10.2018 15:29

Ой. Тогда я изменю фрагмент кода. Настройка пользовательского значка описана в ckeditor.com/docs/ckeditor5/latest/api/….

— 10.10.2018 15:55

Я сделал PR, чтобы исправить это в документах.

— 10.10.2018 16:08

03.10.2018 17:50