Question

我使用了从 here 获得的标尺分页插件。我在模态 A 中显示 tinymce。然后，我需要打开另一个模态 B 来添加变量列表。然后，当用户在模式 B 上按下保存时，我编辑编辑器以将变量 menubutton 插入现有编辑器。然后，我在完成编辑后渲染编辑器。但是，我在编辑和渲染后将编辑器显示为 A4 时遇到问题。标尺插件好像断开了。

编辑前编辑后

<!DOCTYPE html>
<html>
 <head>
<link rel="stylesheet" href="../../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../plugins/jQuery/jQuery-2.1.4.min.js"></script>    
<script src="tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="../../../bootstrap/js/bootstrap.min.js"></script>      
<script type="text/javascript">
 $( document ).ready(function() {
$("#btn-add").click(button_add);
function button_add(){              
            $("#modal-template").modal("show"); 
    }
tinymce.PluginManager.add('ruler', function(editor) {
        
        var domHtml;
        var lastPageBreaks;
        
        function refreshRuler()
        {
            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
            /*var a4px = cm * (29.7-2.54-0.66);*/
            var a4px = cm * (29.7);

            // ruler begins (in px)
            /*var startMargin = 4;*/
            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 = 14; // height of the pagebreak line in tinyMce
            /*var pageBreakHeight = 4;*/
            
            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
    ({
     selector: "#template_editor",
     plugins: 'ruler pagebreak print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
     toolbar: 'customInsertButton pagebreak undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
     content_css: "content.css",
     formats: {
    tablecellborderbottomcolor: { selector: "td", styles: { borderBottomColor: '%value' } },
   },

   height:600,
  });
   $('#set').click(set_var);
   function set_var(){
    $('#txtvar').val('');
    $("#modal-var").modal("show");  
   }
   $("#btn-save-var").click(button_save_var);
  function button_save_var()
  {
    //document.getElementById('txtvar').innerHTML = '';
    editor  =tinymce.get('template_editor');
    con     =editor.getContent();   
    editor.on('init', function()
    {
        var content=con;
        editor.setContent(content);
        
    })
        editor.ui.registry.addMenuButton('customInsertButton',
                        {
                        id  : 'insert_var', 
                        text: 'Insert Variable',
                        fetch: function (callback)
                        {
                        var items = [];
                        /*for (j=0;j<data.length;j++)
                        {*/
                            //template_var      =data[j];
                            var menuItem =
                                            {
                                            type: 'menuitem',
                                            text: $('#txtvar').val(),
                                            value:$('#txtvar').val(),
                                            onSetup: function(buttonApi)
                                            {
                                            var $this = this;
                                            this.onAction = function()
                                            {
                                            editor.plugins.variable.addVariable($this.data.value);
                                            };
                                            },
                                            };
                        items.push(menuItem);
                        /*}*/
                        callback(items);
                        },                                                  
                        });

    $("#modal-var").modal("hide");
    editor.render();
}
 });
    

</script>
</head>
<body>
 <button class="btn btn-primary margin" id="btn-add" title="New button">
    <i class="fa fa-plus">
    </i>New Template
</button>
 <!--modal A-->
<div class="modal fade" id="modal-template" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel">
    <div class="container" role="document">
        <div class="modal-content" style="align-left">
            <div class="modal-body">
                <textarea id="template_editor" name="mytextarea" rows="30">

                </textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left tmce-close" data-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary tmce-save" title="save button" id="btn-save">
                    <i class="fa fa-save">
                    </i>save
                </button>
                <button type="button" id="set">
                    variable
                </button>
            </div>
        </div>
    </div>
</div>
<!--modal B-->
<div class="modal fade" id="modal-var" tabindex="-1"  role="dialog" aria-labelledby="var">
    <div class="container" role="document">

        <div class="modal-content" style="align-left">
            <input type="text" class="form-control" id="txtvar" placeholder="variable">
            <button type="button" id="btn-save-var">
                <i class="fa fa-save">
                </i>save_var
            </button>
        </div>
    </div>
</div>

HTML{
background: #686c6f;
box-shadow: inset 1px 0 2px #00000091;
}
BODY#tinymce{
width: 21cm; /* this should be 21 cm as the page size, but I have little space here in fiddle */
min-height: 29.7cm; /* this should be 29.7 cm (A4 page) */
background: #fff;
display: block;
box-shadow: 0 2px 7px rgba(0,0,0,0.7);
/*   margin: 5px auto 20px auto;*/
margin: 0px auto 0px auto;
padding: 1cm 1.10cm;
box-sizing: border-box;
 }
BODY#tinymce img.mce-pagebreak{
cursor: default;
cursor: grab;
display: block;
width: 100%;
width: calc(100% + 2.2cm);
margin-left: -1.1cm;
margin-right: -1.1cm;
height: 14px;
height: 0px;
margin-top: 20px;
margin-bottom: 20px;
page-break-before: always;
border: 0;
box-shadow: inset 0 5px 8px -6px rgba(0,0,0,1);
border-bottom: 1px solid #555;
background: linear-gradient(to right, #686C6F, #7F8284);
}
BODY#tinymce img.mce-pagebreak:hover{
opacity: .9;
}

tinymce 在 init 后编辑编辑器时删除标尺插件

0 个答案: