I'm working on edit content functionality with js where I've dynamically added contenteditable="true" to some HTML elements on click on "Edit text". When i click on "save" after editing any content, I capture the updated content from the DOM and save it to a html file.
Here's the relevant working HTML file with all neccessory css and js code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Extracted Page">
<title>Home</title>
<link rel="stylesheet" href=".0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous">
<style>
.partner-block .partner-list {
overflow: hidden;
margin: 0;
}
.partner-block .partner-list li {
float: left;
margin: 0 auto;
}
.partner-block .partner-list li a:before {
pointer-events: none;
width: 0;
height: 3px;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.partner-block .partner-list li a:hover:before {
width: 100%;
opacity: 1;
visibility: visible;
}
.partner-block .partner-list .slick-arrow {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--background-primary-color);
border: 1px solid #e8e8e8;
font-size: 14px;
right: 17px;
bottom: 100%;
margin-bottom: 33px;
width: 34px;
height: 34px;
}
.partner-block .partner-list .slick-arrow.slick-disabled {
pointer-events: none;
color: var(--text-color-default);
}
.partner-block .partner-list .slick-arrow:hover {
background-color: var(--secondary-border-color);
color: var(--text-color-default);
border-color: var(--secondary-border-color);
}
.partner-block .partner-list .slick-prev {
margin-right: 41px;
}
[contenteditable="true"] :hover {
border: 1px solid red;
outline: none;
}
</style>
</head>
<body>
<div class="editor-section">
<button id="editText">Edit text</button>
<button id="savePage">Save</button>
</div>
<div id="wrapper" class="editableSection">
<div id="about-7" class="">
<section class="partner-block">
<div class="container">
<div class="row">
<header class="col-xs-12 popular-posts-head">
<h2 class="popular-head-heading">Trusted Partners</h2>
</header>
</div>
<div class="row">
<div class="col-xs-12 dynamic-slider-wrapper">
<ul class="list-unstyled partner-list">
<li>
<a href="#">
<p>Test1</p>
</a>
</li>
<li>
<a href="#">
<p>Test2</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<script src=".6.0.min.js"></script>
<script src="/[email protected]/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
initSlickCarousel();
// Function to enable content editing
$('#editText').click(function () {
$("body *").attr("contenteditable", "true");
});
// Function to save the edited content and generate a downloadable file
$('#savePage').click(function () {
$("body *").removeAttr("contenteditable");
$(".editor-section").remove();
// Generate the edited HTML content
var htmlContent = $('html').html();
var blob = new Blob([htmlContent], { type: 'text/html' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'edited_page.html';
a.click();
URL.revokeObjectURL(url); // Clean up the URL object
});
// slick init
function initSlickCarousel() {
"use strict";
jQuery('.partner-list').slick({
slidesToScroll: 1,
rows: 0,
slidesToShow: 1,
prevArrow: '<a href="#" class="slick-prev fas fa-chevron-left"><span class="sr-only">Previous</span></a>',
nextArrow: '<a href="#" class="slick-next fas fa-chevron-right"><span class="sr-only">Next</span></a>',
infinite: false,
adaptiveHeight: true,
responsive: [{
breakpoint: 1025,
settings: {
slidesToShow: 5
}
}, {
breakpoint: 991,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 577,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 481,
settings: {
slidesToShow: 2
}
}]
});
}
});
</script>
</body>
</html>
So after click on "edit" if we change any text on the page, for example "Test1" to "NewTest1" and saved the file then the text updates in the downloaded file but there's an issue:when the HTML code of a slider loads, jQuery (jquery.min.js) is adding Slick slider classes (slick-slide, slick-initialized, etc.) to the content inside the ul with the class list-unstyled partner-list. the content inside class="dynamic-slider-wrapper" looks something like this in the downloaded html file:
<div class="col-xs-12 dynamic-slider-wrapper">
<ul class="list-unstyled partner-list slick-initialized slick-slider">
<a href="#"
class="slick-prev fas fa-chevron-left slick-arrow slick-disabled"
aria-disabled="true" style=""><span class="sr-only">Previous</span></a>
<div class="slick-list draggable" style="height: 30px;">
<div class="slick-track"
style="opacity: 1; width: 2280px; transform: translate3d(0px, 0px, 0px);">
<li class="slick-slide slick-current slick-active" data-slick-index="0"
aria-hidden="false" tabindex="0" style="width: 1140px;">
<a href="#"
tabindex="0">
<p>NewTest1</p>
</a>
</li>
<li class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1"
style="width: 1140px;">
<a href="#" tabindex="-1">
<p>Test2</p>
</a>
</li>
</div>
</div>
<a href="#" class="slick-next fas fa-chevron-right slick-arrow" aria-disabled="false"
style=""><span class="sr-only">Next</span></a>
</ul>
</div>
So, how can we avoid the Slick slider classes in the downloaded HTML file while keeping the updated changes? I want to download the file with the original HTML code, including the updated content changes on save. For example, if we change 'Test1' to 'NewTest1', the output in the downloaded file should look like this:
<div class="col-xs-12 dynamic-slider-wrapper">
<ul class="list-unstyled partner-list">
<li>
<a href="#">
<p>NewTest1</p>
</a>
</li>
<li>
<a href="#">
<p>Test2</p>
</a>
</li>
</ul>
</div>