editor-ui

vue 集成 tinymce 富文本編輯器

自定義 tinymce 富文本編輯器,

在原來的編輯器中增加上傳 word 模板

最終展示效果:

主要代碼:

整體思路:

1,在編輯器原來的基礎上增加上傳模板按鈕

2, 前端上傳 word 模板

3, 服務端接收將 word 轉換為html 返回前端

4, 前端拿到服務端返回的值,將其放到富文本編輯器中

4.1, 在 data 的中定義個 customEditor 變量,值可以為空

4.2, 填充值的方式: 拿到服務端上傳成功之后的返回參數,將其填充到標簽中,

你所編輯的所有東西都會呈現在這個標簽中,所有富文本編輯器千篇一律

this.customEditor=res.content;

console.log('haoxy'+this.customEditor)

tinymce.get('tinymceEditer').setContent(this.customEditor);

5, 前端點擊submit,服務端將其轉換成 pdf文件

放到項目中遇到的問題修復

問題描述1:

當上傳模板之后點擊瀏覽器刷新編輯框中的內容會變為之前上傳的內容

解決方法:

if (localStorage.editorContent) {

tinymce.get('tinymceEditer').setContent(localStorage.editorContent);

}

將這段代碼注釋掉即可,因為編輯器會自動的將內容保存到本地,當你去點擊瀏覽器刷新的時候他會去本地取出并賦值到編輯框中

問題描述2:

當你在編輯框中進行編輯的時候tinymce編輯器監聽了鍵盤按下的事件,但是鍵盤按下的前一個字符沒有保存,例如:

你在編輯框中輸入4個字符 aaaa 你再點擊submit生成pdf文件,但是 pdf文件中就只有3個字符aaa

解決方法:

因為編輯器只監聽了keydown事件,并沒有去監聽keyup事件

所以加上如下代碼即可

editor.on('keyup', function (e) {

localStorage.editorContent = tinymce.get('tinymceEditer').getContent();

vm.editorModel.content = tinymce.get('tinymceEditer').getContent();

});

問題描述3:

當點擊submit 生成pdf文件時,生成的 pdf 文件樣式改變了

解決方法:

這是因為將 word 文檔轉換成 html 的時候自動的加上了這段樣式

解決方法可以在前端解決也可以在后端去解決,這里我選擇了在后端解決

后端在返回給前端html 的時候,在返回的內容上加上

respInfo.setContent("

"+content+"")

總結

以上是生活随笔為你收集整理的vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。