Я пытаюсь использовать TinyMCE для форматирования HTML, который затем можно просмотреть и отобразить на той же веб-странице.Затем мне нужно перехватить этот html, чтобы преобразовать вывод в изображение JPG / PNG.
Я дошел до настройки tinyMCE и отображения «контента» посредством отправки формы.Но я не могу поймать это.Веб-страница
tinymce.init({
selector: 'textarea.tinymce',
height : 500,
removed_menuitems: 'undo, redo'
});
$(document).ready(function(){
$("#get-data-form").submit(function(e){
var content = tinymce.get("texteditor").getContent();
$("#data-container").html(content);
return false;
});
});
body {
background-color:#e1e1e1;
font-family: 'Roboto Slab', serif;
padding:0;
margin:80px;
}
table {
width:100%;
padding:0;
margin:0;
}
table td {
border:1px solid #666666;
width:50%;
vertical-align: top;
padding:0;
margin:0;
}
textarea {
padding:0;
margin:0;
}
h1 {
color: #666666;
margin: 0px;
}
.posterPrev {
width:324px;
height:486px;
background-color: #fff;
margin:20px;
text-align: center;
}
.header {
height:36px;
background-color: #c1c1c1;
}
.footer {
height:54px;
background-color: #c1c1c1;
}
#data-content {
height:486px;
background-color: #999999;
margin:0;
padding:100 40 20 40;
display:block;
}
#data-container {
margin:0;
padding:0;
}
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE - Setup</title>
<!-- javascript -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script>
<script type="text/javascript" src="plugin/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="js/getdata.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="formatting.css">
</head>
<body>
<table class="prevFrame">
<tr><td >
<form id="get-data-form" method="post">
<textarea class="tinymce" id="texteditor"></textarea>
<input type="submit" value="Preview">
</form>
</td>
<td>
<div id="poster-div" class="posterPrev">
<div class="header">header</div>
<div id="data-content">
<div id="data-container"></div>
</div>
<div class="footer">footer</div>
</div>
</td></tr>
</table>
</body>
</html>
Веб-страница выглядит следующим образом Тестовая веб-страница
Что работает нормально.Но я не могу захватить контент из TinyMCE, когда он отображается в контейнере div.Я хотел бы захватить DIV-контейнеры для создания «статичной» головы и ног вместе с контентом tinyMCE - любые предложения.Конечным результатом является отправка захваченного HTML-кода для преобразования его в формат JPG / PNG. Изображение должно использоваться в базовой системе отображения, которая не позволяет форматировать текст, но может отображать изображение.