tinymce- 켜기/꺼짐 토글 스위치 추가

StackOverflow https://stackoverflow.com/questions/1805431

  •  05-07-2019
  •  | 
  •  

문제

Magento Admin 섹션의 텍스트 지역에서 Tinymce를 사용하고 있습니다. 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) 등과 같은 각 별도의 텍스트 영역에 대해 스크립트를 반복하면 OK 작동합니다. 이유를 모르지만 그렇게 할 것입니다.

업데이트:

Tinymce 사이트에 jQuery 쇼/숨기기 예제가있는 방식은 실제로 작동하지 않습니다. 편집기를 숨기는 대신 실제로 언로드 한 다음 다시로드해야합니다. 그렇지 않으면 양식이 제출 될 때 "토글 오프"상태의 변경 사항이 저장되지 않습니다. 따라서 다음과 같은 일을해야합니다.

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

누군가를 도울 수있는 경우, 같은 페이지에 여러 개의 tinymce 인스턴스가있을 때 jQuery 도우미와 제대로 작동하지 않았다고 말할 수 있습니다. 사실, Tinymce가 가능하게하는 "Init"방법론에서 일할 수있는 기회를 잃어 버리기 때문에 jQuery를 사용하는 것이 합리적인지 확실하지 않습니다. 그래서 방금 토글링을 처리하기 위해 몇 가지 기능을 썼습니다. 

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에서 더 이상 작동하지 않습니다.

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top