관리자 편집기에서 단축 코드를 렌더링하는 솔루션

나는 1 년 전에이 질문을했고 내 목표를 달성 할 수있는 간단한 해결책이 있기를 바랍니다. 그래서 여기에 간다 :

나는 종종 관리자 편집기 내에서 단축 코드를 사용하지만 이것을 클라이언트로 넘길 때 종종 작동 방식을 이해하지 못합니다.

내가 찾고있는 것은 관리자 WYSIWYG 편집기 내에서 짧은 코드의 관련 출력을 자동으로 렌더링하는 솔루션입니다.

시각적 관점에서, "more"라인이 표시되거나 편집기 내에 이미지가 표시 될 때와 유사하게 표시하고 싶습니다. 이것은 사용자가 출력을 볼 수는 있지만 출력을 삭제할 수는 있지만 렌더링 된 단축 코드의 내용을 편집 할 수는 없다는 것을 의미합니다.

functions editor shortcode

— NetConstructor.com
소스

이 기사 ( wp.tutsplus.com/tutorials/theme-development/… ) 를 읽었 습니까? TinyMCE 부품을 확인하십시오.

— cr0z3r

나는 그것을 읽었지만 짧은 코드를 작성 / 등록하고 짧은 코드를 신속하게 삽입하기 위해 편집기의 버튼을 만드는 것에 대해서만 말할 수 있습니다 ...하지만 HTML 블록 대응 물로 이러한 짧은 코드를 렌더링하는 것에 대한 정보는 설명하지 않았습니다.

— NetConstructor.com

포함하고있는 모든 단축 코드를 나타내는 시각적 보조 도구를 포함하고 실제로 단축 코드를 실제 HTML로 바꾸지 않는 시각적 도구를 포함하고 싶습니까? 즉, 실제로 갤러리 코드가 아닌 갤러리 자리 표시 자, 오히려 사용자에게 "여기에 갤러리가 있습니다"라고 알려주는 시각적 자리 표시 자입니까?

— Matthew Boynes

바로 그거죠! 이 유연한 조금 이렇게 나를 단축 코드별로 그것을 사용자 정의 할 수있을 때까지 그리고 내가 좋아하는 것 (같은 유사 당신은 갤러리 또는 이미지가 포함되는 것을 특징)

— NetConstructor.com

wordpress.org/plugins/shortcode-ui

— jgraup

답변:

실제로 당신이 요구하는 것을하는 것이 나쁘지 않습니다. 첫 번째 작업을 수행하는 데 약 1 시간, 후속 작업을 수행하는 데 10 분이 걸립니다.

궁극적으로 할 일은 TinyMCE 플러그인을 만드는 것입니다. 시작하기 위해 준비해야 할 사항은 다음과 같습니다.

tinymce 플러그인 작성을위한 일반 안내서
워드 프레스 코어의 예제 코드
TinyMCE 플러그인을 WordPress에 추가하는 방법에 대한 일반 안내서. 나는 이것 하나를 찾았다 .

이제 모든 도구를 완성했습니다! 이 중 가장 관심있는 코드는 WP 예제 코드의 다음 블록입니다.

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

여기서 갤러리의 단축 코드는 img태그 로 대체됩니다 . img태그는 클래스가 wp-gallery에 의해 스타일 도착, 여기에있는 CSS를 .

2016-04-06 편집 : TinyMCE 4 및 WordPress 4.4의 업데이트 된 내용 및 링크

— 매튜 보이즈
소스

흥미로운! 모든 단축 코드의 실제 내용이 관련 내용으로 자동 변환되도록하려는 생각은 무엇입니까?

— NetConstructor.com

그것은 모두 내용에 달려 있습니다. 먼저, 일부 HTML이 제거되고 TinyMCE에서 렌더링하는 데 문제가 있음을 기억하십시오. 둘째, 단축 코드가 복잡한 HTML 블록을 렌더링한다고 가정 해 봅시다. 사용자가 HTML을 편집하면 실수로 HTML이 손상 될 수 있습니다. 셋째, 단축 코드에 옵션이있는 경우 전체 HTML 블록을 종료하고 단축 코드를 다시 실행하지 않으면 해당 옵션을 편집 할 수 없게됩니다. 코드가 복잡하여 짧은 코드가 필요한 경우 자리 표시자가 최선의 방법이라고 생각합니다.

— Matthew Boynes

이것에 대해 다른 누군가의 해결책을 본 적이 있습니까?

— NetConstructor.com

이것은 완전한 대답이 아니라 디자인 방향 일뿐입니다. 최선의 접근 방식은 다음과 같습니다.

관리자 수정 게시물에서

저장된 게시물에서 모든 단축 코드를 추출 하고 편집기를 제외 하고 메타 박스 안에 렌더링하십시오 . 작은 편집기에서 짧은 코드와 동일한 순서로 표시되는지 확인하십시오.

tinyMCE 자바 스크립트 API에서

사용자가 짧은 코드를 클릭하면 jQuery 함수를 만들어 HTML을 메타 박스에서 편집기로 바꿉니다. 그 반대. 순서 자체는 연관성이 있어야하지만 짧은 코드를 묶는 것에 대해서는 확실하지 않습니다. 그러나 멋진 ID 연결을 디자인하는 방법에는 여러 가지가 있습니다. 단축 코드의 업데이트는 ajax를 사용하여 즉시 수행 할 수 있습니다.

렌더링 된 단축 코드 상태를 저장하지 마십시오

스위치 편집기, 초안 저장, 자동 초안 및 게시 전에 복원을 트리거하기 위해 API 호출을 작성하여 렌더링 된 단축 코드 상태가 저장되지 않습니다.

이 작업을 수행 할 수는 있지만 편집기의 내용에 액세스 할 위치와시기를 이해하고 '저장'전에 자바 스크립트 작업에 연결하려면 tinyMCE API를 잘 알고 있어야합니다.

동일한 편집 게시물 페이지로드에 여러 tinyMCE 편집기가있을 수 있습니다.

복원 부분은 상기보고 조사 할 수있다 [gallery]단축 코드의 beaviour. 그러나 클릭 [MY_SHORTCODE]은 일부 jQuery 트릭으로 수행해야합니다.

admin_footer 스크립트에서 다음을 사용하여 커서가 활성화 된 컨텐츠에 액세스하십시오.

var $editor_content = $(tinymce.activeEditor.getBody());

시작하는 방법에 대한 힌트입니다.

— 조나스 룬드 먼
소스

단축 코드를 그래픽으로 표시하고 조정할 수있는 방법을 찾고있었습니다. 그리고 마지막으로 https://generatewp.com/take-shortcodes-ultimate-level/

검색 엔진이 설명을 추가 할 수 있도록 설명을 추가합니다.

우리는 짧은 코드로 간단한 플러그인을 만들고, TinyMCE 편집기 버튼을 추가하여 짧은 코드 속성에 대한 모든 사용자 입력을 수집하는 팝업을 통해 해당 짧은 코드를 삽입 할 것입니다. 그런 다음 TinyMCE 편집기의 단축 코드를 WordPress의 기본 갤러리 (실제로 모르는 경우 단축 코드 임)와 같은 자리 표시 자 이미지로 바꾸고 마지막으로 편집을 허용합니다. 자리 표시 자 이미지를 두 번 클릭하여 단축 코드 및 해당 속성의

— 마크 체 하브
소스