Estoy creando un editor de contenido, parecido a este editor de stack donde escribimos nuestras preguntas, con casi las mismas opciones para insertar imagenes, links, opción para poner texto negrita, cursiva, centrado, alineado a la izquierda o derecha, entre otras opciones. Dentro de mi editor habrán estos elementos html: h1, h3, p, a, es decir el usuario podrá insertar título con h1 y h3, insertar párrafo con p y links en etiqueta a. Tengo cada elemento por separado y los agrego dinamicamente. Cuando el usuario da click en el botón h1, se inserta automaticamente un elemento h1. El usuario puede editarlo dando doble click encima de este, entonces si el usuario escribe texto allí y luego quiere seleccionar un fragmento de ese texto y ponerlo negrita o cursiva, Cómo podría hacerlo? Que me detecte el texto seleccionado y al hacer click en el botón negrita, me le aplique, tal vez que me encierre ese texto seleccionado por ejemplo en un o con css le haga un font-weight... Algo así parecido, la idea es que sea solo al texto seleccionado.
Si de esta forma no es óptimo. Qué otra opción me recomendarían para lograr esto? Lo que quiero es tener la opción de poder poner parte del texto en negrita o cursiva, o aumentarle el tamaño de letra, o cambiarle el tipo de letra.
Aquí dejo un código de ejemplo:
$(document).ready(function(){
$("#btnAddTitle").click(function(){
var contador = $("#contador").val();
var id = parseInt(contador) + 1;
$("#contenedor").append("<h1 contenteditable='true' id='titulo-"+ id +"'>Titulo 1</h1>");
});
$("#btnAddSubtitle").click(function(){
var contador = $("#contador").val();
var id = parseInt(contador) + 1;
$("#contenedor").append("<h3 contenteditable='true' id='subtitulo-"+ id +"'>Titulo 3</h3>");
});
$("#btnAddText").click(function(){
var contador = $("#contador").val();
var id = parseInt(contador) + 1;
$("#contenedor").append("<p contenteditable='true' id='p-"+ id +"'>Parrafo</p>");
});
$("#btnAddLink").click(function(){
var contador = $("#contador").val();
var id = parseInt(contador) + 1;
$("#contenedor").append("<a contenteditable='true' id='a-"+ id +"'>Link</a>");
});
});
.Toolbar-container
{
border: 1px solid grey;
width: 90%;
display: block;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.Text-container
{
width: 90%;
display: block;
border: 1px solid grey;
padding: 30px;
}
.btn
{
border: none;
background-color: transparent;
text-align: center;
font-size: 16px;
}
select
{
border: none;
font-size: 16px;
font-family:'FontAwesome';
width: 150px;
}
#font-size-title
{
border: none;
width: 40px;
font-size: 16px;
}
#color-title
{
width: 20px;
}
#height-img, #width-img
{
border-radius: 5px;
text-align: center;
}
#img-sizes
{
margin-left: 5px;
}
#btnAddTitle, #btnAddSubtitle, #btnAddText
{
font-family: 'Times New Roman', Times, serif;
}
.tooltip
{display:none;
position:absolute;
background:white;
border:1px black solid;
border-radius:8px;
padding:8px;}
.tooltip img{float:left;margin:0 8px 8px 0;}
a:hover+.tooltip,.tooltip:hover{display:block;}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="Toolbar-container">
<span>
<span>
<button id="btnAddTitle" class="btn"><b>H1</b></button>
</span>
<span>
<button id="btnAddSubtitle" class="btn">H3</button>
</span>
<span>
<button id="btnAddText" class="btn"><i class="fa fa-file-text-o"></i> Text</button>
</span>
<span>
<button id="btnAddImg" class="btn"><i class="fa fa-picture-o"></i></button>
</span>
<span>
<button id="btnAddLink" class="btn"><i class="fa fa-link"></i></button>
</span>
</span>
<span class="divider">|</span>
<span>
<span>
<select class="font-familys" title="Fonts" id="font-family-title">
<option value="" selected> Fonts</option>
<option value="Arial, Helvetica, sans-serif">Arial Helvetica</option>
<option value="‘Arial Black’, Gadget, sans-serif">Arial Black Gadget</option>
<option value="‘Bookman Old Style’, serif">Bookman Old Style</option>
<option value="Garamond, serif">Garamond</option>
<option value="Georgia, serif">Georgia</option>
<option value="‘Comic Sans MS’, cursive">Comic Sans MS cursive</option>
<option value="Courier, monospace">Courier monospace</option>
<option value="‘Courier New’, Courier, monospace">Courier New Courier monospace</option>
<option value="Impact, Charcoal, sans-serif">Impact Charcoal</option>
<option value="‘Lucida Console’, Monaco, monospace">Lucida Console Monaco monospace</option>
<option value="‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif">Lucida Sans Unicode</option>
<option value="‘MS Sans Serif’, Geneva, sans-serif">MS Sans Serif Geneva</option>
<option value="‘MS Serif’, ‘New York’, sans-serif">MS Serif New York</option>
<option value="‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif">Palatino Linotype</option>
<option value="Symbol, sans-serif"> Symbol, sans-serif</option>
<option value="Tahoma, Geneva, sans-serif"> Tahoma Geneva</option>
<option value="‘Times New Roman’, Times, serif">Times New Roman</option>
<option value="‘Trebuchet MS’, Helvetica, sans-serif">Trebuchet MS Helvetica</option>
<option value="Verdana, Geneva, sans-serif">Verdana Geneva</option>
<option value="Webdings, sans-serif">Webdings</option>
<option value="Wingdings, ‘Zapf Dingbats’, sans-serif">Wingdings Zapf Dingbats</option>
</select>
</span>
<span>
<input type="number" id="font-size-title" min="14" max="100" value="34">
</span>
</span>
<span class="divider">|</span>
<span>
<span>
<button id="font-weight-title" class="btn"><i class="fa fa-bold"></i></button>
<input type="hidden" id="valueB" value="inactive">
</span>
<span>
<button id="font-style-title" class="btn"><i class="fa fa-italic"></i></button>
<input type="hidden" id="valueI" value="inactive">
</span>
<span>
<button id="subline" class="btn"><i class="fa fa-underline"></i></button>
<input type="hidden" id="valueS" value="inactive">
</span>
<span>
<input type="color" id="color-title" class="btn" value="#000002"><i class="fa fa-font" id="colo_icons"></i>
<input type="hidden" id="valueA" value="inactive">
</span>
<span>
<button id="left-aligne" class="btn"><i class="fa fa-align-left"></i></button>
<input type="hidden" id="valueLL" value="inactive">
</span>
<span>
<button id="center-aligne" class="btn"> <i class="fa fa-align-center"></i></button>
<input type="hidden" id="valueLC" value="inactive">
</span>
<span>
<button id="right-aligne" class="btn"><i class="fa fa-align-right"></i></button>
<input type="hidden" id="valueLR" value="inactive">
</span>
<span>
<button id="justify-aligne" class="btn"><i class="fa fa-align-justify"></i></button>
<input type="hidden" id="valueLJ" value="inactive">
</span>
</span>
<span class="divider">|</span>
<span id="img-sizes">
<span>
<i class="fa fa-text-width"></i> <input type="number" id="width-img" min="20" max="2000" value="200">
</span>
<span>
<i class="fa fa-text-height"></i> <input type="number" id="height-img" min="20" max="2000" value="200">
</span>
</span>
</div>
<input type="hidden" id="contador" value="0">
<div class="Text-container" id="contenedor">
<p id="text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus, metus a placerat facilisis, nibh quam scelerisque felis, quis auctor ipsum metus vitae tellus. Pellentesque et ipsum hendrerit lacus consectetur aliquet et sed tortor. Sed tincidunt pulvinar condimentum. Proin condimentum lectus eu tortor tempor vehicula. Proin fermentum porta metus, a pharetra tellus bibendum vel. Etiam nec leo felis. Nulla et libero vel nunc consectetur suscipit vitae eu diam. Curabitur magna erat, feugiat non mattis dictum, interdum non est. Donec purus urna, venenatis a scelerisque ac, iaculis adipiscing augue. Aliquam pharetra, lorem non condimentum luctus, odio magna lacinia nunc, eget gravida magna est at purus. Nunc volutpat elementum velit eget aliquet. Integer aliquet, ipsum in interdum consequat, tortor felis dictum lorem, nec congue quam lacus a lacus. Sed sed tellus nibh, sed porta quam. Nulla pulvinar neque non leo sodales eu tempus mi vulputate.</p>
<br>
</div>