intigrate wysiwyg with codeigniter - codeigniter

Question

I'm using codeigniter and trying to pass content to the database using the WYSIWYG editor.
I installed the WYSIWYG into my VIEW like the below code.
<div class="blank">
<div class="blank-page">
<!------------- syam bek-------------->
<?php if(!empty($error)): ?>
<div class="alert alert-warning">
<strong>Warning!</strong> <?php echo $error; ?>
</div>
<?php endif;?>
<?php if(!empty($products)):?>
<?php $ver=array('id'=>'try','name'=>'try','class'=>'form-horizontal'); ?>
<?php echo form_open_multipart(base_url().'editproduct/edit',$ver);?>
<label>المنتج
<br>
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product" onchange="[document.try.action='editproduct/show',document.try.submit()]">
<?php
if (count($products)>1) {
echo '<option selected></option>';
foreach ($products as $p):
echo "<option value ='$p->p_id'>" . $p->p_name . "</option>";
endforeach;
}
elseif(count($products)==1){
foreach ($products as $p):
echo "<option selected value ='$p->p_id'>" . $p->p_name . "</option>";
endforeach;
}
?>
</select>
<?php if(count($products)==1){
$name=$p->p_name;
$details=$p->details;
$price=$p->p_price;
}else{
$name="";
$details="";
$price="";
}
?>
</label>
</br>
<label>اسم المنتج
<input type="text" name="name" value="<?php echo $name;?>" class="form-control"/>
</label>
<br>
<label>تفاصيل للمنتج
<input type="text" name="details" value="<?php echo $details;?>" class="form-control" />
</label>
<br>
<label>سعر المنتج
<input type="text" name="price" value="<?php echo $price;?>" class="form-control" />
</label>
<br>
<br>
<br>
<div class="container">
<div class="hero-unit">
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
</div>
</div>
</div>
<button class="btn btn-warning" name="cancel" >الغاء</button>
<button type="submit" name="save" class="btn btn-primary">حفظ</button>
<button type="submit" name="del" class="btn btn-danger">حذف المنتج</button>
<?php echo form_close();?>
<?php else :?>
<?php echo "لايوجد منتجات ليتم التعديل عليها";?>
<?php endif;?>
</div>
</div>
check i trace the inspector from the broswer i found insertion happens in the <div id="editor">HERE</div>
i don't know to pass the DIV contents to the database, especially the DIV element not identified by name like other elements.
Thanks

Answer 1

You can use javascript and ajax to submit your form, this is rough outline of jquery solution
// listen for submit event on your form
$( "#try" ).submit(function( event ) {
event.preventDefault();
let content = $('#editor').val(); // get the value from the editor
let details = $("input[name='details']").val() // get the value of input with the name of 'details'
... // do the same for all other inputs
// validate inputs if desired
if(content == '') {
// for example do something if content is empty
return;
}
// collect all input data into one object
var data = {
content: content,
details: details,
...
}
// send ajax request to the server
$.ajax({
url : 'urlToYourBackendEndpoint',
type : 'POST',
data : data,
success : function(response) {
// check the response and redirect or show notice after submit here
},
error : function(request,error)
{
alert("Request: "+JSON.stringify(request));
}
});
});