TinyMCE - добавление тумблера ВКЛЮЧЕНИЯ / выключения
Вопрос
Я использую 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();
});
});
Решение
Работает нормально, если я повторяю скрипт для каждой отдельной текстовой области, например textarea: eq (0), textarea: eq (1) и т.д.Не знаю почему, но сойдет.
Обновить:
То, как у них есть пример 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);
});
});
Другие советы
Для тех, кто ищет TinyMCE версии 4.x, вы можете использовать:
tinymce.EditorManager.execCommand('mceToggleEditor', true, textarea_id);
В случае, если это может кому-либо помочь, я могу сказать, что я никогда не работал правильно с помощником jquery, когда у меня было несколько экземпляров tinymce на одной странице. На самом деле, я не уверен, имеет ли смысл использовать jquery для этого, так как вы потеряете возможность работать в " init Once " Методология, которая позволяет 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 вызывается только один раз, все редакторы выглядят и работают одинаково. Р>
На своих страницах я переключаюсь между ванильным HTML-редактором textarea и редактором tinymce.Я использую tinymce 4.Приведенные выше приемы больше не работают в версии 4.Чтобы не потерять содержимое textarea при отправке в любом случае, я нашел это решение:
<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>