我一直在理解如何为我的tinymce
编辑器设置事件处理程序。 这篇文章可能会很长,所以我很抱歉。
我正在阅读这篇文章 ,这正是我想要做的:
我可能会以一种令我困惑的方式实例化我的TinyMCE编辑器实例,从而扩展它的function。
在我的网站上,我主要让我的编辑做最简单,最简单的工作。 现在我在一个页面上,我想反映关键变化,以显示在
这是我在大多数页面中通常拥有的内容:
$(document).ready(function(){ $('textarea[tinymce]').each(function(){ var tinymceopts = $(this).attr('tinymce'); $(this).tinymce(window[tinymceopts]); }); // my failed attempt to add an event $(".mceContentBody").on('keyup',function(){ var htmltxt = $(this).val(); $("#displayHtml").html(htmltxt); }); });
你会在我的textarea
看到tinymce="tinymce_basic"
。 我通过这种方式全球化地调用了tinymce主题和插件。 对我来说也很棒。
在我的tinymce_configs.js文件中,这是我定义的内容:
// JavaScript Document var tinymce_basic = { script_url : '/tinymce/tiny_mce.js',// Location of TinyMCE script // General options theme : "advanced", plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", force_p_newlines : false, force_br_newlines : true, forced_root_block : false, // Needed for 3.x // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,hr,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,styleprops,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,removeformat,code,|,preview", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, theme_advanced_resize_horizontal: false } /* more var options below */
所以你有它。 以上所有内容适用于所有具有属性的textareas页面: tinymce="tinymce_basic"
。 现在是时候专注于一个单独的页面,看起来很好,所有的变化都反映在
我上面的尝试是寻找.mceContentBody
,我认为它可以工作,因为tinymce编辑器似乎将html保存在它的iframe中。 (不起作用)
我对其他人如何解雇他们的小MCE编辑感到困惑,因为我看起来看起来并不相同。 这是Tiny MCE的onKeyUp示例 。
我从来没有用tinyMCE.init({....
我是否需要更改我调用每个tinymce编辑器的方式? 凭借我所拥有的,我如何将我的TinyMCE的内容反映到另一个元素中?
以下一些post的修改:
$(document).ready(function(){ $('textarea[tinymce]').each(function(){ var tinymceopts = $(this).attr('tinymce'); $(this).tinymce(window[tinymceopts]); }); // This was added $(".mceContentBody").on('keyup',function(){ tinymce_basic["setup"] = function(ed) { ed.onKeyUp.add(function(ed, e) { console.debug('Key up event: ' + e.keyCode); }); } }); });
您需要在配置中执行此操作:
需要了解更多jQuery教程分享TinyMCE – 添加事件监听器问题,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
tinyMCE.init({ mode : ..., ..., setup : function (ed) { ed.onKeyPress.add( function (ed, evt) { alert("Editor-ID: "+ed.id+"nEvent: "+evt); //.... } ); }, ... });
以上就是jQuery教程分享TinyMCE – 添加事件监听器问题相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981282.html