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

Question

我需要在某种后端保存编辑器的一些内容，目前未指定。目前，我正在努力构建所创建文档的结构。在编辑器中，用户应该能够在没有关于如何放置图像和文本的固定结构的情况下编写文本和放置视频或图像。用户应将这 3 个组件以任意顺序放置在彼此下方。

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

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

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

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

我觉得我的两个想法都不是很好，所以我问你们有什么建议。

Answer 1

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

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

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

Answer 2

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

Answer 3

A Working concept with any Angular2+ compatible Rich Text Editor

我最好的选择是 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。

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

How to save structure of site/document created with a rich text editor to create read-only views and editable rich text editors again?

javascript

jquery

html

angular

rich-text-editor