我使用j-query tinyMce插件作为编辑器。一切都很顺利。但现在我需要添加一个自定义按钮,以便我可以从日期选择器插入日期。我做的是
在工具栏中添加了一个按钮。它的工作是在编辑器之外的文本区域显示日期。但我想在该按钮下方显示日期选择器。这是我目前的代码。
height
这是一个更好地理解
的屏幕截图答案 0 :(得分:2)
这是一个解决方案:
$(document).ready(function() {
tinymce.init({
selector: "textarea",
toolbar: "insertfile undo redo | styleselect | bold italic | datepicker",
setup: function(editor) {
editor.addButton('datepicker', {
type: 'button',
classes: 'MyCoolBtn',
text: 'Datepicker',
tooltip: 'Pick a date',
onClick: function() {
$('#datepicker').datepicker('show');
},
//icon: true,
});
}
});
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
// insert into editor
tinymce.activeEditor.execCommand('mceInsertContent', false, dateText);
},
beforeShow: function(input, inst) {
// change position
// see http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control
var $dpBtn = $(".mce-MyCoolBtn");
var buttonPos = $dpBtn.position();
inst.dpDiv.css({
// cannot use top: and left: attrs here since they are hard-set inline anyway
marginTop: buttonPos.top + $dpBtn.height() + 'px',
marginLeft: buttonPos.left + 'px'
});
}
});
});

#datepicker {
display: none;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<input type="text" id="datepicker"></input>
<textarea rows="10" cols="40" id="editor"></textarea>
&#13;
请注意使用datepicker选项beforeShow
和onSelect
并查看评论。
以防JSFiddle
答案 1 :(得分:0)
这是一个工作小提琴:http://jsfiddle.net/10yz8q55/ 我们将datepicker弹出窗口从输入字段重新定位到任何其他元素:
$('.datepicker').datepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
var button = $('#button-tinymce-datepicker'); //the element where the popup should be
var offset = button.offset();
inst.dpDiv.css({
top: offset.top,
left: offset.left
});
}, 0);
}
});
答案 2 :(得分:0)
一个不幸的黑客就是在你的菜单中添加一个隐藏的<input>
。这将允许您将datepicker
绑定到输入,使其显示在其附近/下方。