Reply to thread

Message

<blockquote data-quote="NEMISIS" data-source="post: 30678612" data-attributes="member: 494668">මේ කමෙන්ට් එක ටයිප් කරන්න මේ වැඩේ කරනවට වඩා වෙලාවක් ගියාPrompt, chatgpt Free1 : I need to create HTML, JS based wysiwyg editor, can you give me html, css, and js code requried for this. 2 : this is very good, can you implement font color and highlight color as wellOutput<img src="https://i.imgur.com/wxtM5KQ.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Code[CODE]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &lt;title&gt;Enhanced WYSIWYG Editor&lt;/title&gt;&nbsp; &lt;style&gt;&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; font-family: Arial, sans-serif;&nbsp; &nbsp; &nbsp; margin: 20px;&nbsp; &nbsp; &nbsp; background: #f9f9f9;&nbsp; &nbsp; }&nbsp; &nbsp; .toolbar {&nbsp; &nbsp; &nbsp; background: #fff;&nbsp; &nbsp; &nbsp; border: 1px solid #ccc;&nbsp; &nbsp; &nbsp; padding: 8px;&nbsp; &nbsp; &nbsp; border-radius: 6px;&nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; &nbsp; gap: 6px;&nbsp; &nbsp; }&nbsp; &nbsp; .toolbar button {&nbsp; &nbsp; &nbsp; background: #f1f1f1;&nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; padding: 6px 10px;&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; }&nbsp; &nbsp; .toolbar button:hover {&nbsp; &nbsp; &nbsp; background-color: #ddd;&nbsp; &nbsp; }&nbsp; &nbsp; .toolbar input[type=&quot;color&quot;] {&nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; width: 30px;&nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; margin-left: 5px;&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; }&nbsp; &nbsp; #editor {&nbsp; &nbsp; &nbsp; border: 1px solid #ccc;&nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; min-height: 300px;&nbsp; &nbsp; &nbsp; background: white;&nbsp; &nbsp; &nbsp; border-radius: 6px;&nbsp; &nbsp; }&nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &lt;div class=&quot;toolbar&quot;&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('bold')&quot;&gt;&lt;b&gt;B&lt;/b&gt;&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('italic')&quot;&gt;&lt;i&gt;I&lt;/i&gt;&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('underline')&quot;&gt;&lt;u&gt;U&lt;/u&gt;&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('insertOrderedList')&quot;&gt;OL&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('insertUnorderedList')&quot;&gt;UL&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('formatBlock', '&lt;h1&gt;')&quot;&gt;H1&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('formatBlock', '&lt;h2&gt;')&quot;&gt;H2&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('createLink', prompt('Enter URL:'))&quot;&gt;🔗&lt;/button&gt;&nbsp; &nbsp; &lt;button onclick=&quot;execCmd('removeFormat')&quot;&gt;🧹&lt;/button&gt;&nbsp; &nbsp; &lt;label&gt;🖍️ Font Color:&nbsp; &nbsp; &nbsp; &lt;input type=&quot;color&quot; onchange=&quot;execCmd('foreColor', this.value)&quot;&gt;&nbsp; &nbsp; &lt;/label&gt;&nbsp; &nbsp; &lt;label&gt;🟨 Highlight:&nbsp; &nbsp; &nbsp; &lt;input type=&quot;color&quot; onchange=&quot;execCmd('hiliteColor', this.value)&quot;&gt;&nbsp; &nbsp; &lt;/label&gt;&nbsp; &lt;/div&gt;&nbsp; &lt;div id=&quot;editor&quot; contenteditable=&quot;true&quot;&gt;&nbsp; &nbsp; &lt;p&gt;Start editing...&lt;/p&gt;&nbsp; &lt;/div&gt;&nbsp; &lt;script&gt;&nbsp; &nbsp; function execCmd(command, value = null) {&nbsp; &nbsp; &nbsp; document.execCommand(command, false, value);&nbsp; &nbsp; }&nbsp; &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]</blockquote>

[QUOTE="NEMISIS, post: 30678612, member: 494668"] මේ කමෙන්ට් එක ටයිප් කරන්න මේ වැඩේ කරනවට වඩා වෙලාවක් ගියා Prompt, chatgpt Free 1 : I need to create HTML, JS based wysiwyg editor, can you give me html, css, and js code requried for this. 2 : this is very good, can you implement font color and highlight color as well Output [img]https://i.imgur.com/wxtM5KQ.png[/img] Code [CODE]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Enhanced WYSIWYG Editor</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background: #f9f9f9; } .toolbar { background: #fff; border: 1px solid #ccc; padding: 8px; border-radius: 6px; margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .toolbar button { background: #f1f1f1; border: none; padding: 6px 10px; cursor: pointer; border-radius: 4px; } .toolbar button:hover { background-color: #ddd; } .toolbar input[type="color"] { border: none; width: 30px; height: 30px; padding: 0; margin-left: 5px; cursor: pointer; } #editor { border: 1px solid #ccc; padding: 10px; min-height: 300px; background: white; border-radius: 6px; } </style> </head> <body> <div class="toolbar"> <button onclick="execCmd('bold')">B</button> <button onclick="execCmd('italic')">I</button> <button onclick="execCmd('underline')">U</button> <button onclick="execCmd('insertOrderedList')">OL</button> <button onclick="execCmd('insertUnorderedList')">UL</button> <button onclick="execCmd('formatBlock', '<h1>')">H1</button> <button onclick="execCmd('formatBlock', '<h2>')">H2</button> <button onclick="execCmd('createLink', prompt('Enter URL:'))">🔗</button> <button onclick="execCmd('removeFormat')">🧹</button> <label>🖍️ Font Color: <input type="color" onchange="execCmd('foreColor', this.value)"> </label> <label>🟨 Highlight: <input type="color" onchange="execCmd('hiliteColor', this.value)"> </label> </div> <div id="editor" contenteditable="true"> Start editing... </div> <script> function execCmd(command, value = null) { document.execCommand(command, false, value); } </script> </body> </html>[/CODE] [/QUOTE]

Verification

Hathara warak wissa keeyada? (Hathara wadi karanna 20)

Search

Latest ads

Reply to thread