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

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

应用程序模块.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"
]

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

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

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

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

要了解有关功能的更多信息，请参阅使用文档。