Fatal编程技术网
  • javascript/
  • Javascript 我想以PDF格式打印TinyMCE区域的内容

Javascript 我想以PDF格式打印TinyMCE区域的内容

javascript html tinymce

Javascript 我想以PDF格式打印TinyMCE区域的内容,javascript,html,tinymce,jspdf,Javascript,Html,Tinymce,Jspdf,好的，我有一个项目的想法，在这个项目中，我想以不同于将要打印的顺序来写一个项目。例如：按3,1,2顺序书写，但按1,2,3顺序打印。这样做的目的是以有意义的顺序撰写科学项目和文章，以使写作更容易。我已经使用HTML和TinyMCE文本区域创建了一个表单 这是我正在使用的代码： <script src="https://cdn.tiny.cloud/1/b9w5wbhhiy67clv3p6t1cmtyjia9h9g3b2ggjq3vil7ge215/tinymce/5/tinymce.min

好的，我有一个项目的想法，在这个项目中，我想以不同于将要打印的顺序来写一个项目。例如：按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>


tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink列出链接图像charmap打印预览锚”，
“searchreplace visualblocks代码全屏显示”，
“insertdatetime媒体表上下文菜单粘贴”
],
工具栏：“插入文件撤消重做|样式选择|粗体斜体|对齐左对齐中心对齐右对齐对齐对齐|粗体numlist outdent缩进|链接图像”，
设置：函数（编辑器）{
on（'init'，function（）{
this.setContent（'init函数知道调用它的编辑器是在哪个编辑器上-这是针对'+editor.id'）；
});
}
});
这将创建两个（很多）格式丰富的文本区域，但是，我无法提取文本区域的内容并将其放入PDF，即打印为空

这是一个文本区域的JS代码：


$（“#按钮”）。单击（函数（）{
var doc=新的jsPDF（'p'，'pt'，'a4'）；
var obj_g=$（'#editor1'）.val（）；
文件setFontSize（12）；
setTextColor文件（92,92,92）；
文件文本（23、41、obj_g）；
doc.save（'projeto.pdf'）；
});
如何在TinyMCE中提取文本区域的内容并在PDF中打印

提前感谢

您非常接近。只需调用
tinyMCE.triggerSave（）.val（）
函数之前，请执行code>，因为tinyMCE不会保存它生成的textarea值，直到调用
.triggerSave（）
方法

<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>


$（“#按钮”）。单击（函数（）{
tinyMCE.triggerSave（）；//添加此行
var doc=新的jsPDF（'p'，'pt'，'a4'）；
var obj_g=$（'#editor1'）.val（）；
文件setFontSize（12）；
setTextColor文件（92,92,92）；
文件文本（23、41、obj_g）；
doc.save（'projeto.pdf'）；
});
更新日期：2020年4月14日：

下面是我的完整工作代码，但您可以在代码底部找到脚本部分，其中包括如何解决您上一条评论中的两个问题（在triggerSave（）之后将HTML格式保留为PDF格式，以及为PDF内容设置页边距）。下面的代码包括一个经过修改的解决方案，以适合Well Wisher在此提供的代码： 


tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink列出链接图像charmap打印预览锚”，
“searchreplace visualblocks代码全屏显示”，
“insertdatetime媒体表上下文菜单粘贴”
],
工具栏：“插入文件撤消重做|样式选择|粗体斜体|对齐左对齐中心对齐右对齐对齐对齐|粗体numlist outdent缩进|链接图像”，
设置：函数（编辑器）{
on（'init'，function（）{
this.setContent（'init函数知道调用它的编辑器是在哪个编辑器上-这是针对'+editor.id'）；
});
}
});
$（“#按钮”）。单击（函数（）{
tinyMCE.triggerSave（）；//添加此行
var doc=新的jsPDF（'p'，'pt'，'a4'）；
var obj_g=tinyMCE.get（'editor1'）.getContent（）；//使用此tinyMCE-getContent方法获取编辑器内容
//请参阅“祝福者”的参考资料：https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library
var保证金={
前50名，
底数：50，
左:50,，
宽度：800
};
doc.fromHTML(
obj_g，//HTML字符串或DOM元素引用。
margins.left，//x坐标
margins.top，{//y坐标
“宽度”：margins.width，//PDF上内容的最大宽度
},
功能（处置）{
//dispose：将最后一行的X，Y添加到PDF中的对象
//这允许在html之后插入新行
doc.save（'projeto.pdf'）；
}，利润率
);
});
参考资料：

你非常接近。只需调用
tinyMCE.triggerSave（）.val（）
函数之前，请执行code>，因为tinyMCE不会保存它生成的textarea值，直到调用
.triggerSave（）
方法

<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>


$（“#按钮”）。单击（函数（）{
tinyMCE.triggerSave（）；//添加此行
var doc=新的jsPDF（'p'，'pt'，'a4'）；
var obj_g=$（'#editor1'）.val（）；
文件setFontSize（12）；
setTextColor文件（92,92,92）；
文件文本（23、41、obj_g）；
doc.save（'projeto.pdf'）；
});
更新日期：2020年4月14日：

下面是我的完整工作代码，但您可以在代码底部找到脚本部分，其中包括如何解决您上一条评论中的两个问题（在triggerSave（）之后将HTML格式保留为PDF格式，以及为PDF内容设置页边距）。下面的代码包括一个经过修改的解决方案，以适合Well Wisher在此提供的代码： 


tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink列出链接图像charmap打印预览锚”，
“searchreplace visualblocks代码全屏显示”，
“insertdatetime媒体表上下文菜单粘贴”
],
工具栏：“插入文件撤消重做|样式选择|粗体斜体|对齐左对齐中心对齐右对齐对齐对齐|粗体numlist outdent缩进|链接图像”，
设置：函数（编辑器）{
on（'init'，function（）{
this.setContent（'init函数知道调用它的编辑器是在哪个编辑器上-这是针对'+editor.id'）；
});
}
});
$（“#按钮”）。单击（函数（）{
tinyMCE.triggerSave（）；//添加此行
var doc=新的jsPDF（'p'，'pt'，'，