如何保存使用富文本编辑器创建的站点/文档的结构以再次创建只读视图和可编辑的富文本编辑器？

Question

我需要将编辑器的一些内容保存在某种后端，目前尚未指定。目前我正在为创建的文档的结构而苦苦挣扎。在编辑器中，用户应该能够编写文本并放置视频或图像，而无需固定图像和文本的放置结构。用户应该将这 3 个组件按他想要的任何顺序放在彼此下方。

实际上，编辑器看起来像这样：

问：如何保存结构、下次加载完全相同的编辑器或再次创建只读<div> 容器和可编辑的富文本编辑器？

我的第一个想法是在内容类型发生变化时将编辑器拆分为较小的子编辑器。因此，例如，您只从一个带有文本的编辑器开始。然后用户添加另一个编辑器（例如单击按钮）并添加图像。但我不确定用户是否接受这一点，但仍将所有内容（文本和图像）放在第一个编辑器中。

---

我的第二个想法是保存在编辑器代码视图中创建的整个html，并在下次订购侧面时将其加载回编辑器中。但我不确定是否可以通过这种方式创建具有相同内容的“普通”只读 <div> 容器。

在我看来，我的两个想法都不是那么好，所以我问你们建议做什么。

Answer 1

最好的方法是将 html 源代码保存在 WYSIWYG 编辑器中。在加载时从空编辑器开始，并将保存的 html 源代码注入其中。这将为保存的内容提供最佳保真度。

WYSIWYG 编辑器主要使用 DIV 或 IFrame 标签，它接受输入并将其转换为所需的 html 代码。此代码插入 WYSIWYG 标签内的适当位置。使用编辑器内的任何格式和媒体组合，定位和保存此标签的内容都应该适合您。

另一个需要研究的方面是媒体文件的保存，以防它们尚未作为永久 URL 提供。 URL 中的图像可能会在编辑时上传到临时位置。要保存内容，您可能还需要保存所有这些本地媒体文件（稍后在加载时恢复）。

Answer 2

任何兼容 Angular2+ 的富文本编辑器的工作概念

我最好的选择是Angular Froala，因为它使用不同的工具（如 Angular CLI、Webpack、Angular Seed 等）提供了多种集成。

如果您使用的是 Angular CLI，您只需通过 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"
]

完成此设置后，您可以通过在任何 textarea 元素上使用 froalaEditor 组件在 HTML 中简单地查看编辑器。

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

它将为editorContent 对象创建双向绑定。因此，您在 Froala 编辑器中编写的任何内容实际上都会保存在您当前组件的 editorContent 变量中。

现在您可以简单地将editorContent 的内容保存到您的 API 中，而无需费心转换 HTML 左右。

如需了解更多功能，请参阅usage documentation。

Answer 3

查看一些编辑器，例如CKEditor、UMEditor - Japanese/Chinese?、Kendo UI Editor、TinyMCE