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

TinyMCE 기본 도구 모음 변경

시스템 속성에서 도구 모음 항목을 설정 전체 작업 공간에서 활성화 또는 비활성화합니다.

시작하기 전에

필요한 역할: admin

프로시저

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

HTML 필드용 편집 도구 모음 구성(TinyMCE v6.8.3)(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 속성을 결정합니다.

시작하기 전에

필요한 역할: admin

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
Related Links(관련 링크) 섹션에서 Advanced View(고급 보기)를 선택합니다.
속성 필드에 editor.toolbar=를 입력한 다음 원하는 도구 모음 버튼을 입력합니다.
예를 들어, editor.toolbar=blocks|bold italic underline strikethrough blockquote subscript superscript 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 링크 이미지 media codemirror 목록 advlist 전체 화면 charmap 방향성 이모티콘 hr insertdatetime 줄 바꿈하지 않는 페이지 나누기 인쇄 검색 바꾸기 wordcount 앵커 codesample visualblocks visualchars compat3x 자동 링크 align_listitems,editor.toolbar= fontfamily fontsize | 굵게 기울임꼴 밑줄 취소선 forecolor backcolor pastetext removeformat | blocks searchreplace 실행 취소 다시 실행 | bullist numlist 내어쓰기 들여쓰기 alignleft, aligncenter, alignright | tableofcontents 테이블 링크 이미지 연결 해제 미디어 codesample | 코드 전체 화면.
업데이트를 선택합니다.

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

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

시작하기 전에

필요한 역할: admin

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블(예: 문서 본문)을 마우스 오른쪽 버튼으로 클릭하고 딕셔너리 구성을 선택합니다.
Related Links(관련 링크) 섹션에서 Advanced View(고급 보기)를 선택합니다.
속성 필드에 editor.plugins= 다음에 원하는 플러그인을 공백으로 구분하여 입력합니다.
예를 들어, editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticon 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 codemirror 코드샘플 colorpicker 방향성 이모티콘 전체 화면 hr 이미지 insertdatetime 링크 목록 미디어 줄 바꿈하지 않는 페이지 나누기 미리보기 print readonlynoborder searchreplace table textcolor tableofcontents visualblocks visualchars wordcount
- 높이, 도구 모음 버튼, 도구 모음 플러그인과 같은 여러 속성을 속성 필드 내에서 결합할 수 있습니다. 예를 들어, editor.height=300,editor.plugins=table colorpicker textcolor 링크 이미지 media codemirror 목록 advlist 전체 화면 charmap 방향성 이모티콘 hr insertdatetime 줄 바꿈하지 않는 페이지 나누기 인쇄 검색 바꾸기 wordcount 앵커 codesample visualblocks visualchars compat3x 자동 링크 align_listitems,editor.toolbar= fontfamily fontsize | 굵게 기울임꼴 밑줄 취소선 forecolor backcolor pastetext removeformat | blocks searchreplace 실행 취소 다시 실행 | bullist numlist 내어쓰기 들여쓰기 alignleft, aligncenter, alignright | tableofcontents 테이블 링크 이미지 연결 해제 미디어 codesample | 코드 전체 화면.
업데이트를 선택합니다.

HTML 필드의 기본 높이 변경

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

시작하기 전에

필요한 역할: admin

이 태스크 정보

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

프로시저

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

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

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

시작하기 전에

필요한 역할: admin

이 태스크 정보

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

프로시저

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

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

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

시작하기 전에

필요한 역할: personalize_dictionary 또는 admin

이 태스크 정보

딕셔너리 속성을 설정한 후 코드 보기를 사용하여 더 이상 사용되지 않는 태그를 수동으로 입력합니다. 편집기는 사용자가 수동으로 입력한 태그의 유효성을 검사하지 않습니다(예: 잘못된 문자를 입력하는 경우).

프로시저

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

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

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

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

URL에서 JavaScript를 사용할 수 있도록 TinyMCE 필드에 사전 속성을 설정할 수 있습니다.

시작하기 전에

필요한 역할: personalize_dictionary 또는 admin

프로시저

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

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

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

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

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

시작하기 전에

필요한 역할: admin

프로시저

변경하려는 HTML 유형 필드가 있는 기록으로 이동합니다.
예를 들어 인시던트, 문제 또는 지식 기록을 선택합니다.
필드 레이블을 마우스 오른쪽 버튼으로 클릭하고 Configure Dictionary(딕셔너리 구성)를 선택합니다.
Related Links(관련 링크) 섹션에서 Advanced View(고급 보기)를 선택합니다.
속성 필드에 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 편집기에 액세스하면 새로운 사용자 정의 스타일 형식(굵은 텍스트, 빨간색 텍스트, 내 인라인)이 메뉴 모음의 형식 섹션에 나타나는 것을 볼 수 있습니다.