Question

我想要做的是：如果用户点击/正在聚焦一个小文本区域（其中一个），则会打开一个带有tinyMCE编辑器的对话窗口。我找到的唯一一个工作示例是this，但我无法重新创建它。无论我尝试了什么，总会出现tinymce is not defined或ReferenceError: event is not defined之类的错误。在该源代码中，我无法找到关于导入tinymce库的位置。

我尝试以正常方式初始化库，并尝试使用jQuery方式：

$('#selector').tinymce({  
      script_url : 'tiny_mce/jquery_tiny_mce.js',
      ...
});

但总是有错误......

当前版本中也缺少主题。如果有人知道哪个jQuery，jQueryUI和TinyMCE版本适合在一个模态窗口中运行编辑器，请告诉我。

或许有人知道为什么上面这个链接的例子对我不起作用，请告诉我导致错误的原因。这是我的工作：

导入库和css：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="tinymce/jquery.tinymce.min.js"></script> //tinymce_4.0.22_jquery

jQuery的：

$(document).ready(function () {

        // Prevent jQuery UI dialog from blocking focusin
        $(document).on('focusin', function (e) {
            if ($(event.target).closest(".mce-window").length) {
                e.stopImmediatePropagation();
            }
        });



        // Open dialog and add tinymce to it
        $('#open').click(function () {
            $("#dialog").dialog({
                width: 800,
                modal: true
            });

            $('textarea').tinymce({
                //script_url: 'tiny_mce2/tiny_mce.js',
                toolbar: 'link',
                plugins: 'link'
            });
        });

    });

HTML：

<div id="dialog" title="TinyMCE dialog" style="display: none">
    <textarea></textarea>
</div>
<button id="open" type="button">Open</button>

发生以下错误：ReferenceError: event is not defined

Answer 1

我有这个代码并且有效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#txapublicacion').tinymce({
            plugins : 'link'
        });
        //--------------------------------------
        $("#lnk_mostrar_form").click(function() {
            $("#dv_formulario").dialog("open");
            return false;
        });
        //--------------------------------------
        $("#dv_formulario").dialog({
            autoOpen : false,
            modal : true,
            buttons : {
                Buscar : function() {
                    $(this).dialog("close");
                },
                Cancelar : function() {
                    $(this).dialog("close");
                }
            },
            close : function() {}
        });
    //------------------------------------- 
    });
</script>
</head>
<body>
    <a id="lnk_mostrar_form" href="">Formulario</a>
    <div id="dv_formulario" title="Ejemplo">
        <form id="frm_buscar">
            <textarea id="txapublicacion"></textarea>
        </form>
    </div>
</body>
</html>

Answer 2

一种行之有效的解决方案是，如果您在打开对话框后初始化每个字段。我认为tinymce需要控件不被隐藏和可见才能正确初始化焦点/ z-index。

所以如果你设置一个这样的对话框：

function openMyDialog() {
        $("#dialog").dialog(
        {
            autoOpen: false,
            width: 800,
            height: 600,
            modal: true,
            resizable: false,
            draggable: false,
            close: function() {},
            buttons: 
            {
                "OK": function () 
                {
                    $(this).dialog("close");
                }                                        
            }
        });  
        $("#dialog").dialog("open");
}
function closeMyDialog() {
        $("#dialog").dialog("close");
}

然后，一旦对话框打开，您就可以初始化 TinyMCE 控件（对您需要的每个 textarea 控件重复，并在 tinymce.init 方法的 'selector' 选项中使用此 textarea 的 ID）< /p>

 tinymce.init({
     selector: '#textarea_helloworld',
                height: 250,
                menubar: false,
                plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code' ],
                toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                content_css: '/css/tinymce.css',
                setup: function (editor) {
                  editor.on('init', function (e) {
                    editor.setContent('Hello World');
                  });
                }                     
  });

我希望这可以帮助您意识到您的对话框必须初始化并打开（可见），以便 TinyMCE 可以正确初始化。

如何在jQuery模式对话框中运行TinyMCE？

2 个答案: