TinyMCE - إضافة مفتاح تبديل تشغيل/إيقاف

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) وما إلى ذلك.لا أعرف لماذا، لكنها ستفعل.

تحديث:

الطريقة التي لديهم بها مثال إظهار/إخفاء jQuery على موقع 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

في حالة أنها يمكن أن تساعد أي شخص، وأنا أستطيع القول بأنني لم يحصل على عمل الحق مع المساعد مسج عندما أتيحت لي حالات محرر TinyMCE متعددة على نفس الصفحة. في الواقع، أنا لست متأكدا إذا كان من المنطقي لاستخدام مسج لهذا منذ كنت سوف تفقد فرصة للعمل في منهجية "التهيئة مرة واحدة" التي تمكن محرر 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);
    }           
}

وأيضا، أنا فقط توقفت عن استخدام المساعد مسج لتهيئة وتهيئة مثل هذا:

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

وحقا، وبعد كل مرة كنت يضيع في محاولة للحصول على عمل مع مسج، أنا فقط استخدام الكائن محرر TinyMCE مباشرة. منذ يسمى الحرف الأول مرة واحدة فقط، وجميع المحررين يأتي النظر والعمل نفسه.

Answer 4

في صفحاتي I التبديل بين الفانيليا HTML "جزء النص" ومحرر محرر TinyMCE. يمكنني استخدام محرر TinyMCE 4. recepies أعلاه لا تعمل بعد الان في الإصدار 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>