在微型 mce 插件上显示日期时间选择器答案

【问题标题】：Display Datetime picker on tiny mce plugin在微型 mce 插件上显示日期时间选择器
【发布时间】：2015-06-19 12:55:47
【问题描述】：

我使用 j-query tinyMce 插件作为编辑器。一切都很顺利。但现在我需要添加一个自定义按钮，以便我可以从日期选择器中插入日期。我做的是

在工具栏中添加了一个按钮。及其在编辑器外部的文本区域中显示日期的工作。但我想在该按钮下方显示日期选择器。这是我当前的代码。

setup: function(editor) {
  editor.addButton('datepicker', {
    type: 'button',
    class: 'MyCoolBtn',
    text: 'Datepicker',
    tooltip: 'Pick a date',
    onClick: function() {
      $('#datepicker').datepicker('show')
    },
    icon: true,
  });
}

这是一个截图，以便更好地理解

【问题讨论】：

标签： javascript jquery jquery-ui datepicker tinymce

【解决方案1】：

这里有一个解决方案：

$(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>

注意日期选择器选项 beforeShow 和 onSelect 的用法并查看 cmets。

以防万一JSFiddle

【讨论】：

如果我将输入类型文本设置为显示：无；或输入隐藏
什么特别不工作？正如您在小提琴中看到的，日期输入具有display: none，并且日期选择器显示并将所选日期粘贴到编辑器中，即看起来它按预期工作。

【解决方案2】：

这是一个有效的小提琴：http://jsfiddle.net/10yz8q55/ 我们将日期选择器弹出窗口从输入字段重新定位到任何其他元素：

$('.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);
    }
});

【讨论】：

【解决方案3】：

不幸的是，在您的菜单中添加一个隐藏的<input>。这将允许您将datepicker 绑定到输入，使其显示在其附近/下方。

【讨论】：