【背景】
之前已经实现了，整合KindEditor进来，可以正常使用了。
现在需要在富文本编辑器KindEditor中，加载已有的html网页的内容。
【折腾过程】
1.自己瞎写的，但是估计不能工作：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script> function editSavedGoodsContent() { var kindeditor = window.editor; // 加载之前已保存的页面的HTML内容 html = kindeditor.html("../previous_saved_page.html"); console.log(html); } function submitGoodsContent() { var kindeditor = window.editor; // 取得HTML内容 html = kindeditor.html(); console.log(html); }</script><div class="easyui-panel" style ="height: 100%;" title="编辑商品"> <div> <p>商品名：<input type="text" value="新产品名1" id="goodsName" name="goodsName"/></p> </div> <form> <textarea name="easyui_editor" id="easyui_editor" class="easyui-kindeditor" style="width: 100%; height: 200px; ">在此输入新产品的介绍内容</textarea> </form> <button onclick="editSavedGoodsContent()">编辑已保存的页面</button> <button onclick="submitGoodsContent()">提交当前页面</button></div> |
2.搜：
KindEditor 加载html
参考：
如何向KindEditor里插入HTML内容？ – 开源中国社区
感觉问题转换为：
【总结】
最终是以变通的方式：
通过KindEditor中，调用js的FileReader的方式去加载本地html文件，然后赋值给KindEditor的。
相关代码为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script> function readSingleFile(e) { var file = e.target.files[0]; if (!file) { return; } var reader = new FileReader(); reader.onload = function(e) { var contents = reader.result; displayContents(contents); }; reader.readAsText(file); } function displayContents(contents) { var kindeditor = window.editor; kindeditor.html(contents); } document.getElementById('editSavedGoodsContent') .addEventListener('change', readSingleFile, false); function submitGoodsContent() { var kindeditor = window.editor; // 取得HTML内容 html = kindeditor.html(); console.log(html); }</script><div class="easyui-panel" style ="height: 100%;" title="编辑商品"> <div> <p>商品名：<input type="text" value="新产品名1" id="goodsName" name="goodsName"/></p> </div> <form> <textarea name="easyui_editor" id="easyui_editor" class="easyui-kindeditor" style="width: 100%; height: 200px; ">在此输入新产品的介绍内容</textarea> </form> <input type="file" id="editSavedGoodsContent" /> <button onclick="submitGoodsContent()">提交当前页面</button></div> |
点击按钮，选择要加载的html，即可加载对应html内容。
转载请注明：在路上 » 【基本解决】KindEditor中加载已有html页面内容