tinymce - tinymce 在初始化后编辑编辑器时删除标尺插件
问题描述
我使用了从这里获得的标尺分页插件。我在模态 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;
}
解决方案
推荐阅读
- r - 正则表达式模式以任何顺序查找单词
- python - 将模块安装到特定的 Python 版本
- android - Google Play 商店：编辑我的应用的一张图片
- java - Android Studio 缺少图标
- javascript - 更新 localStorage 中对象的特定值
- continuous-integration - 将 GerritHub 与 GitHub 操作一起使用
- javascript - 模拟时钟不考虑当前时间
- c# - 如何使用 ghostscript 开关更改打印队列中的文档名称
- kubernetes - 命令 traefik 错误：标志需要一个参数：-kubernetes
- ios - 在不显示嵌套/中间视图控制器的情况下关闭根视图控制器