English 中文(简体)
TinyMCE - adding an ON/OFF toggle switch
原标题:

I m using TinyMCE on the text-areas in my Magento admin section. I have my TinyMCE editor visible form the start, but I want the option to disable/re-enable it.

I m using the jQuery plugin version, so I added some script, which is almost working. However, it s only affecting the first instance of TinyMCE - if there are any other instances of it on the page, they are not affected.

I used this example http://tinymce.moxiecode.com/examples/example_23.php as a base for what I ve done so far. But still can t figure out why it s affecting the first instance only. Any ideas? Here s my code:

var $j = jQuery.noConflict();
// Add ON OFF toggle switch
$j(function() {
$j( textarea ).after("<br/><span class="toggle form-button">Toggle TinyMCE</span>"); 
$j("span.toggle").toggle(function(){
$j( .wrapper ).find( textarea ).tinymce().hide();
        }, function () {
$j( .wrapper ).find( textarea ).tinymce().show();
    });
});
最佳回答

Works ok if I repeat the script for each separate text area, like textarea:eq(0), textarea:eq(1) etc. Don t know why, but it ll do.

UPDATE:

The way they have the jQuery show/hide example on the tinymce site doesn t actually work. Instead of just hiding the editor, you actually need to unload and then reload it, or else any changes made in the "toggled off" state won t be saved when the form is submitted. So you should do something like the following:

$(function() {
    var id =  tinytextareaID ; // ID of your textarea (no # symbol) 
        $("a.toggle").toggle(function(){
           tinyMCE.execCommand( mceRemoveControl , false, id);
        }, function () {
            tinyMCE.execCommand( mceAddControl , false, id);
    });
});
问题回答

For anyone looking for TinyMCE version 4.x you can use:

tinymce.EditorManager.execCommand( mceToggleEditor , true, textarea_id);

In case it can help anyone, I can say that I never got it working right with the jquery helper when I had multiple tinymce instances on the same page. In fact, I m not sure if it makes sense to use jquery for this since you would be loosing the chance to work in the "init once" methodology that tinymce enables. So I just wrote a couple functions to handle the toggling:

function showBlogEditor(strItemId){
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element
    if(theeditor && theteditor.initialized){
        //you can do something here if you need
    }else{
        tinyMCE.execCommand( mceAddControl , false, strItemId);
    }
}
function hideBlogEditor(strItemId){
    if (tinyMCE.getInstanceById(strItemId))
    {
            tinyMCE.execCommand( mceFocus , false, strItemId);
            tinyMCE.execCommand( mceRemoveControl , false, strItemId);
    }           
}

Also, I just stopped using the jquery helper to initialize and initialized like this:

/* it is the mode: "none" that matters here. You are initializing the tinymce object without creating a visual manifestation of it. Then the show and hide functions will turn the control on and off */
    tinyMCE.init({
        theme : "advanced",mode : "exact",
        mode : "none", 
        plugins : strplgns,
        theme_advanced_buttons1 : strbtns1,
        theme_advanced_buttons2 : strbtns2,
        theme_advanced_buttons3 : strbtns3,
        content_css : "/css/hlsl.css"
    });     

Really, after all the time I wasted trying to get it to work with jquery, I just use the tinymce object directly. Since init is just called once, all the editors come up looking and working the same.

On my pages I switch between vanilla HTML textarea and tinymce editor. I use tinymce 4. The recepies above don t work anymore in version 4. In order not to loose textarea content on submit in either case I found this solution:

<script>
function toggle_tinymce_checkbutton(checkButtonId,strItemId){
var toggle = $( # +checkButtonId);  // checkButtonId = id of checkbutton w/o #
if(toggle.attr( value ) ==  on ) {
	var editor = tinymce.EditorManager.get(strItemId); // strItemId = id of textarea w/o #
	editor.remove();
	toggle.attr( value , off );
} else {
	var editor = tinymce.EditorManager.createEditor(strItemId,tinymce_settings);
	editor.render();
	toggle.attr( value , on );}
}
</script>

tinymce_settings is this dictionary of editor-options:

<script>
tinymce_settings = {
	  selector:  #cm_pages_body ,
	  height: 300,
	  width:767,
	  statusbar: false,
	  convert_urls: false,
	  valid_children:  +body[style] ,
	  plugins: [
	     advlist autolink lists link image charmap print preview anchor ,
	     searchreplace visualblocks code fullscreen ,
	     insertdatetime media table contextmenu paste code ,
	     textcolor ,
	  ],
	  toolbar:  undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code ,
	  content_css: [
	     //fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css ,
	     //www.tinymce.com/css/codepen.min.css 
	  ],};
</script>




相关问题
getGridParam is not a function

The HTML: <a href="javascript:void(0)" id="m1">Get Selected id s</a> The Function: jQuery("#m1").click( function() { var s; s = jQuery("#list4").getGridParam( selarrrow )...

selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

jQuery cycle page with links

I am using the cycle plugin with pager functionality like this : $j( #homebox ) .cycle({ fx: fade , speed: fast , timeout: 9000, pager: #home-thumbs , ...

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

jConfirm with this existing code

I need help to use jConfirm with this existing code (php & Jquery & jAlert). function logout() { if (confirm("Do you really want to logout?")) window.location.href = "logout.php"; } ...

Wrap text after particular symbol with jQuery

What I m trying to do, is wrap text into div inside ll tag. It wouldn t be a problem, but I need to wrap text that appears particularly after "-" (minus) including "minus" itself. This is my html: &...

热门标签