jira plugin 새로운 page에서 richtext editor(wiki renderor) 적용 - catmasterlim/docs GitHub Wiki

Jira내에서 richtext를 적용

  • 기본 사용 lib는 tinymce

  • jira 기본 설치된 ( bundled plugin ) jira-editor-plugin-x.x.x.jar 플러그인을 통해서 분석

  1. atlassian-plugin.xml에 종속성 추가
<dependency>com.atlassian.jira.plugins.jira-editor-plugin:init</dependency>
<dependency>com.atlassian.jira.plugins.jira-editor-plugin:tinymce</dependency>

(optional ) jira 설정에서 richtext enable 체크

<condition class="com.atlassian.jira.plugin.editor.condition.UrlReadingRichTextEnabledCondition" />
  1. 사용할 textarea에 적용 가이드 tinymce style 변경 
 <textarea id="testrich"> </textarea>
let textareaId = "testrich"
let $element = $("textarea#"+ textareaId);

tinymce.init({ 
        menubar: false,
        plugins: ["autoresize", "lists", "advlist",  "styles", "image", "link", "autolink", "table", "code", "codesample", "fullscreen", "help"], 
        toolbar: [
            { name: 'history', items: [ 'undo', 'redo' ] },
            { name: 'styles', items: [ 'styles', 'forecolor'  ] },
            { name: 'formatting', items: [ 'bold', 'italic' ] },
            { name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
            { name: 'indentation', items: [ 'outdent', 'indent' ] },
            { name: 'links', items: [ 'link', 'image', 'autolink',] } , 
            { name: 'macro', items: [ 'code', 'bullist', 'numlist'  ] } , 
            { name: 'table', items: [ 'table' ] },
            { name: 'extra', items: [ 'fullscreen' ] }
        ],
        statusbar: false,
        selector: $element.selector });

// 컨테이너에 넣고 싶으면 추가 ( 테두리가 사라짐 )
if (!$element.parent().hasClass("rte-container")) {
    $element.wrap(JIRA.Editor.Init.Templates.container());
}
  1. get value
let textareaId = "testrich"
let $element = $("textarea#"+ textareaId);
let value = $("#" + textareaId+ "_ifr").contents().find('#tinymce').html()
⚠️ **GitHub.com Fallback** ⚠️