我想打印一个TinyMCE区域的内容
我想打印一个TinyMCE区域的内容
提问于 2020-04-13 06:12:39
好的，我有一个项目的想法，我想要写一个项目的顺序，不同于将要打印的顺序。例如:以3,1,2的顺序写作，但以1,2,3的顺序打印。这样的想法是以有意义的顺序写科学项目和文章，使其更容易写。我已经创建了一个使用HTML和TinyMCE文本区的表单。
这是我使用的代码：
<script src="https://cdn.tiny.cloud/1/b9w5wbhhiy67clv3p6t1cmtyjia9h9g3b2ggjq3vil7ge215/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
setup: function(editor) {
editor.on('init', function() {
this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
});
}
});
</script>
<body>
<form method="post">
<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>
</form>
<input type="button" id="button" value="Gerar Projeto em PDF" />
</body>这将创建两个(许多)具有丰富格式的文本区域，但是，我无法提取文本区域的内容并将其放入PDF中，即为空打印。
这是一个文本区域的JS代码：
<script>
$('#button').click(function() {
var doc = new jsPDF('p', 'pt', 'a4');
var obj_g = $('#editor1').val();
doc.setFontSize(12);
doc.setTextColor(92, 92, 92);
doc.text(23, 41, obj_g);
doc.save('projeto.pdf');
});
</script>如何提取TinyMCE格式的文本内容并打印出来？
提前感谢
回答 1
Stack Overflow用户
发布于 2020-04-13 07:10:38
你已经很接近了。只需在调用.val()函数之前调用tinyMCE.triggerSave();，因为直到您调用.triggerSave()方法，tinyMCE才会保存它生成的文本区的值。
<script>
$('#button').click(function() {
tinyMCE.triggerSave(); // Add this line
var doc = new jsPDF('p', 'pt', 'a4');
var obj_g = $('#editor1').val();
doc.setFontSize(12);
doc.setTextColor(92, 92, 92);
doc.text(23, 41, obj_g);
doc.save('projeto.pdf');
});
</script>2020年4月14日更新：
下面是我完整的工作代码，但你可以在代码的底部找到脚本部分，其中包括如何解决上一条评论中的两个问题(在triggerSave()之后保留PDF中的超文本标记语言格式以及设置PDF内容的边距)。下面的代码包含一个经过修改的解决方案，以适合Well Wisher在此处提供的代码：How to properly use jsPDF library
<!DOCTYPE html>
<body>
<form method="post">
<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>
</form>
<input type="button" id="button" value="Gerar Projeto em PDF" />
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdn.tiny.cloud/1/b9w5wbhhiy67clv3p6t1cmtyjia9h9g3b2ggjq3vil7ge215/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
setup: function(editor) {
editor.on('init', function() {
this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
});
}
});
</script>
<script>
$('#button').click(function() {
tinyMCE.triggerSave(); // Add this line
var doc = new jsPDF('p', 'pt', 'a4');
var obj_g = tinyMCE.get('editor1').getContent(); // Use this tinyMCE getContent method to get the editor content
// See Reference from Well Wisher: https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library
var margins = {
top: 50,
bottom: 50,
left: 50,
width: 800
};
doc.fromHTML(
obj_g, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
doc.save('projeto.pdf');
}, margins
);
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61178891
复制相关文章
相似问题
腾讯云开发者
