如何解决tinymce 在 init 后编辑编辑器时删除标尺插件
我使用了从 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,.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.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,1);
border-bottom: 1px solid #555;
background: linear-gradient(to right,#686C6F,#7F8284);
}
BODY#tinymce img.mce-pagebreak:hover{
opacity: .9;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
