Javascript TinyMCE显示为A4

我有一个TinyMCE编辑器在我的网站上，我想有编辑区（或整个东西）显示在A4格式

基本上，我希望以与MS Word相同的方式查看文档。（宽度、分页符等）

---

这可能吗？请给我指出正确的方向。

这是可能的，但难度大，容易出错，而且您无法接近Word。也许你可以用一种左右的字体把它弄好

你需要做的是一个和一个。模板应类似于灰色背景，带有白色页面（带有阴影：）。定义一些按钮，使用Javascript将自定义类添加到模板中，您将获得边距设置（窄、宽、正常、无值）。对于分页符，您可以插入一个特殊的

，将基础页面模板的样式设置为“结束，另一个开始”。请记住，您将不得不替换几乎所有的自定义CSS，以使其可以打印。此外，您应该使tinymce全屏显示

我见过的另一种（非常奇怪的）方法是tinymce和PDF或同等文件的组合。这样你就能得到所见即所得

---

希望这能有所帮助。

每个人都说这很难，但谷歌已经在谷歌文档中做到了（提示：你可以使用谷歌API，甚至可以获得文档的PDF版本。我没有这样做，因为我们需要编辑器中的额外功能。）

这是我的解决方案：

我已将页面调整为A4宽度

添加了一个标尺，显示页面剩余多少（显然不是100%可靠，但很接近）。甚至还有页码！对! 想法：

标尺比试图显示每一页要容易得多，这意味着要分割内容。。。这将是毒品虽然。。。我曾尝试使用css剪辑制作完整的A4页面，但这会干扰文本选择，所以我不知道。。。我希望我能做到，但是

我之所以在HTML标记中使用SVG，是因为它是我唯一可以放在那里的东西。。。如果你选择TinyMCE中的所有文本，你可以擦除我的标尺，甚至复制粘贴。。。即使您使用contenteditable=“false”。。。选择是有限的

请参见我的解决方案：

//插件pravítko
tinymce.PluginManager.add（'ruler'，函数（编辑器）{
var-domHtml；
分页符；
函数refreshRuler（）
{
控制台日志（“ddd”）；
试一试{
domHtml=$（editor.getDoc（）.getElementsByTagName（'HTML'）[0]）；
//黑客-删除这个，我必须把我的CSS放在这里
log（$（'tinystyle'）.html（））；
find（'head'）.append（$（''+$（'tinystyle'）.html（）+''）；
}捕获（e）{
返回setTimeout（刷新标尺，50）；
}
变量dpi=96
var-cm=dpi/2.54；
var a4px=cm*（29.7-5.7）；//px中的A4高度，-5.5是我在PDF打印中的附加页边距
//标尺开始（在px中）
var startMargin=4；
//max size（以px为单位）=文档大小+额外大小可以肯定，idk，由于某种原因，高度太小了
var imgH=domHtml.height（）+a4px*5；
var pageBreakHeight=14；//tinyMce中分页符行的高度
var pageBreaks=[]；
domHtml.find（'.mce pagebreak'）。每个（函数（）{
pageBreaks[pageBreaks.length]=$（this.offset（）.top；
});
pageBreaks.sort（）；
//如果pageBreak离下一页太近，则忽略它
if（lastPageBreaks==pageBreaks）{
return；//没有变化
}
lastPageBreaks=分页符；
控制台日志（“重画标尺”）；
var s=''；
s+=''；
s+=''；
s+='.pageNumber{字体大小：粗体；字体大小：19px；字体系列：verdana；文本阴影：1px 1px 1px rgba（0,0,0,6）；}'；
s+=''；
var pages=Math.ceil（imgH/a4px）；
变量i，j，curY=起始边缘；
因为（i=0；i我修改了马丁的尺子。谢谢

//插件pravítko，由SerhatSoylemez修改
添加（“编辑器标尺”，函数（编辑器）{
var-domHtml；
分页符；
var pagen=tinymce.util.I18n.translate（“p.”）；
函数refreshRuler（）{
试一试{
domHtml=$（editor.getDoc（）.getElementsByTagName（'HTML'）[0]）；
}捕获（e）{
返回setTimeout（刷新标尺，50）；
}
变量dpi=96
var-cm=dpi/2.54；
var a4px=cm*（29.7）；//px中的A4高度，-5.5是我的PDF打印中的附加页边距
//标尺开始（在px中）
var startMargin=0；
//max size（以px为单位）=文档大小+额外大小可以肯定，idk，由于某种原因，高度太小了
var imgH=domHtml.height（）+a4px*5；
var pageBreakHeight=4；//tinyMce中分页符行的高度
var pageBreaks=[]；//我用.pagebreak更改了.mce pagebreak！！！
domHtml.find（'.page break'）。每个（函数（）{
pageBreaks[pageBreaks.length]=$（this.offset（）.top；
});
pageBreaks.sort（）；
//如果pageBreak离下一页太近，则忽略它
if（lastPageBreaks==pageBreaks）{
return；//没有变化
}
lastPageBreaks=分页符；
//控制台日志（“重画标尺”）；
var s=''；
s+=''；
s+=''；
s+='.pageNumber{字体大小：粗体；字体大小：20px；字体系列：verdana；文本阴影：1px 1px 1px rgba（0,0,0,6）；}'；
s+=''；
var pages=Math.ceil（imgH/a4px）；
变量i，j，curY=起始边缘；
对于（i=0；iHey，感谢您分享这一点，但是当我初始化一个新的tinymce实例时，插件似乎没有加载。对此有什么帮助吗？
// plugin pravítko
    tinymce.PluginManager.add('ruler', function(editor) {

        var domHtml;
        var lastPageBreaks;

        function refreshRuler()
        {
  console.log("ddd");
            try {
        domHtml = $( editor.getDoc().getElementsByTagName('HTML')[0] );

       // HACK - erase this, I have to put my CSS here
       console.log($('tinystyle').html() );
       domHtml.find('head').append( $('<style>'+$('tinystyle').html()+'</style>'));

            } catch (e) {
                return setTimeout(refreshRuler, 50);
            }

            var dpi = 96
            var cm = dpi/2.54;
            var a4px = cm * (29.7-5.7); // A4 height in px, -5.5 are my additional margins in my PDF print

            // ruler begins (in px)
            var startMargin = 4;

            // max size (in px) = document size + extra to be sure, idk, the height is too small for some reason
            var imgH = domHtml.height() + a4px*5;

            var pageBreakHeight = 14; // height of the pagebreak line in tinyMce

            var pageBreaks = [];
            domHtml.find('.mce-pagebreak').each(function(){
                pageBreaks[pageBreaks.length] = $(this).offset().top;
            });
            pageBreaks.sort();

            // if pageBreak is too close next page, then ignore it

            if (lastPageBreaks == pageBreaks) {
                return; // no change
            }
            lastPageBreaks = pageBreaks;

            console.log("Redraw ruler");

            var s = '';
            s+= '<svg width="100%" height="'+imgH+'" xmlns="http://www.w3.org/2000/svg">';

            s+= '<style>';
            s+= '.pageNumber{font-weight:bold;font-size:19px;font-family:verdana;text-shadow:1px 1px 1px rgba(0,0,0,.6);}';
            s+= '</style>';

            var pages = Math.ceil(imgH/a4px);

            var i, j, curY = startMargin;
            for (i=0; i<pages; i++)
            {
                var blockH = a4px;

                var isPageBreak = 0;
                for (var j=0; j<pageBreaks.length; j++) {
                    if (pageBreaks[j] < curY + blockH) {
                        // musime zmensit velikost stranky
                        blockH = pageBreaks[j] - curY;
                        // pagebreak prijde na konec stranky
                        isPageBreak = 1;
                        pageBreaks.splice(j, 1);
                    }
                }

                s+= '<line x1="0" y1="'+curY+'" x2="100%" y2="'+curY+'" stroke-width="1" stroke="red"/>';

                // zacneme pravitko
                s+= '<pattern id="ruler'+i+'" x="0" y="'+curY+'" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse">';
                s+= '<line x1="0" y1="0" x2="100%" y2="0" stroke-width="1" stroke="black"/>';
                s+= '</pattern>';
                s+= '<rect x="0" y="'+curY+'" width="100%" height="'+blockH+'" fill="url(#ruler'+i+')" />';

                // napiseme cislo strany
                s+= '<text x="10" y="'+(curY+19+5)+'" class="pageNumber" fill="#ffffff">'+(i+1)+'.</text>';

                curY+= blockH;
                if (isPageBreak) {
                    //s+= '<rect x="0" y="'+curY+'" width="100%" height="'+pageBreakHeight+'" fill="#FFFFFF" />';
                    curY+= pageBreakHeight;
                }
            }

            s+= '</svg>';

            domHtml.css('background-image', 'url("data:image/svg+xml;utf8,'+encodeURIComponent(s)+'")');
        }
        editor.on('NodeChange', refreshRuler);
        editor.on("init", refreshRuler);

    });

tinymce.init({
plugins: "ruler pagebreak",
toolbar1: "pagebreak",
selector: 'textarea',
height: 300
});

// plugin pravítko, modified by SerhatSoylemez
tinymce.PluginManager.add("editor-ruler", function(editor) {

  var domHtml;
  var lastPageBreaks;
  var pagen= tinymce.util.I18n.translate("p.");

  function refreshRuler() {
    try {
      domHtml = $(editor.getDoc().getElementsByTagName('HTML')[0]);
    } catch (e) {
      return setTimeout(refreshRuler, 50);
    }

    var dpi = 96
    var cm = dpi/2.54;
    var a4px = cm * (29.7); // A4 height in px, -5.5 are my additional margins in my PDF print

    // ruler begins (in px)
    var startMargin = 0;

    // max size (in px) = document size + extra to be sure, idk, the height is too small for some reason
    var imgH = domHtml.height() + a4px*5;

    var pageBreakHeight = 4; // height of the pagebreak line in tinyMce

    var pageBreaks = [];  // I changed .mce-pagebreak with .page-break !!!
    domHtml.find('.page-break').each(function() {
      pageBreaks[pageBreaks.length] = $(this).offset().top;
    });

    pageBreaks.sort();

    // if pageBreak is too close next page, then ignore it
    if (lastPageBreaks == pageBreaks) {
      return; // no change
    }

    lastPageBreaks = pageBreaks;

    // console.log("Redraw ruler");

    var s = '';
    s+= '<svg width="100%" height="'+imgH+'" xmlns="http://www.w3.org/2000/svg">';

    s+= '<style>';
    s+= '.pageNumber{font-weight:bold;font-size:20px;font-family:verdana;text-shadow:1px 1px 1px rgba(0,0,0,.6);}';
    s+= '</style>';

    var pages = Math.ceil(imgH/a4px);

    var i, j, curY = startMargin;
    for (i=0; i<pages; i++) {
      var blockH = a4px;

      var isPageBreak = 0;
      for (var j=0; j<pageBreaks.length; j++) {
        if (pageBreaks[j] < curY + blockH) {

          // musime zmensit velikost stranky
          blockH = pageBreaks[j] - curY;

          // pagebreak prijde na konec stranky
          isPageBreak = 1;
          pageBreaks.splice(j, 1);
        }
      }

      curY2 = curY+38;
      s+= '<line x1="0" y1="'+curY2+'" x2="100%" y2="'+curY2+'" stroke-width="1" stroke="red"/>';

      // zacneme pravitko
      s+= '<pattern id="ruler'+i+'" x="0" y="'+curY+'" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse">';
      s+= '<line x1="0" y1="0" x2="100%" y2="0" stroke-width="1" stroke="black"/>';
      s+= '<line x1="24" y1="0" x2="0" y2="100%" stroke-width="1" stroke="black"/>';
      s+= '</pattern>';
      s+= '<rect x="0" y="'+curY+'" width="100%" height="'+blockH+'" fill="url(#ruler'+i+')" />';

      // napiseme cislo strany
      s+= '<text x="10" y="'+(curY2+19+5)+'" class="pageNumber" fill="#e03e2d">'+pagen+(i+1)+'.</text>';

      curY+= blockH;
      if (isPageBreak) {
        //s+= '<rect x="0" y="'+curY+'" width="100%" height="'+pageBreakHeight+'" fill="#ffffff" />';
        curY+= pageBreakHeight;
      }
    }

    s+= '</svg>';

    domHtml.css('background-image', 'url("data:image/svg+xml;utf8,'+encodeURIComponent(s)+'")');
  }

  function deleteRuler() {

    domHtml.css('background-image', '');
  }

  var toggleState = false;

  editor.on("NodeChange", function () {
    if (toggleState == true) {
      refreshRuler();
    }
  });


  editor.on("init", function () {
    if (toggleState == true) {
      refreshRuler();
    }
  });

  editor.ui.registry.addIcon("square_foot", '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">'+
  '<g><rect fill="none" height="24" width="24"/></g><g><g><path d="M17.66,17.66l-1.06,1.06l-0.71-0.71l1.06-1.06l-1.94-1.94l-1.06,1.06l-0.71-0.71'+
  'l1.06-1.06l-1.94-1.94l-1.06,1.06 l-0.71-0.71l1.06-1.06L9.7,9.7l-1.06,1.06l-0.71-0.71l1.06-1.06L7.05,7.05L5.99,8.11L5.28,7.4l1.06-1.06L4,4'+
  'v14c0,1.1,0.9,2,2,2 h14L17.66,17.66z M7,17v-5.76L12.76,17H7z"/></g></g></svg>');

  editor.ui.registry.addToggleMenuItem("ruler", {
    text: "Show ruler",
    icon: "square_foot",
    onAction: function() {
      toggleState = !toggleState;
      if (toggleState == false) {
        deleteRuler();
      } else {
        refreshRuler();
      }
    },
    onSetup: function(api) {
      api.setActive(toggleState);
      return function() {};
    }
  });

});

function loadJavascript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}
loadJavascript("https://code.jquery.com/jquery-3.5.1.min.js");