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

布满荆棘的人生 2022-10-05 12:49 168阅读 0赞

【背景】

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

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

【折腾过程】

1.自己瞎写的，但是估计不能工作：

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);

\}

商品名：

在此输入新产品的介绍内容

编辑已保存的页面

提交当前页面

2.搜：

KindEditor 加载html

参考：

感觉问题转换为：

【总结】

最终是以变通的方式：

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

相关代码为：

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);

\}

商品名：

在此输入新产品的介绍内容

提交当前页面

点击按钮，选择要加载的html，即可加载对应html内容。

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 Html 页面初始化加载

$(document).ready(function(){ trace("初始化方法进入"); }); $(function()...

秒速五厘米/ 2024年04月17日 15:01/ 0 赞/ 65 阅读

相关【QT】QWebEngineView加载静态html页面

需求：想在窗口中添加在线帮助一个功能模块方法：可以先把在线帮助word文档做出来，然后通过wps直接另存为html格式的文件，然后在QT中加载即可。预

雨点打透心脏的1/2处/ 2024年04月07日 14:47/ 0 赞/ 81 阅读

相关 html页面重复加载数据,科技常识：html页面加载海量数据的实现

今天小编跟大家讲解下有关html页面加载海量数据的实现，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html页面加载海量数据的实现的相关资料，希望小伙伴们看了有

痛定思痛。/ 2022年10月06日 05:56/ 0 赞/ 200 阅读

相关 html 中加载一段html,【基本解决】KindEditor中加载已有html页面内容

【背景】之前已经实现了，整合KindEditor进来，可以正常使用了。现在需要在富文本编辑器KindEditor中，加载已有的html网页的内容。【折腾过程】 1

布满荆棘的人生/ 2022年10月05日 12:49/ 0 赞/ 169 阅读

相关使用Html.fromHtml()怎么加载Html中的图片

extView是不只可以String的，我们平常用的给setText()方法传递String参数的时候，其实是调用的public final void setText (Cha

喜欢ヅ旅行/ 2022年08月21日 05:54/ 0 赞/ 241 阅读

相关 HTML页面加载流程

浏览器加载显示html的顺序是按下面的顺序进行的： 1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2、在渲染到页面的某一部分时，其上面

小灰灰/ 2022年07月18日 00:24/ 0 赞/ 217 阅读

相关 HTML 页面加载过程

window.onload 和 DOMContentLoaded 的区别从输入 url 到得到 html 的过程浏览器渲染页面的过程 window.o

客官°小女子只卖身不卖艺/ 2022年05月26日 12:41/ 0 赞/ 271 阅读

相关 HTML页面加载过程

window.onload 和 DOMContentLoaded 的区别从输入 url 到得到 html 的过程浏览器渲染页面的过程 window.o

ゞ浴缸里的玫瑰/ 2022年05月16日 04:44/ 0 赞/ 248 阅读

相关如何加快HTML页面加载速度

一：页面减肥 a：页面的肥瘦是影响加载速度最重要的因素 b:删除不必要的空格、注释 c:将inline的script和css移到外部文件 d:可以使用HTML

- 日理万妓/ 2022年01月30日 02:27/ 0 赞/ 267 阅读

相关 HTML5加载动画

3、 [HTML5 Canvas奇幻色彩Loading加载动画][HTML5 Canvas_Loading] 之前我们分享过很多基于CSS3的Loading加

冷不防/ 2022年01月29日 08:45/ 0 赞/ 329 阅读