1. 程式人生 > 實用技巧 >解決tui-editor佈局錯誤失效問題

解決tui-editor佈局錯誤失效問題

使用tui-editor遇到markdown預覽樣式錯誤,也不清楚是不是版本的問題,改了下原始碼之後效果正常了

開啟控制檯看到幾個類名不對勁,te-editorte-md-splitterte-preview應該是並列關係,這裡變成了巢狀,初步排除是外掛的自定義配置問題

開啟node_modules包中的tui-editor資料夾,搜尋一下``te-preview`看看是在什麼地方渲染的

在js檔案中搜索 containerTmpl 變數

var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor" />', '<div class="te-md-splitter" />', '<div class="te-preview" />', '</div>', '<div class="te-ww-container">', '<div class="te-editor" />', '</div>', '</div>'].join('');

看到其中有些div寫成了自閉和標籤,自己加上</div>,然後將所有js檔案中containerTmpl替換

var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor">', '</div>', '<div class="te-md-splitter" >', '</div>', '<div class="te-preview">', '</div>', '</div>', '<div class="te-ww-container">', '<div class="te-editor">', '</div>', '</div>', '</div>'].join('');

這回就渲染正確了