# HTML Editing
## HTML Editing
The page editing feature allows direct editing of HTML code.
The edited code can be reflected in the production environment through Ptengine.
While this feature is extremely convenient for those with HTML knowledge, please be cautious as it may cause unexpected issues if you lack proper knowledge or experience.
### **Interactive Content Issues**
#### **What is Interactive Content**
It refers to content or features that respond to user interactions such as clicks or mouse-overs.
The following elements are examples:
Navigation menus
Accordion panels
Add to cart buttons
Purchase buttons
Input forms
Various links
### **Situation Description**
Please be fully aware of the following risks associated with HTML editing:
**Impact on JavaScript Events** Editing specific elements may cause the following dynamic functions to malfunction: Slider functionality
```
Popup display/hide
Other interactive features
```
**Impact on Module Structure** Changing the HTML structure may cause the following issues: Tab switching functionality stops
```
Navigation menu breaks
Layout distortion
Abnormal module interaction functionality
```
To prevent these issues, pay attention to the following points when editing:
Fully confirm the function and role of the target element before editing
Keep changes to the minimum necessary
Always perform functionality checks after editing (preview feature)
### Best Practices for Safe HTML Editing
**1. Minimize Editing of Interactive Elements**
Special caution is needed when modifying elements linked with JavaScript
JavaScript events must be reapplied after changes
If you want to achieve similar functionality, we recommend using "Code Mode" to add new code
**2. Edit at Individual Element Level**
Even if you need to change multiple content items, try not to edit higher-level elements (parent elements)
Editing each element that needs to be changed individually provides the following benefits: Can maintain the overall page structure
```
Can minimize unexpected impacts
Makes it easy to identify and fix problems if they occur
```
**3. Recommended Approach for HTML Editing**
For example, let's explain the case where you need to change three content items in the red frame in the image below.
✅ **Recommended: Edit Individual Elements**
Change elements 1, 2, and 3 individually (3 operations)
High safety
Limited scope of impact
Easy to identify if problems occur
Easy to undo changes
**❌ Not Recommended: Batch Editing**
Select upper layers and edit in batch (1 operation)
> **DANGER** **Risks of Batch Editing**
>
> **Structure Breakdown** Page layout is easily corrupted
>
> ```
> Unexpected side effects are likely to occur
> ```
>
> **Impact on Interactive Elements** JavaScript event malfunction
>
> ```
> Dynamic feature failure
> ```
**Important Notes**
While batch editing can reduce work time, it has the following drawbacks: High risk of destroying page structure
```
Fixing may take considerable time
Testing and verification becomes more complex
```
## **Copy and Paste**
You can freely copy elements within a page and paste them in another location.
While this feature is very convenient, unexpected problems may occur if used incorrectly. The main precautions are explained below.
### **About Duplicate IDs**
When copying an element, if that element has an ID set, multiple elements with the same ID will exist on the same page. According to W3C standards, IDs must be unique within a page, so duplicates can cause malfunctions.
#### **Expected Issues**
Event processing linked to IDs does not work correctly
Expected behavior or interaction is not executed on the copied element
#### **Recommended Usage Method**
Check the HTML after pasting the element
Check if ID attribute is included
If an ID exists, change it to a new value that does not duplicate
```jsx
function findDuplicateIds() {
// Get all elements on the page
const allElements = document.querySelectorAll('*');
const idMap = {};
// Iterate through all elements and check for duplicate IDs
allElements.forEach((element) => {
const id = element.id;
if (id) {
if (idMap[id]) {
// If a duplicate ID exists, output it
console.log(`Duplicate ID found on page: ${id}`);
} else {
// If no duplicate, add the ID to the map
idMap[id] = true;
}
}
});
}
// Call the method to find duplicate IDs
findDuplicateIds();
```
You can check if there are duplicate IDs in the page using the above code by following these steps:
Open Developer Tools on the target website Windows/Linux: F12 key or Ctrl + Shift + I
```
Mac: Command + Option + I
```
Select the "Console" tab
Copy and paste the above code into the console
Press Enter to execute
> **WARNING** **If there are duplicate IDs:** A message stating "The page contains elements with duplicate IDs: \[duplicate ID]" will be displayed.
>
> **If there are no duplicate IDs:** No message will be displayed.
### **Style Inheritance**
When copying and pasting elements, the appearance or layout may differ from the original element.
For example, when moving product information within a page:
Product image size changes
Price display position shifts
Description text formatting is corrupted
To prevent these issues, style settings must be properly inherited.
#### **Tips for Maintaining Styles**
The following two methods are effective for maintaining styles when moving elements:
CSS review Check the style application status
```
Adjust selectors
Confirm relationships between elements
```
Direct style settings Specify styles directly within HTML
```
Keep structure simple
Minimize the impact of moving
```
These methods allow you to maintain consistent design.
### **Interactive Feature Synchronization Issues**
When you copy an element and place it in a new location, the operation function that the original element had may not work correctly. For example, if you copy an "Add to Cart" button, clicking the button in the new location will not respond.
#### **Situation Description**
It is common that operation functions set on the original element (such as adding to cart, ordering products, favorite registration, etc.) do not work by simply copying and placing them in a new location. This is because only the appearance of the element is copied, and the processing settings running in the background are not inherited.
#### **Recommended Approach**
**Avoid Handling Interactive Elements**
We recommend avoiding copying elements with operation functions (such as buttons or forms).
**If Copying is Necessary**
Add code to execute interaction events for newly pasted elements using JavaScript.
When adding code, you can execute it using a code mode like the following:
Here's a simple explanation of how to add JavaScript interaction events to elements:
Open the browser's developer tools
Select the target element in the element panel
Check the event listener section: Find the necessary event type
```
Check the related JavaScript logic
```
With these steps, you can add appropriate interaction events to elements.
***
## **Changing Styles**
Element styles can be adjusted within the page editing feature. For example, colors, layouts, fonts, etc. can be changed.
### **When Styles are Not Applied**
#### Main Reasons
CSS specificity (priority) issues
Conflict with existing styles
Selector specification error
#### Recommended Solution
If style adjustments are not reflected, you can directly change the style in CSS code mode and use !important to raise the priority.
Example:
```css
.target-element {
color: blue !important;
font-size: 16px !important;
}
```
## **In Conclusion**
To effectively and safely utilize Ptengine's inline editing feature, it is important to understand how each function works and potential issues. This allows you to avoid common problems and maintain normal website operation and excellent user experience.
Important Notes:
Always back up before performing operations
Perform thorough testing after making changes
By following these principles, you can maximize the use of Ptengine.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://helps.ptengine.com/en/experience/campaign/create-new/notes-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.