Estoy haciendo un CMS propio (a puro código PHP, nada de frameworks) para administrar el contenido de mi web.
En una sección de la web, se hará una especie de blog. En el panel de administración, este contenido debo agregarlo de forma dinámica, insertando texto e imágenes y tener la opción de mover este contenido, ubicar cada elemento donde quiera y poder ajustar su tamaño. Cada elemento debe ser editable (principalmente el texto) y al final cuando tenga el diseño definitivo, darle a la opción publicar (aun no está hecha esta funcionalidad) y que aparezca en la parte de mi página destinada para este contenido.
He intentado utilizar un poco de JavaScript para lograrlo, pero algunos cosas no funcionan bien. Por ejemplo, el contenido es editable pero para activarlo hay que darle con el click derecho del rato encima, la idea es que se active la edición cuando se le de doble click y poder ampliar o reducir el tamaño de las imágenes y el texto, ajustándolo por sus bordes (algo parecido a las funciones de Word para ajustar imágenes).
Este es mi código hasta ahora:
$(document).ready(function() {
$("#addNewImageBlg").click(function() {
var image_box = "<div id='img_box1' class='ui-widget-content draggable' style='width: 300px;'><img id='img_drag1' width='20%' height='20%' src='preview image'/></div>";
$("#main_col_blog_results").append(image_box);
$(".ui-widget-content").draggable(); // initialize again
});
$("#btnAddTitlesBlog").click(function() {
var title = $("#blog_titles").val();
var letterS = $("#size_letter").val();
var weight = $("#weight_letters").val();
var styles = $("#style_letters").val();
var weight_CSS = "";
var styles_CSS = "";
if (weight == "NOT") {
weight_CSS = "normal";
} else {
weight_CSS = "bold";
}
if (styles == "NOT") {
styles_CSS = "initial";
} else {
styles_CSS = "italic";
}
var content = "<div id='title1' class='ui-widget-content draggable' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px;'><h5 contenteditable='true' style='font-size: " + letterS + "px; font-weight: " + weight_CSS + "; font-style: " + styles_CSS + ";'>" + title + "</h5></div>";
$("#main_col_blog_results").append(content);
$(".ui-widget-content").draggable(); // initialize again
});
$("#btnAddTextsBlog").click(function() {
var texts = $("#blog_text").val();
var content2 = "<div id='text1' class='ui-widget-content draggable' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p contenteditable='true' style='font-size: 18px;'>" + texts + "</p></div>";
$("#main_col_blog_results").append(content2);
$(".ui-widget-content").draggable(); // initialize again
});
$(".ui-widget-content").draggable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-md-2">
<form role="form" method="POST" name="" id="" action="#" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label">Upload an Image </label>
<input class="form-control" type="file" name="img_input" id="img_input" required>
</div>
<div class="tile-footer">
<button class="btn btn-primary" type="button" id="addNewImageBlg"><i class="fa fa-fw fa-lg fa-check-circle"></i>Add</button>
</div>
</form>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Add Title</label>
<input class="form-control" type="text" name="blog_titles" id="blog_titles" required>
</div>
<div class="form-group">
<label class="control-label">Letter Size</label>
<select id="size_letter">
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22" selected>22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="39">30</option>
</select>
</div>
<style type="text/css">
#ksjhfkd {
font-style: :
}
</style>
<div class="form-group">
<label class="control-label">Bold</label>
<input type="checkbox" name="weight_letters" id="weight_letters" value="NOT">
</div>
<div class="form-group">
<label class="control-label">Italic</label>
<input type="checkbox" name="style_letters" id="style_letters" value="NOT">
</div>
<div class="tile-footer">
<button class="btn btn-primary" type="button" id="btnAddTitlesBlog"><i class="fa fa-fw fa-lg fa-check-circle"></i>Add</button>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Text </label>
<textarea class="form-control" type="text" name="blog_text" id="blog_text" required></textarea>
</div>
<div class="tile-footer">
<button class="btn btn-primary" type="button" id="btnAddTextsBlog"><i class="fa fa-fw fa-lg fa-check-circle"></i>Add</button>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12 col-12">
<div class="card" id="BlogEditorOptions">
<div class="card-header">
<h3 class="card-title">Blog Section Results</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row" id="main_row_blog_results">
<div class="col-md-12" id="main_col_blog_results">
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- ./col -->
</div>
Me gustaría saber cómo podría hacer el contenido editable al darle doble click (y no con click derecho del ratón) y autoajustar los tamaños de los elementos.
Cualquier ayuda o sugerencia que puedan darme ya que es la primera vez que intento hacer un editor de este tipo.
setTimeout
para ignorar el primer click en el caso en el cual hay un segundo click en un intervalo de tiempo dado. Recomiendo leer esta respuesta en el SO en inglés. stackoverflow.com/questions/5497073/… No creo que necesites entender ingles para entender de que va