I'm currently in the midst of making myself a site-wide page-builder utilizing GrapesJS and JS/jQuery to get selected content, parse said content, and finally initialize GJS.
(我目前正在使自己成为一个使用GrapesJS和JS / jQuery来获取选定内容，解析所述内容并最终初始化GJS的站点范围内的页面生成器。)
My problems all stem from parsing and subsequently converting relative URLs to absolute URLs.(我所有的问题都源于解析并随后将相对URL转换为绝对URL。)
On my page, here's what happens from a visit:
(在我的页面上，以下是访问后发生的情况：)
- Prompt me for URL
(提示我输入网址)
- Load document from URL
(从URL加载文档)
- Strip all
<script> s, add them to the GJS init variable (push script's src into init.canvas.scripts), if no src is present, add enclosed code into variable for injection later(剥离所有<script> ，将它们添加到GJS init变量中（将脚本的src推送到init.canvas.scripts中），如果不存在src ，则将封闭的代码添加到变量中以便稍后注入)
- Repeat step 3 for
<style> / <link> tags(对<style> / <link>标签重复步骤3)
- Convert all links to absolute URLs (uses modified version of this solution )
(将所有链接转换为绝对URL（使用此解决方案的修改版）)
- Put manipulated page into
<div id="gjs"></div>(将受操纵的页面放入<div id="gjs"></div>)
- Initialize GJS with customized
init variable(使用自定义的init变量初始化GJS)
At the moment, I load a document with jQuery's $.get() function, then use the callback data (which is a string) for stripping, etc. However, this string is not able to be manipulated with jQuery without being parsed, so I use parsePage() , which should ideally convert this string into a jQuery object.
(目前，我使用jQuery的$.get()函数加载文档，然后使用回调数据（这是一个字符串）进行剥离等。但是，如果不对该字符串进行解析，就无法使用jQuery对其进行操作，因此我使用parsePage() ，理想情况下应将此字符串转换为jQuery对象。)
Using the "parsed" variable, I should be able to .find('img') , no?(使用“解析”变量，我应该能够.find('img') ，不是吗？)
It doesn't give me anything...(它什么也没给我...)
How can I correctly parse the page if I'm doing it incorrectly, and just as important, how can I strip this whole document to only what's inside the document's <body> ?
(如果操作不正确，如何正确解析页面，同样重要的是，如何将整个文档剥离为文档的<body>内部内容？)
Below is all the JS I use to do this:
(以下是我用来执行此操作的所有JS：)
var nosrc_scripts = "";
var nosrc_styles = "";
var init = {
container: '#gjs',
fromElement: true,
width: 'auto',
height: 'auto',
storageManager: false,
panels: {
defaults: []
},
// load external css/scripts
// found the reference here: https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js
canvas: {
styles: [],
scripts: []
},
};
$(document).ready(function() {
var url = prompt("URL to load:");
if (url != null) {
// get page content in var
$.get(url, function(page) {
// fix relative images, scripts, stylesheets, etc.
page.find('img[src^="./"]').attr('src', function(_,existing){
return new URL(src, "https://example.com/").href;
});
// go through scripts, add tags into the config, and add <script>'s into a var to inject later
getScripts(page);
// go through stylesheets, add tags into the config, and add <style>'s into a var to inject later
getStyles(page);
// load page content into the div to load
$('#gjs').append(stripToBody(page));
});
// finally, initialize grapesjs with our custom init var
initializeGJS();
}
});
function initializeGJS() {
const editor = grapesjs.init(init);
// create tags to inject
var nosrc_scripts_tag = document.createElement('script');
var nosrc_styles_tag = document.createElement('script');
// set <script>/<style> tags to the variables to inject
nosrc_scripts_tag.text = nosrc_scripts;
nosrc_styles_tag.text = nosrc_styles;
// inject them into the head of the HTML using grapesjs's method
editor.Canvas.getDocument().head.appendChild(nosrc_scripts_tag);
editor.Canvas.getDocument().head.appendChild(nosrc_styles_tag);
}
function getScripts() {
...
}
function getStyles() {
...
}
function parsePage(page) {
// strip loaded page down to body HTML, with no <script> or <style> tags
return $.parseHTML(page.substring(page.indexOf("<body"), page.indexOf("</body>")), false);
}
Happy Thanksgiving!
(感恩节快乐！)
ask by Pat translate from so
