TinyMCE动态HTML值问题

时间:2017-04-10 09:59:38

标签: javascript jquery tinymce tinymce-4

我正在使用TinyMCE来创建丰富的HTML文本区域。我通过将HTML附加到DOM来动态添加一个或多个<textarea>标记。每个<textarea>都插入<li>个标记内。

如何使用jQuery获取textarea的HTML?对于每个tinMCE HTML和BODY标签都有

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

当你在TinyMCE工作时,基础<textarea>没有得到更新。如果您执行普通的HTML表单提交,TinyMCE将在提交过程开始时更新其textarea。如果您需要让TinyMCE在任何其他时间更新其基础<textarea>,您可以致电:

tinyMCE.triggerSave();

这将指示TinyMCE实例将其当前状态推送到基础<textarea>字段。然后,您可以像使用任何其他<textarea>一样使用JavaScript与这些<textarea>字段进行互动。