קוד לעורך טקסט בhtml - שמישהו שלח לי - אולי יהיה שימושי למישהו
-
קוד לעורך טקסט בhtml - מקור לא ידוע
צריך כמה תיקונים אבל בגדול עובד.<!DOCTYPE html> <html> <head> <title>Text Editor</title> <style> body { margin: 0; padding: 0; font-family: 'Noto Sans Hebrew', Arial, sans-serif; background-color: #f0f0f0; /* Light gray background for the entire page */ } #editor-container { margin: 50px auto; /* Center the editor container horizontally and provide top margin */ width: 793px; /* Fixed width for the editor */ height: 410px; /* Fixed height for the editor */ border: 1px solid #ccc; padding: 20px; /* Add margins here */ background-color: #fff; /* White content area background */ overflow: auto; /* Enable vertical scrolling */ margin-top: 100px; /* Adjust the margin-top to move the editor lower */ } #editor:focus { outline: none; /* Remove the default focus outline */ /* You can add additional styles or borders here as needed */ } .floating-toolbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; border-bottom: 1px solid #ccc; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); z-index: 1000; display: flex; align-items: center; /* Vertically center the items within the toolbar */ justify-content: center; /* Horizontally center the items within the toolbar */ } .button-container { display: flex; flex-wrap: wrap; /* Allow buttons to wrap to the next line */ justify-content: center; /* Center-align the buttons horizontally */ gap: 5px; padding: 5px 0; /* Adjust top and bottom padding to center vertically */ } .button { font-size: 14px; background-color: #eee; color: #333; border: none; border-radius: 5px; cursor: pointer; min-width: 30px; padding: 5px; /* Add padding to match the size */ } .button:hover { background-color: #ccc; } .underline-button { text-decoration: underline; } .dropdown select { padding: 5px; font-size: 14px; background-color: #eee; color: #333; border: none; border-radius: 5px; cursor: pointer; } .color-dropdown { position: relative; } .color-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100px; /* Set a fixed width for the dropdown list */ max-height: 100px; /* Limit the height of the dropdown */ overflow-y: auto; /* Enable vertical scrolling */ border: 1px solid #ccc; z-index: 1; } .color-dropdown-content button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background-color: transparent; cursor: pointer; } .color-dropdown-content button:hover { background-color: #ddd; } /* Add Hebrew fonts here */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew&display=swap'); /* Media query for smaller screens */ @media (max-width: 480px) { .button-container { flex-direction: column; /* Stack buttons vertically */ align-items: center; /* Center-align buttons vertically */ } } .label-font-size { padding: 5px 10px; /* Adjust the padding as needed */ line-height: 1; /* Set line-height to 1 for vertical centering */ } </style> </head> <body> <div class="floating-toolbar"> <div class="button-container"> <button class="button" onclick="formatText('bold')" title="Bold (Ctrl+B)">B</button> <button class="button" onclick="formatText('italic')" title="Italic (Ctrl+I)">I</button> <button class="button underline-button" onclick="formatText('underline')" title="Underline (Ctrl+U)">U</button> <button class="button" onclick="toggleJustify()" title="Justify">J</button> <button class="button" onclick="alignText('left')" title="Left Align">L</button> <button class="button" onclick="alignText('center')" title="Center Align">C</button> <button class="button" onclick="alignText('right')" title="Right Align">R</button> <div class="dropdown"> <select id="styleDropdown" onchange="formatHeader()" title="Style"> <option value="hidden" disabled selected style="display:none">Style</option> <option value="normal">Normal</option> <option value="h1">H1</option> <option value="h2">H2</option> <option value="h3">H3</option> <option value="h4">H4</option> <option value="h5">H5</option> <option value="h6">H6</option> </select> </div> <div class="dropdown"> <select id="fontDropdown" onchange="changeFont()" title="Font"> <option value="Arial">Arial</option> <option value="Helvetica">Helvetica</option> <option value="Verdana">Verdana</option> <option value="Georgia">Georgia</option> <option value="Times New Roman">Times New Roman</option> <option value="Courier New">Courier New</option> <option value="Arial Black">Arial Black</option> <option value="Impact">Impact</option> <option value="Lucida Console">Lucida Console</option> <option value="Tahoma">Tahoma</option> <option value="Trebuchet MS">Trebuchet MS</option> <option value="Palatino Linotype">Palatino Linotype</option> <!-- Change "Frank Ruhl Libre" to "FrankRuhl" --> <option value="FrankRuhl">Frank Ruhl</option> <!-- Add Hebrew fonts below --> <option value="David">David</option> <option value="Narkisim">Narkisim</option> <option value="Hadassa">Hadassa</option> </select> </div> <!-- Added buttons for creating HTML lists --> <button class="button" onclick="createUnorderedList()" title="Unordered HTML List"><b>•</b></button> <button class="button" onclick="createOrderedList()" title="Ordered HTML List">1.2.3.</button> <!-- RTL button --> <button class="button" onclick="toggleRTL()" title="Toggle Right-to-Left">RTL</button> <!-- HR button --> <button class="button" onclick="insertHorizontalRule()" title="Insert Horizontal Line">HR</button> <!-- Text Color dropdown --> <div class="color-dropdown"> <button class="button" onclick="toggleTextColorDropdown()" title="Text Color">Text Color</button> <div class="color-dropdown-content" id="textColorDropdown"> <button onclick="changeTextColor('black')" style="color: black;">Black</button> <button onclick="changeTextColor('red')" style="color: red;">Red</button> <button onclick="changeTextColor('green')" style="color: green;">Green</button> <button onclick="changeTextColor('blue')" style="color: blue;">Blue</button> <button onclick="changeTextColor('purple')" style="color: purple;">Purple</button> <button onclick="changeTextColor('orange')" style="color: orange;">Orange</button> <button onclick="changeTextColor('yellow')" style="color: yellow;">Yellow</button> <button onclick="changeTextColor('pink')" style="color: pink;">Pink</button> <button onclick="changeTextColor('brown')" style="color: brown;">Brown</button> <button onclick="changeTextColor('gray')" style="color: gray;">Gray</button> <button onclick="changeTextColor('lightblue')" style="color: lightblue;">Light Blue</button> <button onclick="changeTextColor('lightgreen')" style="color: lightgreen;">Light Green</button> <button onclick="changeTextColor('teal')" style="color: teal;">Teal</button> <button onclick="changeTextColor('indigo')" style="color: indigo;">Indigo</button> <button onclick="changeTextColor('violet')" style="color: violet;">Violet</button> </div> </div> <!-- Highlight Color dropdown --> <div class="color-dropdown"> <button class="button" onclick="toggleHighlightColorDropdown()" title="Highlight Text">Highlight</button> <div class="color-dropdown-content" id="highlightColorDropdown"> <button onclick="highlightText('yellow')" style="background-color: #ffffcc;">Yellow</button> <button onclick="highlightText('lightgreen')" style="background-color: #ccffcc;">Light Green</button> <button onclick="highlightText('lightpink')" style="background-color: #ffcce6;">Light Pink</button> <button onclick="highlightText('lightblue')" style="background-color: #cce6ff;">Light Blue</button> <button onclick="highlightText('lightorange')" style="background-color: #ffe6cc;">Light Orange</button> <button onclick="highlightText('lightpurple')" style="background-color: #e6ccff;">Light Purple</button> <button onclick="highlightText('lightgray')" style="background-color: #f2f2f2;">Light Gray</button> <button onclick="highlightText('white')" style="background-color: #ffffff; color: #000000;">White</button> </div> </div> <!-- Remove Formatting button --> <button class="button" onclick="removeFormatting()" title="Remove Color">Remove Formatting</button> <button class="button" onclick="formatText('superscript')" title="Superscript">Sup</button> <button class="button" onclick="formatText('subscript')" title="Subscript">Sub</button> <button class="button" onclick="increaseIndent()" title="Increase Indent">⭲</button> <button class="button" onclick="decreaseIndent()" title="Decrease Indent">⭰</button> <!-- Font size buttons --> <label for="fontSizeSpan" class="label-font-size">Font Size:</label> <button class="button" onclick="changeFontSize('increase')" title="Increase Font Size">+</button> <button class="button" onclick="changeFontSize('decrease')" title="Decrease Font Size">-</button> <!-- Spacing between paragraphs buttons --> <label for="spacingBetweenParagraphs" class="label-font-size">Spacing:</label> <button class="button" onclick="changeSpacing('increase')" title="Increase Spacing">+</button> <button class="button" onclick="changeSpacing('decrease')" title="Decrease Spacing">-</button> <!-- Add Link button --> <button class="button add-link-button" title="Add Link">🔗</button> <button class="button" onclick="exportHTML()" title="Export HTML">Export HTML</button> <button class="button" onclick="exportToTxt()" title="Export to TXT">Export As Code</button> <!-- Add this button for exporting HTML --> </div> </div> <div id="editor-container"> <div id="editor" contenteditable="true" onkeypress="handleKeyPress(event)"> <!-- Automatically start with a <p> tag --> <p>Start typing here...</p> </div> </div> <script> let isJustified = false; let isRTL = false; function formatText(command) { document.execCommand(command, false, null); } function toggleJustify() { isJustified = !isJustified; document.execCommand(isJustified ? 'justifyFull' : 'justifyLeft', false, null); } function alignText(align) { document.execCommand('justify' + align, false, null); isJustified = false; } function formatHeader() { const styleDropdown = document.getElementById('styleDropdown'); const selectedStyle = styleDropdown.value; if (selectedStyle === 'normal') { document.execCommand('formatBlock', false, 'p'); } else if (selectedStyle) { document.execCommand('formatBlock', false, selectedStyle); } styleDropdown.selectedIndex = 0; } function changeFont() { const fontDropdown = document.getElementById('fontDropdown'); const selectedFont = fontDropdown.value; document.execCommand('fontName', false, selectedFont); } function createUnorderedList() { document.execCommand("insertUnorderedList"); } function createOrderedList() { document.execCommand("insertOrderedList"); } function handleKeyPress(event) { if (event.keyCode === 13) { // Enter key document.execCommand('insertHTML', false, '<p><br></p>'); event.preventDefault(); } } function insertHorizontalRule() { document.execCommand('insertHorizontalRule', false, null); } function toggleRTL() { isRTL = !isRTL; const editorContainer = document.getElementById('editor-container'); editorContainer.style.direction = isRTL ? 'rtl' : 'ltr'; } function toggleTextColorDropdown() { const textColorDropdown = document.getElementById('textColorDropdown'); textColorDropdown.style.display = (textColorDropdown.style.display === 'block') ? 'none' : 'block'; } function changeTextColor(color) { document.execCommand("foreColor", false, color); toggleTextColorDropdown(); // Close the dropdown } function toggleHighlightColorDropdown() { const highlightColorDropdown = document.getElementById('highlightColorDropdown'); highlightColorDropdown.style.display = (highlightColorDropdown.style.display === 'block') ? 'none' : 'block'; } function highlightText(color) { document.execCommand("hiliteColor", false, color); toggleHighlightColorDropdown(); // Close the dropdown } function removeFormatting() { document.execCommand("removeFormat", false, null); } function increaseIndent() { document.execCommand("indent", false, null); } function decreaseIndent() { document.execCommand("outdent", false, null); } function changeFontSize(action) { const editor = document.getElementById('editor'); const selectedText = document.getSelection(); const span = document.createElement('span'); if (action === 'increase') { span.style.fontSize = 'larger'; } else if (action === 'decrease') { span.style.fontSize = 'smaller'; } if (!selectedText.isCollapsed) { const range = selectedText.getRangeAt(0); range.surroundContents(span); } } function changeSpacing(action) { const editor = document.getElementById('editor'); const selectedParagraphs = document.querySelectorAll('#editor p'); selectedParagraphs.forEach(paragraph => { let currentMargin = parseInt(window.getComputedStyle(paragraph).marginBottom); if (action === 'increase') { currentMargin += 5; // Increase spacing by 5px } else if (action === 'decrease') { currentMargin -= 5; // Decrease spacing by 5px } paragraph.style.marginBottom = currentMargin + 'px'; }); } function exportHTML() { // Get the content of the editor const editorContent = document.getElementById('editor').innerHTML; // Create a new window or tab to preview the HTML content const previewWindow = window.open('', '_blank'); // Create a blob containing the editor's HTML content const blob = new Blob([editorContent], { type: 'text/html' }); // Create a URL for the blob const url = URL.createObjectURL(blob); // Create an anchor element to trigger the download const a = document.createElement('a'); a.href = url; a.download = 'exported_text.html'; // Define the file name // Create a button to allow the user to download the HTML const downloadButton = document.createElement('button'); downloadButton.textContent = 'Download HTML'; downloadButton.style.position = 'absolute'; // Set the button position to absolute downloadButton.style.top = '10px'; // Adjust the top position as needed downloadButton.style.left = '10px'; // Adjust the left position as needed downloadButton.onclick = () => { // Trigger a click event on the anchor element to start the download a.click(); // Clean up by revoking the blob URL URL.revokeObjectURL(url); }; // Append the download button to the preview window previewWindow.document.body.appendChild(downloadButton); // Write the editor's HTML content to the new window previewWindow.document.open(); previewWindow.document.write(editorContent); previewWindow.document.close(); } // Function to create a link using selected text or prompt for text and link address function createLink() { const selectedText = document.getSelection().toString(); let linkText = selectedText; let linkURL = ''; if (!selectedText) { linkText = prompt('Enter the text for the link:'); if (!linkText) { return; // Cancelled by the user } } linkURL = prompt('Enter the link address:'); if (!linkURL) { return; // Cancelled by the user } const linkHTML = `<a href="${linkURL}" target="_blank">${linkText}</a>`; document.execCommand('insertHTML', false, linkHTML); } // Add event listener for the "Add Link" button document.querySelector('.button.add-link-button').addEventListener('click', createLink); function exportToTxt() { // Get the editor content const editorContent = document.getElementById('editor').innerHTML; // Create a Blob containing the content and specify the MIME type as plain text const blob = new Blob([editorContent], { type: 'text/plain' }); // Create a download link for the Blob const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'exported_text.txt'; // Trigger a click event on the link to start the download a.click(); // Release the object URL to free up resources URL.revokeObjectURL(url); } </script> </body> </html> -
גירסה אחרת שמצאתי שעובדת על בסיס קידוד ישיר
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Editor</title> <style> body { background-color: #f0f0f0; /* Light gray background color */ margin: 0; padding: 0; } /* Container for the editor */ .editor-container { display: flex; height: 100vh; margin: 20px; /* Margin around the entire editor */ } /* Style for the code input textarea */ #codeInput { flex: 1; border: 1px solid #ccc; padding: 10px; margin-right: 10px; /* Margin between input and output */ } /* Style for the output frame */ #outputFrame { flex: 1; border: 1px solid #ccc; padding: 10px; background-color: #f5f5f5; /* Very light gray background color */ } </style> </head> <body> <div class="editor-container"> <!-- Left Box for Direct Editing --> <textarea id="codeInput" contenteditable="true"></textarea> <!-- Right Box for Code Display --> <iframe id="outputFrame"></iframe> </div> <script> // Get references to the textarea and the outputFrame const codeInput = document.getElementById('codeInput'); const outputFrame = document.getElementById('outputFrame'); // Function to update the outputFrame with HTML code from codeInput function updateOutput() { const code = codeInput.value; outputFrame.contentDocument.open(); outputFrame.contentDocument.write(code); outputFrame.contentDocument.close(); } // Update the output whenever there is a change in the codeInput codeInput.addEventListener('input', updateOutput); // You can initially load some sample code into the codeInput if needed codeInput.value = 'This text will change the formatting in the right box.'; updateOutput(); // Update the output initially </script> </body> </html>גמ"ח מידע מחשבים ואופיס
-
גירסה אחרת שמצאתי שעובדת על בסיס קידוד ישיר
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Editor</title> <style> body { background-color: #f0f0f0; /* Light gray background color */ margin: 0; padding: 0; } /* Container for the editor */ .editor-container { display: flex; height: 100vh; margin: 20px; /* Margin around the entire editor */ } /* Style for the code input textarea */ #codeInput { flex: 1; border: 1px solid #ccc; padding: 10px; margin-right: 10px; /* Margin between input and output */ } /* Style for the output frame */ #outputFrame { flex: 1; border: 1px solid #ccc; padding: 10px; background-color: #f5f5f5; /* Very light gray background color */ } </style> </head> <body> <div class="editor-container"> <!-- Left Box for Direct Editing --> <textarea id="codeInput" contenteditable="true"></textarea> <!-- Right Box for Code Display --> <iframe id="outputFrame"></iframe> </div> <script> // Get references to the textarea and the outputFrame const codeInput = document.getElementById('codeInput'); const outputFrame = document.getElementById('outputFrame'); // Function to update the outputFrame with HTML code from codeInput function updateOutput() { const code = codeInput.value; outputFrame.contentDocument.open(); outputFrame.contentDocument.write(code); outputFrame.contentDocument.close(); } // Update the output whenever there is a change in the codeInput codeInput.addEventListener('input', updateOutput); // You can initially load some sample code into the codeInput if needed codeInput.value = 'This text will change the formatting in the right box.'; updateOutput(); // Update the output initially </script> </body> </html>קוד לקבלת קידוד של טקסט Html מעוצב
<!DOCTYPE html> <html> <head> <title>HTML TO CODE</title> <style> body { margin-left: 100px; margin-right: 100px; } .container { display: flex; flex-direction: column; text-align: right; .editor-container, .output-container { width: 100%; height: 200px; border: 1px solid #ccc; padding: 20px; background-color: #fff; margin: 10px 0; /* margin for spacing between the containers */ overflow: auto; text-align: right; } .editor { text-align: right; } </style> </head> <body> <div class="container"> <label>:קלט</label> <div class="editor-container"> <div id="editor" contenteditable="true" oninput="updateOutput()"></div> </div> <label>פלט</label> <div class="output-container"> <div id="output"></div> </div> </div> <script> function updateOutput() { const editorContent = document.getElementById('editor').innerHTML; document.getElementById('output').textContent = editorContent; } </script> </body> </html> -
גירסה אחרת שמצאתי שעובדת על בסיס קידוד ישיר
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Editor</title> <style> body { background-color: #f0f0f0; /* Light gray background color */ margin: 0; padding: 0; } /* Container for the editor */ .editor-container { display: flex; height: 100vh; margin: 20px; /* Margin around the entire editor */ } /* Style for the code input textarea */ #codeInput { flex: 1; border: 1px solid #ccc; padding: 10px; margin-right: 10px; /* Margin between input and output */ } /* Style for the output frame */ #outputFrame { flex: 1; border: 1px solid #ccc; padding: 10px; background-color: #f5f5f5; /* Very light gray background color */ } </style> </head> <body> <div class="editor-container"> <!-- Left Box for Direct Editing --> <textarea id="codeInput" contenteditable="true"></textarea> <!-- Right Box for Code Display --> <iframe id="outputFrame"></iframe> </div> <script> // Get references to the textarea and the outputFrame const codeInput = document.getElementById('codeInput'); const outputFrame = document.getElementById('outputFrame'); // Function to update the outputFrame with HTML code from codeInput function updateOutput() { const code = codeInput.value; outputFrame.contentDocument.open(); outputFrame.contentDocument.write(code); outputFrame.contentDocument.close(); } // Update the output whenever there is a change in the codeInput codeInput.addEventListener('input', updateOutput); // You can initially load some sample code into the codeInput if needed codeInput.value = 'This text will change the formatting in the right box.'; updateOutput(); // Update the output initially </script> </body> </html>@pcinfogmach
זה מה שעשיתי מזה https://795697842.000webhostapp.com/CreatingHtml -
@pcinfogmach
זה מה שעשיתי מזה https://795697842.000webhostapp.com/CreatingHtml@121244 כתב בקוד לעורך טקסט בhtml - שמישהו שלח לי - אולי יהיה שימושי למישהו:
@pcinfogmach
זה מה שעשיתי מזה https://795697842.000webhostapp.com/CreatingHtmlמדהים!
אגב צריך לסדר את הגודל של הלחצנים בסרגל
שלום! נראה שהשיחה הזו מעניינת אותך, אבל עדיין אין לך חשבון.
נמאס לכם לגלול בין אותם הפוסטים בכל ביקור? כשנרשמים לחשבון, תמיד תחזרו בדיוק למקום שבו הייתם קודם, ותוכלו לבחור לקבל התראות על תגובות חדשות (בין אם במייל, ובין אם בהתראת פוש). תוכלו גם לשמור סימניות ולפרגן ב-upvote לפוסטים כדי להביע הערכה לחברי קהילה אחרים.
בעזרת התרומה שלך, הפוסט הזה יכול להיות אפילו טוב יותר 💗
הרשמה התחברות