使用codeigniter初始化所见即所得

我正在使用codeigniter，并尝试使用WYSIWYG编辑器将内容传递到数据库

我将所见即所得安装到我的视图中，如下代码所示

    <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>&nbsp;<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>

警告
المنتج


您可以使用javascript和ajax提交表单，这是jquery解决方案的概要

// 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));
        }
     }); 
});