딕셔너리 속성을 통해 TinyMCE 도구 모음 구성

TinyMCE 기본 도구 모음 변경

시스템 속성의 도구 모음 항목을 전체적으로 작업 공간활성화 또는 비활성화하도록 설정합니다.

시작하기 전에

필요한 역할: 관리자

프로시저

다음으로 이동 모두 > 시스템 속성 > UI 속성.

HTML 필드용 편집 도구 모음 구성(TinyMCE v6.8.2)(glide.ui.html.editor.toolbar) 속성을 업데이트하여 도구 모음에 대한 단추를 추가하거나 제거합니다.

주:

세로 막대("|")를 사용하여 섹션 구분 기호를 추가합니다.


유형	단추
기본 버튼	bold italic underline undo redo \| fontfamily fontsize table \| forecolor backcolor link unlink \| image media code \| alignleft aligncenter alignright \| bullist numlist fullscreen
사용 가능한 단추	newdocument, bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, blocks, fontfamily, fontsize, tablecontrols, cut, copy, paste, pastetext, pasteword, search, replace, bullist, numlist, outdent, indent, blockquote, undo, redo, link, unlink, image, cleanup, code, forecolor, backcolor, removeformat, hr, visualaid, sub, sup, charmap, media, preview, fullscreen, accordion

저장을 선택합니다.

특정 테이블에 대한 TinyMCE 도구 모음 변경

TinyMCE 사전의 속성을 설정하여 특정 테이블에 표시할 TinyMCE 속성을 결정합니다.

시작하기 전에

필요한 역할: 관리자

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에 editor.toolbar=를 입력한 다음 원하는 도구 모음 버튼을 입력합니다.
예: editor.toolbar=blocks|bold italic underline strikethrough blockquote subscripte superscript removeformat| bullist numlist outdent indent|undo redo|table hr|link unlink|image media code|visualblocks 미리 보기 전체 화면.
주:
- 추가하려는 도구 모음 항목뿐만 아니라 표시하려는 모든 도구 모음 항목을 포함합니다.
- 연결된 딕셔너리 기록에서 필드의 속성 필드에 대한 구성은 시스템 속성 glide.ui.html.editor.toolbar의 값을 재정의합니다.
- 속성 필드 내에서 높이, 도구 모음 버튼, 도구 모음 플러그인 등 여러 속성을 결합할 수 있습니다. 예: editor.height=300,editor.plugins=table colorpicker textcolor 링크 이미지 미디어 코드미러 목록 advlist 전체 화면 문자 방향성 이모티콘 hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | bold italic underline strikethrough forecolor backcolor pastetext removeformat | blocks searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | tableofcontents 테이블 링크 이미지 미디어 연결 해제 codesample | 코드 전체 화면.
업데이트를 선택합니다.

특정 테이블에 대한 TinyMCE 플러그인 변경

TinyMCE 사전에서 속성을 설정하여 특정 HTML 필드에서 플러그인을 사용하거나 사용하지 않도록 설정합니다.

시작하기 전에

필요한 역할: 관리자

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에 editor.plugins= 다음에 원하는 플러그인을 공백으로 구분하여 입력합니다.
예: editor.plugins=table colorpicker textcolor 링크 이미지 미디어 코드 미러 목록 advlist 전체 화면 문자 방향성 이모티콘 hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor tableofcontents codesample visualblocks visualchars compat3x autolink align_listitems.
주:
- 추가하려는 도구 모음 항목뿐만 아니라 표시하려는 모든 도구 모음 항목을 포함합니다.
- 연결된 딕셔너리 기록에서 필드의 속성 필드에 대한 구성은 시스템 속성 glide.ui.html.editor.toolbar의 값을 재정의합니다.
- 허용되는 플러그인은 다음과 같습니다. advlist align_listitems 앵커 자동 링크 자동 크기 조정 bbcode charmap 코드미러 코드샘플 색상 선택기 방향성 이모티콘 전체 화면 HR 이미지 삽입 날짜 시간 링크 목록 미디어 줄 바꿈 미리보기 인쇄 읽기 전용 테두리 없음 검색 바꾸기 테이블 텍스트 색상 컨텐츠 테이블 블록 visualChars 단어 수
- 속성 필드 내에서 높이, 도구 모음 버튼, 도구 모음 플러그인 등 여러 속성을 결합할 수 있습니다. 예: editor.height=300,editor.plugins=table colorpicker textcolor 링크 이미지 미디어 코드미러 목록 advlist 전체 화면 문자 방향성 이모티콘 hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | bold italic underline strikethrough forecolor backcolor pastetext removeformat | blocks searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | tableofcontents 테이블 링크 이미지 미디어 연결 해제 codesample | 코드 전체 화면.
업데이트를 선택합니다.

HTML 필드의 기본 높이 변경

특정 HTML 필드의 기본 높이를 변경하여 저널 필드의 크기를 확장합니다.

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

HTML 필드 높이는 HTML 필드별로 구성됩니다.

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에 editor.height=X를 입력합니다. 여기서 X는 원하는 높이입니다.
예: editor.height=250
주:
HTML 필드의 범위는 72에서 2000 사이입니다. HTML 필드는 기본적으로 64입니다.
업데이트를 선택합니다.
특정 높이를 제공하지 않고 텍스트 줄이 증가함에 따라 양식 필드의 높이를 동적으로 구성하려면 다음 단계를 완료하십시오.
1. 다음으로 이동 모두 > 시스템 속성 > 모든 속성
2. 검색 창에 glide.ui.html.editor.enabled_plugins 를 입력하고 속성을 선택합니다.
3. 값 필드에 autoresize를 추가합니다.
4. 업데이트를 선택합니다.
  autoresize 플러그인이 활성 상태입니다.

HTML 필드의 기본 글꼴 크기 변경

양식 전체에서 표준 글꼴 크기를 사용하도록 특정 HTML 필드의 기본 글꼴 크기를 변경합니다.

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

HTML 글꼴 크기는 HTML 필드별로 구성됩니다.

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
기본값 탭을 선택합니다.
기본값 필드에 다음을 입력합니다. 여기서 X가 기본값입니다.
예:
- 글꼴을 크게 설정하려면 다음을 입력합니다. 
- 크기를 10으로 설정하려면 다음을 입력합니다. 
업데이트를 선택합니다.

사용 중단된 태그를 허용하도록 TinyMCE 구성

TinyMCE 필드에 딕셔너리 속성을 설정하여 및 같은 사용되지 않는 HTML 태그를 사용할 수 있도록 할 수 있습니다. 기본적으로 TinyMCE는 굵게 및 기울임꼴 서식에 및 태그를 사용합니다.

시작하기 전에

필요한 역할: personalize_dictionary 또는 admin

이 태스크 정보

딕셔너리 속성을 설정한 후 코드 뷰를 사용하여 사용되지 않는 태그를 수동으로 입력합니다. 편집기는 잘못된 문자를 입력한 경우 등에 수동으로 입력한 태그를 확인하지 않습니다.

프로시저

TinyMCE를 사용하는 HTML 필드가 있는 양식으로 이동합니다.
HTML 필드 레이블을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
속성 필드에 필요한 경우 쉼표로 구분하여 tinymce_allow_all=true를 입력합니다.

딕셔너리 항목 속성은 딕셔너리 항목 양식이 기본 뷰에 표시되지 않으므로 고급 뷰에 있을 때만 추가할 수 있습니다.

다른 속성이 이미 나열되어 있는 경우 쉼표를 구분 기호로 사용합니다.
업데이트를 선택합니다.

URL에서 JavaScript를 허용하도록 TinyMCE 구성

TinyMCE 필드에 딕셔너리 속성을 설정하여 URL에서 JavaScript 사용을 허용할 수 있습니다.

시작하기 전에

필요한 역할: personalize_dictionary 또는 admin

프로시저

TinyMCE를 사용하는 HTML 필드가 있는 양식으로 이동합니다.
HTML 필드 레이블을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
속성 필드에 필요한 경우 쉼표로 구분하여 tinymce_allow_script_urls=true를 입력합니다.

딕셔너리 항목 속성은 딕셔너리 항목 양식이 기본 뷰에 표시되지 않으므로 고급 뷰에 있을 때만 추가할 수 있습니다.

다른 속성이 이미 나열되어 있는 경우 쉼표를 구분 기호로 사용합니다.
업데이트를 선택합니다.

TinyMCE HTML 편집기에서 메뉴 모음 구성

CoreUI와 작업 공간 모두에서 TinyMCE HTML 편집기의 메뉴 모음을 활성화할 수 있습니다. 이 옵션을 사용하면 HTML 편집기 상단에 콘텐츠 생성, 편집 및 서식을 지정하는 데 사용할 수 있는 메뉴 모음이 나타납니다. 기본적으로 메뉴 모음은 비활성 상태입니다. 딕셔너리 속성 구성을 통해 특정 테이블에 대해 활성화할 수 있습니다.

시작하기 전에

필요한 역할: 관리자

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
필드 레이블을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에 editor.config=new TinymceConfigScript().getConfiguration()를 입력합니다.

이 editor.config 속성은 TinymceConfigScript() 스크립트를 가리킵니다.

TinymceConfigScript에 액세스합니다.

다음으로 이동 모두 > 시스템 정의 > 스크립트 포함.
양식 위쪽의 검색 창에 TinymceConfigScript 를 입력하고 Enter 또는 Return을 선택합니다.

TinymceConfigScript를 선택합니다.

기본적으로 다음 스크립트를 볼 수 있습니다.

var TinymceConfigScript = Class.create();
TinymceConfigScript.prototype = {
    initialize: function() {
    },
    setTinymceConfig: function() {
    var tinyConfig = {
        menubar: 'edit format',
        menu: {
            file: { title: 'File', items: 'importword exportpdf exportword | print | deleteallconversations' },
            edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
            view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' }
        },
        style_formats: [
            { title: 'Headings', items: [
                { title: 'Heading 1', format: 'h1' },
                { title: 'Heading 2', format: 'h2' },
                { title: 'Heading 3', format: 'h3' },
                { title: 'Heading 4', format: 'h4' },
                { title: 'Heading 5', format: 'h5' },
                { title: 'Heading 6', format: 'h6' }
            ]},
            { title: 'Inline', items: [
                { title: 'Bold', format: 'bold' },
                { title: 'Italic', format: 'italic' },
                { title: 'Underline', format: 'underline' },
                { title: 'Strikethrough', format: 'strikethrough' },
                { title: 'Superscript', format: 'superscript' },
                { title: 'Subscript', format: 'subscript' },
                { title: 'Code', format: 'code' }
            ]},
            { title: 'Blocks', items: [
                { title: 'Paragraph', format: 'p' },
                { title: 'Blockquote', format: 'blockquote' },
                { title: 'Div', format: 'div' },
                { title: 'Pre', format: 'pre' }
            ]},
            { title: 'Align', items: [
                { title: 'Left', format: 'alignleft' },
                { title: 'Center', format: 'aligncenter' },
                { title: 'Right', format: 'alignright' },
                { title: 'Justify', format: 'alignjustify' }
            ]}
        ]
    };
    return tinyConfig;
},
getConfiguration: function() {
    var config = this.setTinymceConfig();
    answer = JSON.parse(JSON.stringify(config));
},

    type: 'TinymceConfigScript'
};

스크립트에서 메뉴 모음 속성을 예 로 설정하여 메뉴 모음을 활성화합니다.
이렇게 하면 메뉴 모음에서 파일, 편집, 보기, 삽입, 서식 지정 및 테이블 옵션이 활성화됩니다.
메뉴 모음을 비활성화하려면 메뉴 모음 속성을 false로 설정합니다.
메뉴 모음에서 특정 옵션만 활성화하려면 메뉴 모음에 특정 옵션을 나열하여 스크립트를 변경할 수 있습니다.

예를 들어 메뉴 모음: 이 3가지 옵션만 메뉴 모음에 나타나도록 '파일 편집 형식'입니다.

스크립트를 변경하여 메뉴 내에 표시되는 버튼을 구성할 수도 있습니다.

tinymce.init({
    selector: 'textarea', // change this value according to your HTML
    menu:{
        file: { title: 'File', items: 'newdocument restordraft | preview | importword exportpdf exportword | print | deleteallconversations' },
        edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
        view: { title: 'View', items: 'code revision history | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
        insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
        format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
        tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
        table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
        help: { title: 'Help', items: 'help' }
    }
});

style_formats 섹션에 CSS를 추가하여 TinyMCEConfigScript에서 사용자 지정 스타일 형식 옵션을 구성합니다.

TinyMCEConfigScript style_formats 섹션의 예:

style_formats: [
  { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
  ]},
  { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
  ]},
  { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
  ]},
  { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
  ]}
]

세 가지 새로운 스타일 형식(굵은 텍스트, 빨간색 텍스트, 내 인라인)이 추가된 예:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    { title: 'Bold text', inline: 'b' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ] }
  ],
  // The following option is used to append style formats rather than overwrite the default style formats.
  style_formats_merge: true
});

HTML 편집기에 액세스하면 새로운 사용자 지정 스타일 형식(굵은 텍스트, 빨간색 텍스트, 내 인라인)이 메뉴 모음의 형식 섹션에 나타나는 것을 볼 수 있습니다.