New question

Question:

Date: 19-12-2018 05:11:09 (In Spanish)

Cómo hacer texto editable, draggable y autoajustar su tamaño con JQUERY y PHP (PHP CMS)[Unresolved]

stoy haciendo un CMS propio (a puro codigo PHP, nada de frameworks) para administrar el contenido de mi web.
En una seccion de la web, se hara 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 esta hecha esta funcionalidad) y que aparezca en la parte de mi pagina 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 imagenes y el texto, ajustandolo por sus bordes (algo parecido a las funciones de word para ajustar imagenes).

Este es mi código hasta ahora:

CODIGO HTML:

<!-- /.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>&nbsp;&nbsp;&nbsp;
                                </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>&nbsp;&nbsp;&nbsp;
                                </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>&nbsp;&nbsp;&nbsp;
                                </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>


CODIGO JS

 $(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();

								});


Me gustaria 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. O mejor aun, si conocen de algun plugin o herramienta open source que haga todo esto (por ejemplo Editor ya creado del cual me pueda guiar y que su contenido sea editable y draggable) y así facilitar un poco la codificación.
Cualquier ayuda o sugerencia que puedan darme ya que es la primera vez que intento hacer un editor de este tipo.
Tags: AJAX - CMS - CSS - CSS3 - CSS3 @media - Database - Development - Drag and Drop - Framework - HTML - HTML5 - Input - Javascript - JQuery - MySQL - MySQL Developing - Opinion - PHP - PHP Advanced - PHP MySQLi - PHP PDO - PHP7 - Query - Question - Rich Text Editor - SQL - Start in Programming - Suggestion - The Community - Web Votes: 0 - Answers: 2 - Views: 11 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

To actively participate in the community first must authenticate, enter the system.Sign In