Verhindern ⇐ Jquery

[Guest]

Ich arbeite an der Funktionalität von Inhalten mit JS, wo ich in einigen HTML -Elementen auf "Text bearbeiten" dynamisch in contenteditable = "true" hinzugefügt habe. Wenn ich nach dem Bearbeiten eines Inhalts auf "Speichern" klicke, erfasse ich den aktualisierten Inhalt aus dem DOM und speichere ihn in einer HTML -Datei. JS -Code: < /p>

Code: Select all

Home
[*]


.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;
}




Edit text
Save






Trusted Partners



[list]

[url=#]
Test1
[/url]

[*]
[url=#]
Test2
[/url]

[/list]









$(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: '[url=#]Previous[/url]',
nextArrow: '[url=#]Next[/url]',
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
}
}]
});
}
});



< /code>
Nachdem Sie auf "Bearbeiten" klicken, wenn wir einen Text auf der Seite ändern, z. ein Problem: Wenn der HTML -Code eines Schiebereglers lädt, jQuery (jquery.min.js

) fügt Slick Slider -Klassen hinzu (

Code: Select all

slick-slide

, Slick-initialisierte usw.) zum Inhalt in der UL mit der Klassenliste-Beeinflusspartnerliste . Der Inhalt in der class = "Dynamic-Slider-Wrapper" sieht ungefähr so ​​in der heruntergeladenen HTML-Datei aus: < /p>

Code: Select all

[list]
[url=#]Previous[/url]


[*]               aria-hidden="false" tabindex="0" style="width: 1140px;">
[url=#]
NewTest1
[/url]

[*]               style="width: 1140px;">
[url=#]
Test2
[/url]


[url=#]Next[/url]
[/list]

< /code>
Wie können wir also die Slick -Slider -Klassen in der heruntergeladenen HTML -Datei vermeiden, während wir die aktualisierten Änderungen beibehalten?  Ich möchte die Datei mit dem ursprünglichen HTML -Code herunterladen, einschließlich der aktualisierten Inhaltsänderungen auf Speichern. Dies: < /p>

[list]
[*]
[url=#]
NewTest1
[/url]

[*]
[url=#]
Test2
[/url]

[/list]