如何保存使用富文本編輯器創建的站點/文檔的結構，以再次創建只讀視圖和可編輯的富文本編輯器？

Question

我需要在某種后端保存編輯器的一些內容，這些內容目前尚未指定。 目前我在努力創建文檔的結構。 在編輯器中，用戶應該能夠編寫文本並放置視頻或圖像，而不需要如何放置圖像和文本的固定結構。 用戶應該按照他想要的任何順序放置這3個組件。

在實踐中，編輯器看起來像這樣：

問：如何保存結構，下次加載完全相同的編輯器，或者再次使用內容創建只讀<div>容器和可編輯的富文本編輯器？

我的第一個想法是，一旦內容類型發生變化，就將編輯器拆分為較小的子編輯器。 例如，您只從一個帶文本的編輯器開始。 然后，用戶添加另一個編輯器（例如，單擊按鈕）並添加圖像。 但我不確定用戶是否接受了這一點，然后將所有內容（文本和圖像）放在第一個編輯器中。

---

我的第二個想法是保存在編輯器代碼視圖中創建的整個html並在下次訂購時將其加載到編輯器中。 但我不確定是否可以通過這種方式創建具有相同內容的“普通”只讀<div>容器。

在我看來，我的兩個想法都不那么好，所以我問你們你們建議做什么。

Answer 1

最好的方法是在WYSIWYG編輯器中保存html源代碼。 在加載時從空編輯器開始並將保存的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等。

要了解有關這些功能的更多信息，請參閱使用說明文檔 。

Answer 3

查看一些編輯器，如CKEditor ，UMEditor - 日文/中文？， Kendo UI Editor ， TinyMCE