TinyMCE - добавление тумблера ON / OFF

Question

Я использую TinyMCE для текстовых областей в моем разделе администрирования Magento. У меня есть редактор TinyMCE, видимый с самого начала, но я хочу отключить / включить его снова.

Я использую версию плагина jQuery, поэтому я добавил несколько скриптов, которые почти работают. Однако это влияет только на первый экземпляр TinyMCE - если на странице есть другие экземпляры, они не затрагиваются.

Я использовал этот пример http://tinymce.moxiecode.com/examples/example_23.php в качестве основы для того, что я сделал до сих пор. Но до сих пор не могу понять, почему это влияет только на первый случай. Есть идеи? Вот мой код:

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();
    });
});

Answer 1

Работает нормально, если я повторю сценарий для каждой отдельной текстовой области, например, textarea: eq (0), textarea: eq (1) и т. Д. Не знаю почему, но это подойдет.

UPDATE:

То, как у них есть пример jQuery show / hide на сайте tinymce, на самом деле не работает. Вместо того, чтобы просто скрывать редактор, вам действительно нужно выгрузить и затем перезагрузить его, иначе любые изменения, сделанные в состоянии «отключено», не будут сохранены при отправке формы. Поэтому вы должны сделать что-то вроде следующего:

$(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);
    });
});

Answer 2

Для тех, кто ищет TinyMCE версии 4.x, вы можете использовать:

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

Answer 3

На своих страницах я переключаюсь между ванильным HTML 'textarea' и редактором tinymce. Я использую tinymce 4. Приведенные выше рецепты больше не работают в версии 4. Чтобы не потерять текстовое содержимое при отправке, в любом случае я нашел это решение:

<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' - это словарь опций редактора:

<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>

Answer 4

В случае, если это может кому-либо помочь, могу сказать, что я никогда не работал правильно с помощником jquery, когда у меня было несколько экземпляров tinymce на одной странице. На самом деле, я не уверен, имеет ли смысл использовать jquery для этого, так как вы потеряете шанс поработать в методологии init init, которую позволяет tinymce. Поэтому я написал пару функций для переключения:

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);
    }           
}

Кроме того, я просто перестал использовать помощник jquery для инициализации и инициализации следующим образом:

/* 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"
    });     

Действительно, после того, как я потратил впустую время, пытаясь заставить его работать с jquery, я просто напрямую использовал объект tinymce. Поскольку init вызывается только один раз, все редакторы выглядят и работают одинаково.