Возможность добавить класс к ‹a› в редакторе Redactor

Я использую редактор Redactor как часть Perch. Я хотел бы дать редактору возможность (необязательно) добавлять класс "button" к любому тегу <a>, который они добавляют. Это может быть дополнительная опция в существующем модальном окне «Добавить ссылку» или отдельная кнопка на панели инструментов редактора.

Есть ли у кого-нибудь какие-либо рекомендации относительно наилучшего способа достижения этого? Любые указатели приветствуются.

Это моя текущая настройка конфигурации:

config.plugins = [];
config.buttons = ['format','bold','italic','deleted','link','lists'];
config.formatting = ['p', 'blockquote', 'h2', 'h3', 'h4'];

javascript redactor
person Mike Harrison    schedule 13.07.2018    source источник
comment
Не могли бы вы попробовать опубликовать код для выполнения RnD   -  person Ullas Hunka    schedule 13.07.2018

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете использовать formattingAdd, чтобы создать собственный набор параметров форматирования для Выпадающий список форматирования. Это позволит вам добавлять свои собственные классы CSS.

formattingAdd: {
  'red-p-add': {
    title: 'Red Paragraph',
    api: 'module.block.format',
    args: {
      tag: 'p',
      class: 'red-styled',
    },
  },
}

К сожалению, согласно официальной документации:

formattingAdd можно применять только к блочным тегам (p, pre, blockquote, div, heading и т. д.).

Другими словами, поскольку <a> является встроенным элементом (а не блочным), если вы пытаетесь создать параметр, используя встроенную функциональность Redactor, то, похоже, вам не повезло.

person Grant Miller    schedule 18.07.2018

arrow_upward
3
arrow_downward

Как отмечалось в других ответах, formattingAdd нельзя применять к тегам. Вот плагин для последней версии редактора, который берет выделенный текст/ссылки и преобразует его в тег с определенным классом, который вам нужен:

(function($R) {
  $R.add('plugin', 'button', {
    init: function(app) {
      this.app = app;
    },

    activate: function() {
      // Remove existing link if any
      this.app.api('module.link.unlink')

      // Add a tag with 'button' class
      this.app.inline.format({ tag: 'a', class: 'button' })
    }
  });
})(Redactor);

Когда этот код определен и загружен, вам потребуются некоторые обновления конфигурации редактора json, чтобы использовать функциональность:

// include the plugin to redactor's world
"plugins": ["button"],
...

"formattingAdd": [
  ...
  // add a "Button" option in the formatting dropdown,
  // but use it to trigger your own plugin's function
  {
    "api": "plugin.button.activate",
    "args": {
      "class": "button",
      "tag": "a"
    },
    "title": "Button"
  },
]

Я попытался бросить this.app.api('module.link.open') в качестве последней строки функции activate, поэтому модальное окно ссылки будет открыто, как только ваш класс ссылки будет активирован. Это было хорошо, но я заметил некоторое непоследовательное поведение в зависимости от области первоначального выбора (работает хорошо, если был выбран только текст, но если также была выбрана часть тега DOM, все сломалось).

person efatsi    schedule 20.02.2019

arrow_upward
1
arrow_downward

Я не слишком знаком с Redactor, но, возможно, вы могли бы сделать это с помощью обратного вызова или чистого JavaScript после загрузки элемента.

<style>
  .my-custom-class-1 {
    background-color: red;
  }
  .my-custom-class-2 {
    font-size: 16px;
  }
  .my-custom-class-3 {
    font-family: Helvetica Neue, Helvetica, Arial;
  }
</style>

Не уверен, что возвращается по ссылке, но если это элемент html, вы можете добавить классы с обратным вызовом.

  $R('#content', {
    callbacks: {
      link: {
        inserted: function(link) {

          // use the classList API to remove and add classes
          link.classList.remove("my-custom-class-1");
          link.classList.add("my-custom-class-1");

          // add or remove multiple classes
          link.classList.add("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");
          link.classList.remove("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");

        }
      }
    }
  });

Если ссылки имеют собственный идентификатор, вы можете сделать это в чистом JavaScript.

  const link_1 = document.getElementById('linkId_1');
  const link_2 = document.getElementById('linkId_2');
  const link_3 = document.getElementById('linkId_3');

  // use the classList API to remove and add classes
  link_1.classList.remove("my-custom-class-1");
  link_1.classList.add("my-custom-class-1");

  // add or remove multiple classes
  link_1.classList.add("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");
  link_1.classList.remove("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");

Надеюсь это поможет! :)

person Flavio    schedule 24.07.2018