我的网站上有一个 TinyMCE 编辑器，我希望以 A4 格式显示可编辑区域(或整个区域)。

基本上，我想以与在 MS Word 中相同的方式查看文档。 (宽度、分页符等)

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

最佳答案

每个人都说这很难，但 Google 已经在 Google 文档中做到了(提示:您可以使用 Google API，甚至可以获取文档的 PDF 版本。我没有这样做，因为我们需要编辑器中的额外功能。)

这是我的解决方案:

1. 我已将页面调整为 A4 宽度
2. 添加了一个标尺，显示剩余页数(显然不是 100% 可靠，但接近)。甚至页码!是的!

想法:

Ruler 比尝试显示每个页面要容易得多，这意味着要拆分内容...虽然它会很笨...我曾尝试过使用 css 剪辑来完成完整的 A4 页面，但它是搞乱文本选择，所以我不知道...我希望我能做到，但是...

我在 HTML 标签中使用 SVG 的原因是因为它是我唯一可以放在那里的东西......如果你在 TinyMCE 中选择所有文本你可以删除我的标尺，甚至复制和粘贴......即使你使用 contenteditable ="false"...选择有限。

在这里查看我的解决方案:

https://jsfiddle.net/mzvarik/59smpdv8/

// 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
});

顺便说一句。 想象一下 Google 会制作免费的富文本编辑器!

CKEditor也做不到，而且是收费的，可惜了!

关于javascript - TinyMCE 显示为 A4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29828331/