JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p id="editableArea" contentEditable="true">
... some text to edit;
</p>

<div class="contentEditableMenu">
<table width="0%" border="0" cellspacing="0" cellpadding="1">
	  <tbody>
	    <tr>
	      <td><select name="font-family" id="font-family"><option value="Arial" style="font-family:Arial !important;">Arial</option><option value="Helvetica" style="font-family:Helvetica !important;">Helvetica</option><option value="Tahoma" style="font-family:Tahoma !important;">Tahoma</option><option value="courier" style="font-family:courier !important;">courier</option><option value="Abel" style="font-family:Abel !important;">Abel</option><option value="Fira Sans Condensed" style="font-family:Fira Sans Condensed !important;">Fira Sans Condensed</option><option value="Fredoka One" style="font-family:Fredoka One !important;">Fredoka One</option><option value="Libre Franklin" style="font-family:Libre Franklin !important;">Libre Franklin</option><option value="Montserrat" style="font-family:Montserrat !important;">Montserrat</option><option value="Poppins" style="font-family:Poppins !important;">Poppins</option><option value="Questrial" style="font-family:Questrial !important;">Questrial</option><option value="Righteous" style="font-family:Righteous !important;">Righteous</option><option value="Roboto Mono" style="font-family:Roboto Mono !important;">Roboto Mono</option><option value="Roboto" style="font-family:Roboto !important;">Roboto</option><option value="Russo One" style="font-family:Russo One !important;">Russo One</option><option value="Secular One" style="font-family:Secular One !important;">Secular One</option></select></td>
	      
	      <td colspan="2"><input type="color" name="font-color" id="font-color"></td>
	      <td><img class="btn" id="align-left" src="https://agrisphere-training.com/clientPortal/includes/allSafe/forms/assets/align-left-icon.png" /></td>
	      <td><img...

CSS

.contentEditableMenu{

}
.contentEditableMenu select{
	width:86px;
  padding:2px;
}
.contentEditableMenu input[type="number"]{
	width:86px;
  padding:2px;
}
.contentEditableMenu input[type="color"]{
	width:58px;
	padding:0px;
	height:24px;
}
.contentEditableMenu>table{

}
.contentEditableMenu>table select{

}
.contentEditableMenu>table select{

}
.contentEditableMenu>table img.btn{
	width:16px;
  border:solid 1px #ccc;
  padding:5px;
  background-color: #ddd;
  cursor: pointer;
}

JavaScript

var editorDoc;
			
var editor = document.getElementById("editableArea");

if (editor.contentDocument)
  editorDoc = editor.contentDocument;
else
  editorDoc = editor.contentWindow.document;

var editorBody = t.editorDoc.body;

// turn off spellcheck
if ('spellcheck' in editorBody) {    // Firefox
  editorBody.spellcheck = false;
}

if ('contentEditable' in editorBody) {
  // allow contentEditable
  editorBody.contentEditable = true;
}
else {  // Firefox earlier than version 3
  if ('designMode' in t.editorDoc) {
    // turn on designMode
   editorDoc.designMode = "on";                
  }
}

alert($('img').length);

$('img').click(function(e){

alert("GOOD");

	editorDoc.execCommand ('bold', false, null);
  
  e.stopPropagation();

});

/*
const selection = Window.getSelection();
if (selection) { 
  const size = window.getComputedStyle(selection.anchorNode.parentElement, null).getPropertyValue('font-size');
}
*/