如何在 jQuery 模态对话框中运行 TinyMCE? [英] How to run TinyMCE in jQuery modal dialog?
问题描述
我想要做的是:如果用户单击/正在关注一个小文本区域(许多之一)，则应打开带有 tinyMCE 编辑器的对话框窗口.好吧，我发现的唯一有效示例是 this 但我无法重新创建它.无论我尝试什么，总是会出现 tinymce is not defined 或 ReferenceError: event is not defined 之类的错误.在那个源代码中，我找不到关于 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: event is not defined
推荐答案
我有这个代码，它可以工作.
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屋！
