Как сохранить структуру сайта/документа, созданного в текстовом редакторе, чтобы снова создавать просмотры только для чтения и редактируемые редакторы расширенного текста?

Мне нужно сохранить некоторое содержимое редактора в каком-то бэкэнд, который в настоящее время не указан. На данный момент я борюсь с структурой созданного документа. В редакторе пользователь должен иметь возможность писать текст и размещать видео или изображения без фиксированной структуры размещения изображений и текста. Пользователь должен поместить эти 3 компонента в любом порядке, который он хочет под друг другом.

На практике редактор выглядит примерно так: Текст и изображения в любом порядке

В: Как можно сохранить структуру, загрузить тот же самый редактор в следующий раз или создать контейнеры только для чтения <div> и редактируемые редакторы с расширенным текстом снова с содержимым?

Моя первая идея заключалась в том, чтобы разделить редактор на небольшие субредакторы, как только изменится тип контента. Так, например, вы начинаете с одного редактора с текстом. Затем пользователь добавляет другой редактор (например, нажатием кнопки) и добавляет изображение. Но я не уверен, что пользователь принимает это и тем не менее помещает весь контент (текст и изображения) в первый редактор. Несколько субредакторов с различным содержимым

Моя вторая идея состояла в том, чтобы сохранить весь html, созданный внутри кода кода редактора, и загрузить его обратно в редактор при следующем заказе стороны. Но я не уверен, что это возможно, чтобы создать "обычные" контейнеры только для чтения <div> с одним и тем же контентом.

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

Ответы

Ответ 1

A Рабочая концепция с любым Angular2 + совместимым Rich Text Editor

Мой лучший выбор будет Angular Froala, поскольку он обеспечивает разнообразную интеграцию с использованием различных инструментов, таких как Angular CLI, Webpack, Angular Семя и т.д.

Если вы используете CLI Angular, вы можете просто включить его в свой проект через npm и объявить его как зависимость вашего модуля.

npm install angular-froala-wysiwyg --save

app.module.ts

// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@NgModule({
   ...
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ...
})

И в вашем .angular-cli.json вы можете объявить связанные CSS и JS, как показано ниже:

"styles": [
  "styles.css",
  "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "../node_modules/froala-editor/css/froala_style.min.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]

После выполнения этой настройки вы можете просто увидеть редактор в своем HTML с помощью компонента froalaEditor на любом элементе textarea.

<textarea [froalaEditor] [(froalaModel)]="editorContent">Hello, Froala!</textarea>

Он создаст двустороннюю привязку для объекта editorContent. Поэтому все, что вы пишете в редакторе Froala, фактически будет сохранено в переменной editorContent вашего текущего компонента.

Теперь вы можете просто сохранить содержимое editorContent в свой API, и вам не нужно беспокоиться о преобразовании HTML или так.

Чтобы узнать больше об этих функциях, обратитесь к документации по использованию.

Ответ 2

Лучший способ - сохранить источник html в редакторе WYSIWYG. При загрузке начинайте с пустого редактора и вводите в него сохраненный источник HTML. Это обеспечит наилучшую точность сохраненного содержимого.

Редакторы WYSIWYG в основном работают с тегом DIV или IFrame, который принимает входные данные и преобразовывает их в требуемый код html. Этот код вставляется в соответствующее место в теге WYSIWYG. Поиск и сохранение содержимого этого тега должно работать для вас с любым форматом и комбинацией мультимедиа внутри редактора.

Еще один аспект, который нужно изучить, - это сохранение медиафайлов, если они еще не доступны в качестве постоянного URL. Изображение в URL-адресе может быть загружено во временное место во время редактирования. Чтобы сохранить содержимое, вам также может понадобиться сохранить все эти локальные файлы мультимедиа (и позже восстановить во время загрузки).