Существуют ли Angular совместимые библиотеки WYSIWYG, которые позволяют сохранять текст с разметкой, а также загруженные изображения в виде единого потока данных? - PullRequest
Новая
       10

Существуют ли Angular совместимые библиотеки WYSIWYG, которые позволяют сохранять текст с разметкой, а также загруженные изображения в виде единого потока данных?

0 голосов
/ 10 марта 2020

Я бы хотел разработать функцию блога веб-приложения, которая должна быть вторичной по сравнению с основными функциями. Администраторы с помощью блогов могут публиковать небольшие тексты с расширенным форматированием и публиковать небольшие фотографии, вставленные в текст. Существуют ли библиотеки Angular WYSISYG, которые могут предоставить текстовую разметку вместе с изображениями в кодировке base64 для сохранения в виде одной строковой записи на сервере?

1 Ответ

0 голосов
/ 10 марта 2020

Похоже, что froala позволяет это:

https://wysiwyg-editor.froala.help/hc/en-us/articles/115000555949-Can-I-insert-images-as-base64-

, но обратите внимание, что пример JS не будет работать для TypeScript как есть.

Вы должны изменить его немного из-за: https://github.com/microsoft/TypeScript/issues/4163

, который должен быть связан с таким параметром редактора, как этот: 

<textarea [froalaEditor]="options" [(froalaModel)]="editorContent"></textarea>

и размещенный вам код компонента: 

public options:Object = {
    placeholderText: 'Edit Your Content Here!',
    charCounterCount: true,
    toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat', 'alert'],
    toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat', 'alert'],
    toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat', 'alert'],
    toolbarButtons: ['uploadFile', 'fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent'],
    events: {
      'image.beforeUpload': function(files) {
    console.log("Start");
    const editor = this;
    if (files.length) {
      console.log("Files: "+files.length);
      // Create a File Reader.
      const reader = new FileReader();
      reader.onload = (e) => {
        var result = reader.result;
        editor.image.insert(result, null, null, editor.image.get());
      };
      // Read image as base64.
      reader.readAsDataURL(files[0]);
      console.log("Behind event");
      // Read image as base64.
      reader.readAsDataURL(files[0]);
    }
    //editor.popups.hideAll();
    // Stop default upload chain.
    return false;
  }

}

...