Question:
Date: 19-12-2018 05:11:09
(In Spanish)
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:
CODIGO JS
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. Votes: 0 - Answers: 2 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
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>
</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>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. Votes: 0 - Answers: 2 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
Date: 20-12-2018 00:32:28 Hola Rolando Tinymce no te sirve?
Te dejo el link a ver si puede servirte
Abrazo Votes: 0 - Link answer -
Date: 20-12-2018 12:20:57 Hola Sebastian Gurdo, buscare información a ver si me sirve Votes: 0 - Link answer
To actively participate in the community first must authenticate, enter the system.Sign In
