Couldn't display contents of div into the editor

Hi I'm developing a page which contains quill rich text editor. When click Edit button, I'm trying to get the contents from .content Class. After editing, updating the contents into the same .content class through Quill editor.

Yet clearly,

First, I want to edit the contents in the .content class via quill
editor.

Second, I want to update the edited contents into the same .content
class on update button click.

Third, Since i'm going to use this in a conversation, How to
generate editors for each message? So that i can edit all the
message separately. But now i have shown only one message in the
fiddle.

$(function() {

  //Bootstrap tooltip

  $('[data-toggle="tooltip"]').tooltip();

  var toolbarOptions1 = [

    ['bold', 'italic'],

    [{

      'header': 2

    }],

    [{

      'list': 'ordered'

    }, {

      'list': 'bullet'

    }],

    ['clean']

  ];



  var quill1 = new Quill('.conversation-editor', {

    modules: {

      toolbar: toolbarOptions1

    },

    placeholder: 'Compose...',

    theme: 'bubble'

  });



  var justHtmlContent = document.getElementById('justHtml');

  var content = document.getElementsByClassName('content');



  quill1.on('editor-change', function() {

    var justHtml = quill1.root.innerHTML;

    justHtmlContent.innerHTML = justHtml;

  });



  $(".update-conversation-btn").on("click", function() {

    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());

    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();

    $(this).closest(".conversation-right").find(".content").show();

  });



  $(".delete-conversation").on("click", function() {

    $(this).tooltip("hide");

    $(this).closest(".coversation-wrap").remove();

    return false;

  });



  $(".edit-conversation").on("click", function() {

    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();

    $(this).closest(".coversation-wrap").find(".content").hide();

    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());

  });



});

body {

  background: #ccc !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />

<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />

<script src="https://cdn.paperindex.com/js/avatars.js"></script>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-12">

      <div class="coversation-wrap d-flex">

        <div class="coversation-left">

          <img avatar="pk prabu">

        </div>

        <div class="conversation-right w-100">

          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"

              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>

          <h4>Pk prabu</h4>

          <div class="content">

            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>

            <div class="attached"></div>

          </div>

          <p id="justHtml" hidden="hidden"></p>

          <!-- Create the editor container -->

          <input name="editor" type="hidden">

          <div class="conversation-editor-wrp">

            <div class="conversation-editor"></div>

            <div class="d-flex mt-2 justify-content-end">

              <div class="mr-2">

                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>

              </div>

              <div>

                <a href="#" class="conversation-cancel">Cancel</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

asked 7 mins ago

Prabu

New contributor

add a comment |

Yet clearly,

First, I want to edit the contents in the .content class via quill
editor.

Second, I want to update the edited contents into the same .content
class on update button click.

Third, Since i'm going to use this in a conversation, How to
generate editors for each message? So that i can edit all the
message separately. But now i have shown only one message in the
fiddle.

$(function() {

  //Bootstrap tooltip

  $('[data-toggle="tooltip"]').tooltip();

  var toolbarOptions1 = [

    ['bold', 'italic'],

    [{

      'header': 2

    }],

    [{

      'list': 'ordered'

    }, {

      'list': 'bullet'

    }],

    ['clean']

  ];



  var quill1 = new Quill('.conversation-editor', {

    modules: {

      toolbar: toolbarOptions1

    },

    placeholder: 'Compose...',

    theme: 'bubble'

  });



  var justHtmlContent = document.getElementById('justHtml');

  var content = document.getElementsByClassName('content');



  quill1.on('editor-change', function() {

    var justHtml = quill1.root.innerHTML;

    justHtmlContent.innerHTML = justHtml;

  });



  $(".update-conversation-btn").on("click", function() {

    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());

    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();

    $(this).closest(".conversation-right").find(".content").show();

  });



  $(".delete-conversation").on("click", function() {

    $(this).tooltip("hide");

    $(this).closest(".coversation-wrap").remove();

    return false;

  });



  $(".edit-conversation").on("click", function() {

    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();

    $(this).closest(".coversation-wrap").find(".content").hide();

    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());

  });



});

body {

  background: #ccc !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />

<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />

<script src="https://cdn.paperindex.com/js/avatars.js"></script>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-12">

      <div class="coversation-wrap d-flex">

        <div class="coversation-left">

          <img avatar="pk prabu">

        </div>

        <div class="conversation-right w-100">

          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"

              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>

          <h4>Pk prabu</h4>

          <div class="content">

            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>

            <div class="attached"></div>

          </div>

          <p id="justHtml" hidden="hidden"></p>

          <!-- Create the editor container -->

          <input name="editor" type="hidden">

          <div class="conversation-editor-wrp">

            <div class="conversation-editor"></div>

            <div class="d-flex mt-2 justify-content-end">

              <div class="mr-2">

                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>

              </div>

              <div>

                <a href="#" class="conversation-cancel">Cancel</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

asked 7 mins ago

Prabu

New contributor

add a comment |

Yet clearly,

First, I want to edit the contents in the .content class via quill
editor.

Second, I want to update the edited contents into the same .content
class on update button click.

Third, Since i'm going to use this in a conversation, How to
generate editors for each message? So that i can edit all the
message separately. But now i have shown only one message in the
fiddle.

$(function() {

  //Bootstrap tooltip

  $('[data-toggle="tooltip"]').tooltip();

  var toolbarOptions1 = [

    ['bold', 'italic'],

    [{

      'header': 2

    }],

    [{

      'list': 'ordered'

    }, {

      'list': 'bullet'

    }],

    ['clean']

  ];



  var quill1 = new Quill('.conversation-editor', {

    modules: {

      toolbar: toolbarOptions1

    },

    placeholder: 'Compose...',

    theme: 'bubble'

  });



  var justHtmlContent = document.getElementById('justHtml');

  var content = document.getElementsByClassName('content');



  quill1.on('editor-change', function() {

    var justHtml = quill1.root.innerHTML;

    justHtmlContent.innerHTML = justHtml;

  });



  $(".update-conversation-btn").on("click", function() {

    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());

    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();

    $(this).closest(".conversation-right").find(".content").show();

  });



  $(".delete-conversation").on("click", function() {

    $(this).tooltip("hide");

    $(this).closest(".coversation-wrap").remove();

    return false;

  });



  $(".edit-conversation").on("click", function() {

    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();

    $(this).closest(".coversation-wrap").find(".content").hide();

    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());

  });



});

body {

  background: #ccc !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />

<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />

<script src="https://cdn.paperindex.com/js/avatars.js"></script>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-12">

      <div class="coversation-wrap d-flex">

        <div class="coversation-left">

          <img avatar="pk prabu">

        </div>

        <div class="conversation-right w-100">

          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"

              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>

          <h4>Pk prabu</h4>

          <div class="content">

            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>

            <div class="attached"></div>

          </div>

          <p id="justHtml" hidden="hidden"></p>

          <!-- Create the editor container -->

          <input name="editor" type="hidden">

          <div class="conversation-editor-wrp">

            <div class="conversation-editor"></div>

            <div class="d-flex mt-2 justify-content-end">

              <div class="mr-2">

                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>

              </div>

              <div>

                <a href="#" class="conversation-cancel">Cancel</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

asked 7 mins ago

Prabu

New contributor

Yet clearly,

First, I want to edit the contents in the .content class via quill
editor.

Second, I want to update the edited contents into the same .content
class on update button click.

Third, Since i'm going to use this in a conversation, How to
generate editors for each message? So that i can edit all the
message separately. But now i have shown only one message in the
fiddle.

$(function() {

  //Bootstrap tooltip

  $('[data-toggle="tooltip"]').tooltip();

  var toolbarOptions1 = [

    ['bold', 'italic'],

    [{

      'header': 2

    }],

    [{

      'list': 'ordered'

    }, {

      'list': 'bullet'

    }],

    ['clean']

  ];



  var quill1 = new Quill('.conversation-editor', {

    modules: {

      toolbar: toolbarOptions1

    },

    placeholder: 'Compose...',

    theme: 'bubble'

  });



  var justHtmlContent = document.getElementById('justHtml');

  var content = document.getElementsByClassName('content');



  quill1.on('editor-change', function() {

    var justHtml = quill1.root.innerHTML;

    justHtmlContent.innerHTML = justHtml;

  });



  $(".update-conversation-btn").on("click", function() {

    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());

    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();

    $(this).closest(".conversation-right").find(".content").show();

  });



  $(".delete-conversation").on("click", function() {

    $(this).tooltip("hide");

    $(this).closest(".coversation-wrap").remove();

    return false;

  });



  $(".edit-conversation").on("click", function() {

    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();

    $(this).closest(".coversation-wrap").find(".content").hide();

    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());

  });



});

body {

  background: #ccc !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />

<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />

<script src="https://cdn.paperindex.com/js/avatars.js"></script>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-12">

      <div class="coversation-wrap d-flex">

        <div class="coversation-left">

          <img avatar="pk prabu">

        </div>

        <div class="conversation-right w-100">

          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"

              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>

          <h4>Pk prabu</h4>

          <div class="content">

            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>

            <div class="attached"></div>

          </div>

          <p id="justHtml" hidden="hidden"></p>

          <!-- Create the editor container -->

          <input name="editor" type="hidden">

          <div class="conversation-editor-wrp">

            <div class="conversation-editor"></div>

            <div class="d-flex mt-2 justify-content-end">

              <div class="mr-2">

                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>

              </div>

              <div>

                <a href="#" class="conversation-cancel">Cancel</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

$(function() {

  //Bootstrap tooltip

  $('[data-toggle="tooltip"]').tooltip();

  var toolbarOptions1 = [

    ['bold', 'italic'],

    [{

      'header': 2

    }],

    [{

      'list': 'ordered'

    }, {

      'list': 'bullet'

    }],

    ['clean']

  ];



  var quill1 = new Quill('.conversation-editor', {

    modules: {

      toolbar: toolbarOptions1

    },

    placeholder: 'Compose...',

    theme: 'bubble'

  });



  var justHtmlContent = document.getElementById('justHtml');

  var content = document.getElementsByClassName('content');



  quill1.on('editor-change', function() {

    var justHtml = quill1.root.innerHTML;

    justHtmlContent.innerHTML = justHtml;

  });



  $(".update-conversation-btn").on("click", function() {

    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());

    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();

    $(this).closest(".conversation-right").find(".content").show();

  });



  $(".delete-conversation").on("click", function() {

    $(this).tooltip("hide");

    $(this).closest(".coversation-wrap").remove();

    return false;

  });



  $(".edit-conversation").on("click", function() {

    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();

    $(this).closest(".coversation-wrap").find(".content").hide();

    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());

  });



});

body {

  background: #ccc !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />

<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />

<script src="https://cdn.paperindex.com/js/avatars.js"></script>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-12">

      <div class="coversation-wrap d-flex">

        <div class="coversation-left">

          <img avatar="pk prabu">

        </div>

        <div class="conversation-right w-100">

          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"

              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>

          <h4>Pk prabu</h4>

          <div class="content">

            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>

            <div class="attached"></div>

          </div>

          <p id="justHtml" hidden="hidden"></p>

          <!-- Create the editor container -->

          <input name="editor" type="hidden">

          <div class="conversation-editor-wrp">

            <div class="conversation-editor"></div>

            <div class="d-flex mt-2 justify-content-end">

              <div class="mr-2">

                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>

              </div>

              <div>

                <a href="#" class="conversation-cancel">Cancel</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

$(function() {

  //Bootstrap tooltip

  $('[data-toggle="tooltip"]').tooltip();

  var toolbarOptions1 = [

    ['bold', 'italic'],

    [{

      'header': 2

    }],

    [{

      'list': 'ordered'

    }, {

      'list': 'bullet'

    }],

    ['clean']

  ];



  var quill1 = new Quill('.conversation-editor', {

    modules: {

      toolbar: toolbarOptions1

    },

    placeholder: 'Compose...',

    theme: 'bubble'

  });



  var justHtmlContent = document.getElementById('justHtml');

  var content = document.getElementsByClassName('content');



  quill1.on('editor-change', function() {

    var justHtml = quill1.root.innerHTML;

    justHtmlContent.innerHTML = justHtml;

  });



  $(".update-conversation-btn").on("click", function() {

    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());

    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();

    $(this).closest(".conversation-right").find(".content").show();

  });



  $(".delete-conversation").on("click", function() {

    $(this).tooltip("hide");

    $(this).closest(".coversation-wrap").remove();

    return false;

  });



  $(".edit-conversation").on("click", function() {

    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();

    $(this).closest(".coversation-wrap").find(".content").hide();

    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());

  });



});

body {

  background: #ccc !important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />

<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />

<script src="https://cdn.paperindex.com/js/avatars.js"></script>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-12">

      <div class="coversation-wrap d-flex">

        <div class="coversation-left">

          <img avatar="pk prabu">

        </div>

        <div class="conversation-right w-100">

          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"

              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>

          <h4>Pk prabu</h4>

          <div class="content">

            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>

            <div class="attached"></div>

          </div>

          <p id="justHtml" hidden="hidden"></p>

          <!-- Create the editor container -->

          <input name="editor" type="hidden">

          <div class="conversation-editor-wrp">

            <div class="conversation-editor"></div>

            <div class="d-flex mt-2 justify-content-end">

              <div class="mr-2">

                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>

              </div>

              <div>

                <a href="#" class="conversation-cancel">Cancel</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

javascript jquery

asked 7 mins ago

Prabu

New contributor

asked 7 mins ago

Prabu

New contributor

asked 7 mins ago

Prabu

New contributor

asked 7 mins ago

Prabu

asked 7 mins ago

Prabu

New contributor

Prabu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Prabu is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f214377%2fcouldnt-display-contents-of-div-into-the-editor%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

Prabu is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Prabu is a new contributor. Be nice, and check out our Code of Conduct.

Thanks for contributing an answer to Code Review Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

Use MathJax to format equations. MathJax reference.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk