CODEWITHSUNDEEP
javascriptjquerytinymcetinymce-4
James
James

Reputation: 311

TinyMCE dynamic HTML value issue

I am using TinyMCE for rich HTML text area. I am adding one or more <textarea> tags dynamically by appending HTML to the DOM. Each <textarea> is inserted inside <li> tags.

How can I get the textarea's HTML using jQuery?. For each tinMCE HTML and BODY tags are there

<html>

<head>
  <style id="mceDefaultStyles" type="text/css">
    .mce-content-body div.mce-resizehandle {
      position: absolute;
      border: 1px solid black;
      box-sizing: box-sizing;
      background: #FFF;
      width: 7px;
      height: 7px;
      z-index: 10000
    }
    
    .mce-content-body .mce-resizehandle:hover {
      background: #000
    }
    
    .mce-content-body img[data-mce-selected],
    .mce-content-body hr[data-mce-selected] {
      outline: 1px solid black;
      resize: none
    }
    
    .mce-content-body .mce-clonedresizable {
      position: absolute;
      opacity: .5;
      filter: alpha(opacity=50);
      z-index: 10000
    }
    
    .mce-content-body .mce-resize-helper {
      background: #555;
      background: rgba(0, 0, 0, 0.75);
      border-radius: 3px;
      border: 1px;
      color: white;
      display: none;
      font-family: sans-serif;
      font-size: 12px;
      white-space: nowrap;
      line-height: 14px;
      margin: 5px 10px;
      padding: 5px;
      position: absolute;
      z-index: 10001
    }
    
    .mce-visual-caret {
      position: absolute;
      background-color: black;
      background-color: currentcolor;
    }
    
    .mce-visual-caret-hidden {
      display: none;
    }
    
    *[data-mce-caret] {
      position: absolute;
      left: -1000px;
      right: auto;
      top: 0;
      margin: 0;
      padding: 0;
    }
    
    .mce-content-body .mce-offscreen-selection {
      position: absolute;
      left: -9999999999px;
      max-width: 1000000px;
    }
    
    .mce-content-body *[contentEditable=false] {
      cursor: default;
    }
    
    .mce-content-body *[contentEditable=true] {
      cursor: text;
    }
    
    img:-moz-broken {
      -moz-force-broken-image-icon: 1;
      min-width: 24px;
      min-height: 24px
    }
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="http://localhost:62993/Content/tinymce/skins/lightgray/content.min.css">
  <link type="text/css" rel="stylesheet" href="http://localhost:62993/News/css/example.css">
</head>

<body id="tinymce" class="mce-content-body arn_richclass" data-id="txtID0" spellcheck="false" contenteditable="true">
  <p>Test<br data-mce-bogus="1"></p>
</body>

</html>

Upvotes: 0

Views: 1308

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

While you are working in TinyMCE the underlying <textarea> does not get updated. If you perform a normal HTML form submit TinyMCE will update its textarea at the start of the submit process. If you need to get TinyMCE to update its underlying <textarea> at any other time you can call:

tinyMCE.triggerSave();

This will instruct the TinyMCE instances to push their current state into the underlying <textarea> fields. You can then use JavaScript to interact with those <textarea> fields as you would any other <textarea>.

Upvotes: 1

Related Questions