Customizable Text Editor JavaScript

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Customizable Text Editor</title>
<style>
body {
  font-family: sans-serif;
}

#editor-container {
  width: 80%;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 10px;
}

#text-area {
  width: 100%;
  height: 300px;
  border: none;
  outline: none;
  padding: 5px;
  font-family: monospace; /* Default monospace font */
  font-size: 14px; /* Default font size */
  line-height: 1.5;
  resize: vertical;
}

#controls {
  margin-bottom: 10px;
}

#font-select, #font-size-select {
  margin-right: 10px;
}

.button {
  padding: 5px 10px;
  margin-right: 5px;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #ccc;
}

.button:hover {
  background-color: #ddd;
}
</style>
</head>
<body>

<div id="editor-container">
  <div id="controls">
    <select id="font-select">
      <option value="monospace">Monospace</option>
      <option value="sans-serif">Sans-Serif</option>
      <option value="serif">Serif</option>
      <option value="Arial">Arial</option>
      <option value="Verdana">Verdana</option>
      <option value="Times New Roman">Times New Roman</option>
    </select>

    <select id="font-size-select">
      <option value="12">12px</option>
      <option value="14" selected>14px</option>
      <option value="16">16px</option>
      <option value="18">18px</option>
      <option value="20">20px</option>
    </select>

    <button class="button" onclick="boldText()"><b>B</b></button>
    <button class="button" onclick="italicText()"><i>I</i></button>
    <button class="button" onclick="underlineText()"><u>U</u></button>

    <button class="button" onclick="alignLeft()">Left</button>
    <button class="button" onclick="alignCenter()">Center</button>
    <button class="button" onclick="alignRight()">Right</button>
    <button class="button" onclick="alignJustify()">Justify</button>

    <input type="color" id="text-color-picker" value="#000000">
    <button class="button" onclick="setTextColor()">Set Text Color</button>

    <button class="button" onclick="clearText()">Clear</button>


  </div>
  <textarea id="text-area"></textarea>
</div>

<script>
const textArea = document.getElementById('text-area');
const fontSelect = document.getElementById('font-select');
const fontSizeSelect = document.getElementById('font-size-select');
const textColorPicker = document.getElementById('text-color-picker');

fontSelect.addEventListener('change', updateFont);
fontSizeSelect.addEventListener('change', updateFontSize);


function updateFont() {
  textArea.style.fontFamily = fontSelect.value;
}

function updateFontSize() {
  textArea.style.fontSize = fontSizeSelect.value + 'px';
}

function boldText() {
    insertTextAroundSelection('<b>', '</b>');
}

function italicText() {
    insertTextAroundSelection('<i>', '</i>');
}

function underlineText() {
    insertTextAroundSelection('<u>', '</u>');
}

function alignLeft() {
    textArea.style.textAlign = 'left';
}

function alignCenter() {
    textArea.style.textAlign = 'center';
}

function alignRight() {
    textArea.style.textAlign = 'right';
}

function alignJustify() {
    textArea.style.textAlign = 'justify';
}


function setTextColor() {
  textArea.style.color = textColorPicker.value;
}

function clearText() {
    textArea.value = '';
}

function insertTextAroundSelection(startTag, endTag) {
    const start = textArea.selectionStart;
    const end = textArea.selectionEnd;
    const selectedText = textArea.value.substring(start, end);
    const newText = textArea.value.substring(0, start) + startTag + selectedText + endTag + textArea.value.substring(end);
    textArea.value = newText;
    textArea.focus();
    textArea.selectionStart = start + startTag.length;
    textArea.selectionEnd = end + startTag.length;

}

</script>

</body>
</html>
```
👁️ Viewed: 9

Comments