Tinymce вставить автозаполнение ссылки из БД

Я использую редактор tinymce. Как я могу вставить ссылку на страницу из моей БД с автозаполнением..

Я наберу несколько букв, и редактор tinymce отфильтрует содержимое моей базы данных. Я выберу один, и он автоматически создаст ссылку.

https://jqueryui.com/autocomplete/

Автозаполнение Ajax и плагины tinymce. Я еще не нашел решения.

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Нативной функции TinyMCE Автозаполнение должно быть достаточно.

Вы можете поместить любой HTML-код в автозаполнение. Например, этот код может автоматически добавлять ссылки на Amazon.com, Yahoo.com и Google.com:

const mySites = [
  { text: 'yahoo', name: 'Yahoo', value: '<a href = "https://yahoo.com">Yahoo!</a>' },
  { text: 'amazon', name: 'Amazon', value: '<a href = "https://amazon.com">Amazon!</a>' },
  { text: 'google', name: 'Google', value: '<a href = "https://google.com">Google!</a>' }
];
tinymce.init({
  selector: 'textarea#autocompleter-cardmenuitem',
  height: 250,
  setup: (editor) => {
    const onAction = (autocompleteApi, rng, value) => {
      editor.selection.setRng(rng);
      editor.insertContent(value);
      autocompleteApi.hide();
    };

    const getMatchedChars = (pattern) => {
      return mySites.filter(char => char.text.indexOf(pattern) !== -1);
    };

    /**
     * An autocompleter that allows you to insert special characters.
     * Items are built using the CardMenuItem.
     */
    editor.ui.registry.addAutocompleter('mySites_cardmenuitems', {
      ch: ':',
      minChars: 1,
      columns: 1,
      highlightOn: ['char_name'],
      onAction: onAction,
      fetch: (pattern) => {
        return new Promise((resolve) => {
          const results = getMatchedChars(pattern).map(char => ({
            type: 'cardmenuitem',
            value: char.value,
            label: char.text,
            items: [
              {
                type: 'cardcontainer',
                direction: 'vertical',
                items: [
                  {
                    type: 'cardtext',
                    text: char.text,
                    name: 'char_name'
                  },
                  {
                    type: 'cardtext',
                    text: char.name
                  }
                ]
              }
            ]
          }));
          resolve(results);
        });
      }
    });
  }
});
<script src = "https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>

<textarea id = "autocompleter-cardmenuitem">
  <p>Type <b>-</b> below and then keep typing to reduce further matches. For example, typing <b>:goo</b> should show the "Google" item in the menu. Pressing esc should close the autocomplete menu.</p>
  <p></p>
</textarea>

Здесь он не запустится, но вы можете протестировать его на CodePen.

Спасибо Дмитрий все работает и очень функционально. Но мне нужно выбрать слово и нажать кнопку вставки ссылки, а затем ввести имя страницы, как в вашем примере: goo. Могу ли я сделать так?

Avadan 10.04.2023 19:19

Я не понимаю, чего вы пытаетесь достичь. Не могли бы вы описать его поэтапно?

Dmitry D 11.04.2023 11:28

Другие вопросы по теме