딕셔너리 속성을 통해 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 형식 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 Knowledge 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 단추로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에서, editor.toolbar=를 입력한 다음, 원하는 도구 모음 버튼을 클릭합니다.
예를 들어 editor.toolbar=blocks|bold italic underline strikethrough blockquote subscript 위 첨자 removeformat| bullist numlist outdent indent|undo redo|table hr|link unlink|image media code|visualblocks preview fullscreen.
주:
- 추가하려는 도구 모음 항목뿐만 아니라 표시하려는 모든 도구 모음 항목을 포함합니다.
- 연결된 딕셔너리 기록에 있는 필드의 속성 필드에 대한 구성은 시스템 속성 glide.ui.html.editor.toolbar의 값을 재정의합니다.
- 높이, 도구 모음 버튼, 도구 모음 플러그인과 같은 여러 속성을 속성 필드 내에서 결합할 수 있습니다. 예: editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons 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 왼쪽 정렬, 정렬, 정렬, 오른쪽 정렬 | tableofcontents 테이블 링크 연결 해제 이미지 미디어 codesample | 코드 전체 화면.
업데이트를 선택합니다.

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

TinyMCE 사전의 속성을 설정하여 특정 HTML 필드에서 플러그인을 활성화하거나 비활성화합니다.

시작하기 전에

필요한 역할: 관리자

프로시저

변경하려는 HTML 형식 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 Knowledge 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 단추로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에서 editor.plugins=를 입력한 다음 원하는 플러그인을 공백으로 구분하여 입력합니다.
예를 들어, editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor tableofcontents codesample visualblocks visualchars compat3x autolink align_listitems.
주:
- 추가하려는 도구 모음 항목뿐만 아니라 표시하려는 모든 도구 모음 항목을 포함합니다.
- 연결된 딕셔너리 기록에 있는 필드의 속성 필드에 대한 구성은 시스템 속성 glide.ui.html.editor.toolbar의 값을 재정의합니다.
- 허용되는 플러그인은 다음과 같습니다. advlist align_listitems anchor autolink 자동 크기 조정 bbcode charmap codemirror codesample colorpicker directionality emoticons fullscreen hr image insertdatetime link lists media nonbreaking pagebreak preview print readonlynoborder searchreplace table textcolor tableofcontents visualblocks visualchars wordcount
- 높이, 도구 모음 버튼, 도구 모음 플러그인과 같은 여러 속성을 속성 필드 내에서 결합할 수 있습니다. 예: editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons 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 왼쪽 정렬, 정렬, 정렬, 오른쪽 정렬 | tableofcontents 테이블 링크 연결 해제 이미지 미디어 codesample | 코드 전체 화면.
업데이트를 선택합니다.

HTML 필드의 기본 높이 변경

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

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

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

프로시저

변경하려는 HTML 형식 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 Knowledge 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 단추로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에 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 형식 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 Knowledge 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 단추로 클릭하고 딕셔너리 구성을 선택합니다.
기본값 탭을 선택합니다.
기본값 필드에 를 입력합니다. 여기서 X가 기본값입니다.
예:
- 글꼴을 크게 설정하려면 다음을 입력합니다. 
- 크기를 10으로 설정하려면 다음을 입력하십시오. 
업데이트를 선택합니다.

사용되지 않는 태그를 허용하도록 TinyMCE 구성

TinyMCE 필드에 딕셔너리 속성을 설정하여 더 이상 사용되지 않는 HTML 태그(예: 및 . 기본적으로 TinyMCE는 굵 게 및 기울임꼴 서식에 and 태그를 사용합니다.

시작하기 전에

필요한 역할: 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 형식 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 Knowledge 기록을 선택합니다.
필드 레이블을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
관련 링크 섹션에서 고급 뷰를 선택합니다.
속성 필드에 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'
};

메뉴 모음을 사용하려면 스크립트에서 메뉴 모음 속성을 true 로 설정합니다.
이렇게하면 메뉴 표시 줄에서 "파일", "편집", "보기", "삽입", "형식", "표"의 모든 옵션이 활성화됩니다.
메뉴 모음을 비활성화하려면 메뉴 모음 속성을 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 편집기에 액세스하면 새로운 사용자 지정 스타일 형식(굵은 텍스트, 빨간색 텍스트, 내 인라인)이 메뉴 모음의 형식 섹션에 나타나는 것을 볼 수 있습니다.