如何使用 jquery 在另一個 html 標簽中添加完整的 html

Question

您好，我正在嘗試使用 jquery 為我的 ckeditor 在我的段落中添加完整的 html。您能幫幫我嗎？ 這是我的代碼

<!-- Edit Course level Modal -->
<div class="modal fade full_width_mod" id="crud-modal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog col-md-12">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="courseLevelCrudModal"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <form id="course_form" action="{{ route('course-level.store') }}" method="POST" autocomplete="off" enctype="multipart/form-data">
        <div class="modal-body">
          <input type="hidden" name="course_id" id="course_id">
          @csrf
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <strong>Title</strong>
                <textarea name="meta_title" class="ck_editor form-control" id="meta_title"></textarea>
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <strong>Keywords</strong>
                <textarea name="meta_keywords" class="ck_editor form-control" id="meta_keywords"></textarea>
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <strong>Description</strong>
                <textarea name="meta_description" class="ck_editor form-control" id="meta_description"></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="btn-save" name="btnsave" class="btn btn-primary">Save</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

/* Edit Course Level */
$(document).on('click', '.edit-subject', function() {
  var course_id = $(this).data('id');
  $.get('course-level/' + course_id + '/edit', function(data) {
    $('#courseLevelCrudModal').html("Edit Course Level");
    $('#crud-modal').modal('show');
    $('#course_id').val(data.id);
    $("#meta_title").siblings(".ck-editor")
      .children(".ck-editor__main" )
      .children(".ck-editor__editable")
      .children("p")
      .html(data.meta_title);
    
    $("#meta_keywords").siblings(".ck-editor")
      .children(".ck-editor__main" )
      .children(".ck-editor__editable")
      .children("p")
      .html(data.meta_keywords);

    $("#meta_description").siblings(".ck-editor")
      .children(".ck-editor__main" )
      .children(".ck-editor__editable")
      .children("p")
      .html(data.meta_description);
  })
});

以下是我在“data.meta_description”中獲得的數據

<h1>CS Executive Mod-1</h1>
<div>CS Executive is Second Level of Company Secretary Course. Admission to the CS Executive Course is open throughout the year Students who have passed CSEET (CS foundation) exam is eligible for CS Executive registration and CS Exam is conducted twice in a year in June &amp; December.</div>
<div><br>Eligibility for Admission<br><br></div>
<div>Eligibility or Qualification to registration for CS Executive course: Passing of CS Executive Entrance Test (CSEET) is mandatory for all candidates to register for CS Executive Programme, except a few exempted categories of candidates.</div>
<div>All Graduates/ Post Graduates who were hitherto eligible for registration directly to CS Executive Programme, are also required to pass the CSEET to become eligible for registration to Executive Programme.</div>
<div><br>Registration Fee for CS Executive<br><br></div>
<div>Registration Fee of CS Executive Course Rs.10600 for both Group, 50% rebate in CS Executive Registration fee for SC and ST Category Students.</div>
<div><br>Examination Fee of CS Executive<br><br></div>
<div>Examination Fee of CS Executive Course Rs.1200 for one Group and Rs. 2400 both Group, 50% rebate in CS Executive Registration fee for SC and ST Category Students.</div>
<div><br>Syllabus for CS Executive Course<br><br></div>
<div>Syllabus for CS Executive Course have been divided in two Groups</div>
<div><strong>Module – I</strong></div>
<ol>
  <li>
    <a href="https://toplad.in/cs/paper/jurisprudence-interpretation-&amp;-general-laws-cse-paper-1-cs-executive-module-1">Jurisprudence, Interpretation &amp; General Laws (CSE Paper-1)</a>
  </li>
  <li>
    <a href="https://toplad.in/cs/paper/company-law-cse-paper-2-cs-executive-module-1">Company Law (CSE Paper-2)</a>
  </li>
  <li>
    <a href="https://toplad.in/cs/paper/setting-up-of-business-entities-and-closure-cse-paper-3-cs-executive-module-1">Setting up of Business Entities and Closure (CSE Paper-3)</a>
  </li>
  <li>
    <a href="https://toplad.in/cs/paper/tax-laws-cse-paper-4-cs-executive-module-1">Tax Laws (CSE Paper-4)</a>
  </li>
</ol>
<div><br>Passing Criteria<br><br></div>
<div>CS Executive Examination Passing Criteria: Student be declared ‘PASS’ in CS Executive on securing 40% marks in each paper and 50% marks in the aggregate.</div>
<div><strong>Exemption:</strong> Candidates who have passed the Final Examination of The Institute of Chartered Accountants of India (ICAI) and/or The Institute of Cost Accountants of India (ICMAI) are exempted from CSEET and shall pay `5,000 (Rupees Five Thousand Only) towards exemption fee at the time of Registration to CS Executive Programme.</div>
<div><br></div>

對於我的段落標簽中的這段代碼，只有第一個 header 標簽顯示給我

$("#meta_description").siblings(".ck-editor")
  .children(".ck-editor__main" )
  .children(".ck-editor__editable")
  .children("p")
  .html(data.meta_description);

Answer 1

您應該使用 ckeditor 的方法來設置它的值。 它為這些情況提供了方法setHtml()

// Your names (meta_title, meta_keywords, meta_description) may vary.

CKEDITOR.instances.meta_title.setHtml(data.meta_title);
CKEDITOR.instances.meta_keywords.setHtml(data.meta_keywords);
CKEDITOR.instances.meta_description.setHtml(data.meta_description);