Дисплей TinyMCE в формате A4

Ответ 1

Возможно, но сложно, подвержена ошибкам, и вы не сможете приблизиться к MS Word. Возможно, вы можете получить это право для одного шрифта или около того.

Что вам нужно сделать, это пользовательский CSS и настраиваемый шаблон. Шаблон должен напоминать серый фон с белой страницей (с тенью:). Определите некоторые кнопки, которые добавят пользовательские классы в шаблон с помощью Javascript, и вы получите настройки полей (узкие, широкие, нормальные, без значений). Для разрыва страницы вы можете вставить специальный <hr>, который стилирует базовый шаблон страницы так, как будто он заканчивается, а другой начинается. Имейте в виду, что вам придется заменить почти все ваши собственные CSS, чтобы сделать его готовым к печати. Кроме того, вы должны сделать полноэкранный режим tinymce.

Другой (очень странный) подход, который я видел, представляет собой комбинацию между tinymce и PDF библиотека визуализации или эквивалент. Таким образом вы получите право WYSIWYG.

Надеюсь, что это поможет.

Ответ 2

Все говорят, что это сложно, но Google уже сделал это в Документах Google (СОВЕТ: вы можете использовать Google API и даже получить PDF-версию своего документа. Я этого не делал, потому что нам нужны дополнительные функции в редакторе.)

Здесь мое решение:

1. Я изменил размер страницы до ширины A4
2. Добавлена линейка, показывающая, сколько осталось страницы (очевидно, не на 100% надежной, но близкой). И даже номера страниц! Да!

Мысли:

Правитель намного проще, чем пытаться показать каждую страницу, что означало бы разделить содержимое... ЭТО БЫЛО ДОПУСТИМЬ МЫСЛИ... Я пытался сделать полные страницы формата А4 даже с помощью клипа css, но он возился с текстом выбор, поэтому я не знаю... Хотел бы я, чтобы я это сделал, но...

Причина, по которой я использовал SVG внутри HTML-тега, состоит в том, что это единственное, что я могу разместить там... если вы выберете весь текст в 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
});

Btw. Представьте, что Google сделает бесплатный текстовый редактор!

CKEditor также не может этого сделать и заплатил, какой позор!