iT邦幫忙

0

【自解】tinyMCE tpImportword 導入Word表格 置中效果秀逗

  • 分享至 

  • xImage

專案用了tinyMCE編輯器,
並且自定義了一套表格置左中右的button,
以下拿表格置中來做範例展示:

editor.ui.registry.addButton('tableCenterButton', {
    onAction: function (_) {
        // 獲取選中的元素
        let selectedElement = editor.selection.getNode();
        // 在父層中查找最近的表格元素
        let tableElement = selectedElement.closest('table');
        // 檢查找到的元素是否為表格
        if (tableElement) {
            // 將表格居中
            tableElement.style.marginLeft = 'auto';
            tableElement.style.marginRight = 'auto';
        }
    }
});

並且專案使用tpImportword插件給使用者導入Word文件;
但目前遇到的狀況是...
一、tinyMCE內自行新增的表格在編輯器中置中效果正常、預覽正常、儲存正常。
二、tpImportword導入的表格在編輯器中是正常,但在預覽時會失效。
三、專案儲存會跟預覽時的效果一致,置中失效。

目前測下來發現,Word導入的表格:
一、一開始一定會失效,但過很久或是操作很多東西後就正常。
二、只要一可以正常置左中右就會持續正常。
三、但重新整理後,又會回到一開始失效的狀態。
四、發現只要對該表格有調整過欄寬或高,就會正常。

目前還找不出原因,一頭霧水中...
但難以解釋現況,請大神們救救我 TAT

pppppeter iT邦新手 5 級 ‧ 2023-11-28 09:35:45 檢舉
【自問自答 XD】
我同事幫我解惑了~
神人啊!!!
在此感謝他的付出,雖然他看不到。

表格置中的語法,應改成:
---------------------------------------->

/ /將表格居中
editor.dom.setStyle(tableElement,'margin-left','auto');
editor.dom.setStyle(tableElement,'margin-right','auto');

---------------------------------------->
原因是這樣的寫法才能讓dom底下的方法同步變更。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答