如何在jQuery模态对话框中运行TinyMCE？ [英] How to run TinyMCE in jQuery modal dialog?
问题描述
我想做的是：如果用户点击/正在聚焦一个小的textarea（许多之一），一个对话窗口与tinyMCE编辑器将打开。那么我发现的唯一的工作示例是这个，但是我无法重新创建它。无论我尝试什么，总是有一个错误，如 tinymce未定义或 ReferenceError：事件未定义。在这个源代码中，我没有找到任何关于tinymce-library导入的内容。
What I want to do is: If the user clicks on/is focusing a small textarea (one of many) a dialog window with the tinyMCE editor shall open. Well the only working example I found was this but I couldn't recreate it. No matter what I tried there was always an error like tinymce is not defined or ReferenceError: event is not defined. In that sourcecode I couldn't find anything about where the tinymce-library is imported.
我试图以正常的方式初始化库，也尝试了jQuery的方式：
I tried to initialize the library the normal way and also tried it the jQuery way:
$('#selector').tinymce({
script_url : 'tiny_mce/jquery_tiny_mce.js',
...
});
但总有错误...
当前版本中还缺少主题。如果有人知道哪个jQuery，jQueryUI和TinyMCE版本合在一起，在模态窗口中运行编辑器，请让我知道。
There were also missing themes in the current version. If anyone knows which jQuery, jQueryUI and TinyMCE version fit together to run an editor within a modal window please let me know.
或者也许有人知道为什么链接的例子以上对我来说不行，请告诉我造成错误的原因。这是我做的：
Or maybe someone knows why the example of the link above doesn't work for me, please show me what is causing the error. Here is what I do:
导入库和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：事件未定义
推荐答案
我有这个代码，它的作品。
I have this code and it works.
<!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>
这篇关于如何在jQuery模态对话框中运行TinyMCE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
