jQuery中如何使用工作流程圖bpmn-js.js 漢化

初始化后，引入漢化文件 ，注意引入順序  

<link rel="stylesheet" href="bpmn/css/bpmn.css" />
<link rel="stylesheet" href="bpmn/css/diagram-js.css" />

<script type="text/javascript" src="../js/jquery.js" ></script>
<script src="bpmn/bpmn-modeler.development.js"></script>
//漢化
<script type="text/javascript" src="bpmn/sinicization/customTranslate.js" ></script>

初始化

    $(function(){

        var BpmnModeler = window.BpmnJS;
        //此處為漢化對象
        var customTranslateModule = {
          translate: [ 'value',  customTranslate]
        };
        var xml = "<?xml version='1.0' encoding='UTF-8'?><definitions xmlns='http://www.omg.org/spec/BPMN/20100524/MODEL' xmlns:bpmndi='http://www.omg.org/spec/BPMN/20100524/DI' xmlns:omgdi='http://www.omg.org/spec/DD/20100524/DI' xmlns:omgdc='http://www.omg.org/spec/DD/20100524/DC' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' id='sid-38422fae-e03e-43a3-bef4-bd33b32041b2' targetNamespace='http://bpmn.io/bpmn' exporter='bpmn-js (https://demo.bpmn.io)' exporterVersion='5.1.2'><process id='Process_1' isExecutable='false'><startEvent id='StartEvent_1y45yut' name='開始'><outgoing>SequenceFlow_0h21x7r</outgoing></startEvent><task id='Task_1hcentk' name='審批'><incoming>SequenceFlow_0h21x7r</incoming><outgoing>SequenceFlow_06o0wf0</outgoing></task><sequenceFlow id='SequenceFlow_0h21x7r' sourceRef='StartEvent_1y45yut' targetRef='Task_1hcentk' /><task id='Task_13intos' fill='red' name='下一節點'><incoming>SequenceFlow_06o0wf0</incoming><outgoing>SequenceFlow_1oydyx4</outgoing></task><sequenceFlow id='SequenceFlow_06o0wf0' sourceRef='Task_1hcentk' targetRef='Task_13intos' /><endEvent id='EndEvent_0aot3cz' name='結束'><incoming>SequenceFlow_1oydyx4</incoming></endEvent><sequenceFlow id='SequenceFlow_1oydyx4' sourceRef='Task_13intos' targetRef='EndEvent_0aot3cz' /></process><bpmndi:BPMNDiagram id='BpmnDiagram_1'><bpmndi:BPMNPlane id='BpmnPlane_1' bpmnElement='Process_1'><bpmndi:BPMNShape id='StartEvent_1y45yut_di' bpmnElement='StartEvent_1y45yut'><omgdc:Bounds x='152' y='102' width='36' height='36' /><bpmndi:BPMNLabel><omgdc:Bounds x='160' y='145' width='22' height='14' /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id='Task_1hcentk_di' bpmnElement='Task_1hcentk'><omgdc:Bounds x='240' y='80' width='100' height='80' /></bpmndi:BPMNShape><bpmndi:BPMNEdge id='SequenceFlow_0h21x7r_di' bpmnElement='SequenceFlow_0h21x7r'><omgdi:waypoint x='188' y='120' /><omgdi:waypoint x='240' y='120' /></bpmndi:BPMNEdge><bpmndi:BPMNShape id='Task_13intos_di' bpmnElement='Task_13intos'><omgdc:Bounds x='400' y='80' width='100' height='80' /></bpmndi:BPMNShape><bpmndi:BPMNEdge id='SequenceFlow_06o0wf0_di' bpmnElement='SequenceFlow_06o0wf0'><omgdi:waypoint x='340' y='120' /><omgdi:waypoint x='400' y='120' /></bpmndi:BPMNEdge><bpmndi:BPMNShape id='EndEvent_0aot3cz_di' bpmnElement='EndEvent_0aot3cz'><omgdc:Bounds x='562' y='102' width='36' height='36' /><bpmndi:BPMNLabel><omgdc:Bounds x='569' y='145' width='22' height='14' /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNEdge id='SequenceFlow_1oydyx4_di' bpmnElement='SequenceFlow_1oydyx4'><omgdi:waypoint x='500' y='120' /><omgdi:waypoint x='562' y='120' /></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>"; // ADD BPMN 2.0 XML HERE
        var modeler = new BpmnModeler({
            container: '#canvas',
            additionalModules:[
                customTranslateModule
            ]
        });


        modeler.importXML(xml, function(err) {
            if (err) {
                console.log('error rendering', err);
            } else {
                console.log('rendered');
            }
        });
    });

效果圖預覽

 

 

漢化文件 customTranslate.js 源碼 

var customTranslate = function(template, replacements) {
    replacements = replacements || {};

    // Translate
    template = translations[template] || template;

    // Replace
    return template.replace(/{([^}]+)}/g, function(_, key) {

        let str=replacements[key];
        if(translations[replacements[key]]!=null&&translations[replacements[key]]!='undefined'){
            str=translations[replacements[key]];
        }
        return  str || '{' + key + '}';

    });
}
var translations = {
    'Create StartEvent':'創建開始節點',
    'Create EndEvent':'創建結束節點',
    'Create user-task':'創建用戶任務',
    // Labels
    'Activate the global connect tool' : '激活全局連接工具',
    'Append {type}': '添加 {type}',
    'Add Lane above': '在上面添加道',
    'Divide into two Lanes': '分割成兩個道',
    'Divide into three Lanes': '分割成三個道',
    'Add Lane below': '在下面添加道',
    'Append compensation activity': '追加補償活動',
    'Change type': '修改類型',
    'Connect using Association': '使用關聯連接',
    'Connect using Sequence/MessageFlow or Association': '使用順序/消息流或者關聯連接',
    'Connect using DataInputAssociation': '使用數據輸入關聯連接',
    'Remove': '移除',
    'Activate the hand tool': '激活抓手工具',
    'Activate the lasso tool': '激活套索工具',
    'Activate the create/remove space tool': '激活創建/刪除空間工具',
    'Create expanded SubProcess': '創建擴展子過程',
    'Create IntermediateThrowEvent/BoundaryEvent' : '創建中間拋出事件/邊界事件',
    'Create Pool/Participant': '創建池/參與者',
    'Parallel Multi Instance': '並行多重事件',
    'Sequential Multi Instance': '時序多重事件',
    'DataObjectReference':'數據對象參考',
    'DataStoreReference':'數據存儲參考',
    'Loop': '循環',
    'Ad-hoc': '即席',
    'Create {type}': '創建 {type}',
    'Create Task': '任務',
    'Send Task': '發送任務',
    'Receive Task': '接收任務',
    'User Task': '用戶任務',
    'Manual Task': '手工任務',
    'Business Rule Task': '業務規則任務',
    'Service Task': '服務任務',
    'Script Task': '腳本任務',
    'Call Activity': '調用活動',
    'Sub Process (collapsed)': '子流程（折疊的）',
    'Sub Process (expanded)': '子流程（展開的）',
    'Start Event': '開始事件',
    'StartEvent': '開始事件',
    'Intermediate Throw Event': '中間事件',
    'End Event': '結束事件',
    'EndEvent': '結束事件',
    'Create Gateway': '創建網關',
    'Create Intermediate/Boundary Event': '創建中間/邊界事件',
    'Message Start Event': '消息開始事件',
    'Timer Start Event': '定時開始事件',
    'Conditional Start Event': '條件開始事件',
    'Signal Start Event': '信號開始事件',
    'Error Start Event': '錯誤開始事件',
    'Escalation Start Event': '升級開始事件',
    'Compensation Start Event': '補償開始事件',
    'Message Start Event (non-interrupting)': '消息開始事件（非中斷）',
    'Timer Start Event (non-interrupting)': '定時開始事件（非中斷）',
    'Conditional Start Event (non-interrupting)': '條件開始事件（非中斷）',
    'Signal Start Event (non-interrupting)': '信號開始事件（非中斷）',
    'Escalation Start Event (non-interrupting)': '升級開始事件（非中斷）',
    'Message Intermediate Catch Event': '消息中間捕獲事件',
    'Message Intermediate Throw Event': '消息中間拋出事件',
    'Timer Intermediate Catch Event': '定時中間捕獲事件',
    'Escalation Intermediate Throw Event': '升級中間拋出事件',
    'Conditional Intermediate Catch Event': '條件中間捕獲事件',
    'Link Intermediate Catch Event': '鏈接中間捕獲事件',
    'Link Intermediate Throw Event': '鏈接中間拋出事件',
    'Compensation Intermediate Throw Event': '補償中間拋出事件',
    'Signal Intermediate Catch Event': '信號中間捕獲事件',
    'Signal Intermediate Throw Event': '信號中間拋出事件',
    'Message End Event': '消息結束事件',
    'Escalation End Event': '定時結束事件',
    'Error End Event': '錯誤結束事件',
    'Cancel End Event': '取消結束事件',
    'Compensation End Event': '補償結束事件',
    'Signal End Event': '信號結束事件',
    'Terminate End Event': '終止結束事件',
    'Message Boundary Event': '消息邊界事件',
    'Message Boundary Event (non-interrupting)': '消息邊界事件（非中斷）',
    'Timer Boundary Event': '定時邊界事件',
    'Timer Boundary Event (non-interrupting)': '定時邊界事件（非中斷）',
    'Escalation Boundary Event': '升級邊界事件',
    'Escalation Boundary Event (non-interrupting)': '升級邊界事件（非中斷）',
    'Conditional Boundary Event': '條件邊界事件',
    'Conditional Boundary Event (non-interrupting)': '條件邊界事件（非中斷）',
    'Error Boundary Event': '錯誤邊界事件',
    'Cancel Boundary Event': '取消邊界事件',
    'Signal Boundary Event': '信號邊界事件',
    'Signal Boundary Event (non-interrupting)': '信號邊界事件（非中斷）',
    'Compensation Boundary Event': '補償邊界事件',
    'Exclusive Gateway': '互斥網關',
    'Parallel Gateway': '並行網關',
    'Inclusive Gateway': '相容網關',
    'Complex Gateway': '復雜網關',
    'Event based Gateway': '事件網關',
    'Transaction': '轉運',
    'Sub Process': '子流程',
    'Event Sub Process': '事件子流程',
    'Collapsed Pool': '折疊池',
    'Expanded Pool': '展開池',

    // Errors
    'no parent for {element} in {parent}': '在{parent}里，{element}沒有父類',
    'no shape type specified': '沒有指定的形狀類型',
    'flow elements must be children of pools/participants': '流元素必須是池/參與者的子類',
    'out of bounds release': 'out of bounds release',
    'more than {count} child lanes': '子道大於{count} ',
    'element required': '元素不能為空',
    'diagram not part of bpmn:Definitions': '流程圖不符合bpmn規范',
    'no diagram to display': '沒有可展示的流程圖',
    'no process or collaboration to display': '沒有可展示的流程/協作',
    'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未繪制',
    'already rendered {element}': '{element} 已被渲染',
    'failed to import {element}': '導入{element}失敗',
    //屬性面板的參數
    'Id':'id',
    'Name':'name',
    'General':'屬性',
    'Details':'詳情',
    'Message Name':'消息名稱',
    'Message':'消息',
    'Initiator':'創建者',
    'Asynchronous Continuations':'持續異步',
    'Asynchronous Before':'異步前',
    'Asynchronous After':'異步后',
    'Job Configuration':'工作配置',
    'Exclusive':'排除',
    'Job Priority':'工作優先級',
    'Retry Time Cycle':'重試時間周期',
    'Documentation':'文檔',
    'Element Documentation':'元素文檔',
    'History Configuration':'歷史配置',
    'History Time To Live':'歷史的生存時間',
    'Forms':'表單',
    'Form Key':'表單key',
    'Form Fields':'表單字段',
    'Business Key':'業務key',
    'Form Field':'表單字段',
    'ID':'編號',
    'Type':'類型',
    'Label':'名稱',
    'Default Value':'默認值',
    'Validation':'校驗',
    'Add Constraint':'添加約束',
    'Config':'配置',
    'Properties':'屬性',
    'Add Property':'添加屬性',
    'Value':'值',
    'Listeners':'監聽器',
    'Execution Listener':'執行監聽',
    'Event Type':'事件類型',
    'Listener Type':'監聽器類型',
    'Java Class':'Java類',
    'Expression':'表達式',
    'Must provide a value':'必須提供一個值',
    'Delegate Expression':'代理表達式',
    'Script':'腳本',
    'Script Format':'腳本格式',
    'Script Type':'腳本類型',
    'Inline Script':'內聯腳本',
    'External Script':'外部腳本',
    'Resource':'資源',
    'Field Injection':'字段注入',
    'Extensions':'擴展',
    'Input/Output':'輸入/輸出',
    'Input Parameters':'輸入參數',
    'Output Parameters':'輸出參數',
    'Parameters':'參數',
    'Output Parameter':'輸出參數',
    'Timer Definition Type':'定時器定義類型',
    'Timer Definition':'定時器定義',
    'Date':'日期',
    'Duration':'持續',
    'Cycle':'循環',
    'Signal':'信號',
    'Signal Name':'信號名稱',
    'Escalation':'升級',
    'Error':'錯誤',
    'Link Name':'鏈接名稱',
    'Condition':'條件名稱',
    'Variable Name':'變量名稱',
    'Variable Event':'變量事件',
    'Specify more than one variable change event as a comma separated list.':'多個變量事件以逗號隔開',
    'Wait for Completion':'等待完成',
    'Activity Ref':'活動參考',
    'Version Tag':'版本標簽',
    'Executable':'可執行文件',
    'External Task Configuration':'擴展任務配置',
    'Task Priority':'任務優先級',
    'External':'外部',
    'Connector':'連接器',
    'Must configure Connector':'必須配置連接器',
    'Connector Id':'連接器編號',
    'Implementation':'實現方式',
    'Field Injections':'字段注入',
    'Fields':'字段',
    'Result Variable':'結果變量',
    'Topic':'主題',
    'Configure Connector':'配置連接器',
    'Input Parameter':'輸入參數',
    'Assignee':'代理人',
    'Candidate Users':'候選用戶',
    'Candidate Groups':'候選組',
    'Due Date':'到期時間',
    'Follow Up Date':'跟蹤日期',
    'Priority':'優先級',
    'This maps to the process definition key.':'此處定義工作流主鍵',
    'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達式，如： ${someDate} ,或者一個ISO標准日期，如：2015-06-26T09:54:00',
    'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達式，如： ${someDate} ,或者一個ISO標准日期，如：2015-06-26T09:54:00',
    'Variables':'變量',


}