【基本解决】KindEditor中加载已有html页面内容

【背景】

之前已经实现了,整合KindEditor进来,可以正常使用了。

现在需要在富文本编辑器KindEditor中,加载已有的html网页的内容。

 

【折腾过程】

1.自己瞎写的,但是估计不能工作:

<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内容? – 开源中国社区

感觉问题转换为:

【基本解决】js中如何加载html内容

 

【总结】

最终是以变通的方式:

通过KindEditor中,调用js的FileReader的方式去加载本地html文件,然后赋值给KindEditor的。

相关代码为:

<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内容。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量