使TinyMCE与JEditable正常工作
我正在使用编辑就地JQuery插件，JEditable：http://www.appelsiini.net/projects/jeditable。
我想在编辑时使用TinyMCE，所以我找到了一些额外的脚本来使它工作：http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin。
我遇到的问题是，当我第一次尝试编辑某件东西时，JEditable或TinyMCE都会崩溃--但是之后它就完美地工作了！具体来说，当我第一次单击要编辑的区域时，TinyMCE会加载，但是当我单击textarea时，textarea会消失，成为我将要编辑的div (就好像我从未点击过编辑一样)。但是，在此之后，除非我刷新页面，否则插件可以很好地工作。
代码
<script type="text/javascript" src="jscripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <!-- TinyMCE -->
<script type="text/javascript" src="jscripts/jquery-1.5.1.min.js"></script> <!-- JQuery-->
<script type="text/javascript" src="jscripts/jquery.jeditable.mini.js"></script><!-- JEditable plugin-->
<script type="text/javascript" src="jscripts/jquery.tinymcehelper.js"></script>
<script type="text/javascript" src="jscripts/jquery.company.js"></script>
<div class="editable_textarea">Edit this div</div>当我点击文本“编辑这个div”时，TinyMCE会加载。但是，当我单击textarea时，textarea消失了，我只看到文本"Edit this div“(好像我没有单击编辑就地编辑)。只有在加载/刷新页面时才会出现此问题。之后，一切都很完美。--
这是我为jscript/jquery.tinymcehelper.js编写的代码(与http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin中的完全相同)：
$.fn.tinymce = function(options){
return this.each(function(){
tinyMCE.execCommand("mceAddControl", true, this.id);
});
}
function initMCE(){
tinyMCE.init({
mode : "textarea",
theme: "advanced",
height: "100",
plugins: "table, tinyautosave, imagemanager, spellchecker, autoresize",
theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left"
});
}
initMCE();
$.editable.addInputType('mce', {
element : function(settings, original) {
var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
$(this).append(textarea);
return(textarea);
},
plugin : function(settings, original) {
tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
},
submit : function(settings, original) {
tinyMCE.triggerSave();
tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
},
reset : function(settings, original) {
tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
original.reset();
}
});最后，这是我的“定制”代码：
// Jeditable customization
$(function(){
$(".editable_textarea").editable('ajax/save.php?editnotetext',
{
type : 'mce',
indicator : 'Saving...',
tooltip : 'Click to edit...',
name : 'note_text',
submit : 'OK',
cancel : 'Cancel',
height : '100px'
});
$(".dblclick").editable('ajax/save.php?editnotename', {
tooltip : 'Doubleclick to edit...',
indicator : 'Saving...',
event : 'dblclick',
name : 'name',
style : 'inherit'
});
});Stack Overflow用户
发布于 2011-04-13 22:56:58
我注意到的第一件事是，您的initMCE()方法与链接中的方法不完全相同(我无法访问该站点，但能够从Google中提取)。具体来说，mode应该是none。
从TinyMCE文档来看，mode: 'textarea'似乎是用来自动附加到<textarea>元素的。然而，mode: 'none'的目的是以编程方式将编辑器添加到字段中，这正是JEditable插件所要做的。
https://stackoverflow.com/questions/5580713
复制相似问题
腾讯云开发者
