Hướng dẫn nhanh về tiện ích bổ sung cho Trình chỉnh sửa Google Trang trình bày

Hướng dẫn nhanh này tạo một tiện ích bổ sung cho Trình chỉnh sửa Google Trang trình bày, giúp dịch văn bản đã chọn trong một bản trình bày.

Mục tiêu

• Thiết lập tập lệnh.
• Chạy tập lệnh.

Điều kiện tiên quyết

Để sử dụng mẫu này, bạn cần đáp ứng các điều kiện tiên quyết sau:

• Một Tài khoản Google (tài khoản Google Workspace có thể yêu cầu quản trị viên phê duyệt).
• Một trình duyệt web có quyền truy cập vào Internet.

Thiết lập tập lệnh

1. Tạo một bản trình bày trong Trang trình bày tại slides.new.
2. Nhấp vào Tiện ích > Apps Script.
3. Nhấp vào Dự án chưa có tiêu đề.
4. Đổi tên dự án Apps Script thành Translate Slides (Dịch trang trình bày) rồi nhấp vào Rename (Đổi tên).
5. Bên cạnh tệp Code.gs, hãy nhấp vào biểu tượng Tuỳ chọn khác more_vert > Đổi tên. Đặt tên translate cho tệp.
6. Nhấp vào biểu tượng Thêm tệp add > HTML. Đặt tên sidebar cho tệp.

7. Thay thế nội dung của từng tệp bằng đoạn mã tương ứng sau đây, rồi nhấp vào biểu tượng Lưu .

   translate.gs

   slides/translate/translate.gs

   Xem trên GitHub

   /**
    * @OnlyCurrentDoc Limits the script to only accessing the current presentation.
    */
   
   /**
    * Create a open translate menu item.
    * @param {Event} event The open event.
    */
   function onOpen(event) {
     SlidesApp.getUi().createAddonMenu()
         .addItem('Open Translate', 'showSidebar')
         .addToUi();
   }
   
   /**
    * Open the Add-on upon install.
    * @param {Event} event The install event.
    */
   function onInstall(event) {
     onOpen(event);
   }
   
   /**
    * Opens a sidebar in the document containing the add-on's user interface.
    */
   function showSidebar() {
     const ui = HtmlService
         .createHtmlOutputFromFile('sidebar')
         .setTitle('Translate');
     SlidesApp.getUi().showSidebar(ui);
   }
   
   /**
    * Recursively gets child text elements a list of elements.
    * @param {PageElement[]} elements The elements to get text from.
    * @return {Text[]} An array of text elements.
    */
   function getElementTexts(elements) {
     let texts = [];
     elements.forEach((element)=> {
       switch (element.getPageElementType()) {
         case SlidesApp.PageElementType.GROUP:
           element.asGroup().getChildren().forEach((child)=> {
             texts = texts.concat(getElementTexts(child));
           });
           break;
         case SlidesApp.PageElementType.TABLE:
           const table = element.asTable();
           for (let y = 0; y < table.getNumColumns(); ++y) {
             for (let x = 0; x < table.getNumRows(); ++x) {
               texts.push(table.getCell(x, y).getText());
             }
           }
           break;
         case SlidesApp.PageElementType.SHAPE:
           texts.push(element.asShape().getText());
           break;
       }
     });
     return texts;
   }
   
   /**
    * Translates selected slide elements to the target language using Apps Script's Language service.
    *
    * @param {string} targetLanguage The two-letter short form for the target language. (ISO 639-1)
    * @return {number} The number of elements translated.
    */
   function translateSelectedElements(targetLanguage) {
     // Get selected elements.
     const selection = SlidesApp.getActivePresentation().getSelection();
     const selectionType = selection.getSelectionType();
     let texts = [];
     switch (selectionType) {
       case SlidesApp.SelectionType.PAGE:
         selection.getPageRange().getPages().forEach((page)=> {
           texts = texts.concat(getElementTexts(page.getPageElements()));
         });
         break;
       case SlidesApp.SelectionType.PAGE_ELEMENT:
         const pageElements = selection.getPageElementRange().getPageElements();
         texts = texts.concat(getElementTexts(pageElements));
         break;
       case SlidesApp.SelectionType.TABLE_CELL:
         selection.getTableCellRange().getTableCells().forEach((cell)=> {
           texts.push(cell.getText());
         });
         break;
       case SlidesApp.SelectionType.TEXT:
         selection.getPageElementRange().getPageElements().forEach((element) =>{
           texts.push(element.asShape().getText());
         });
         break;
     }
   
     // Translate all elements in-place.
     texts.forEach((text)=> {
       text.setText(LanguageApp.translate(text.asRenderedString(), '', targetLanguage));
     });
   
     return texts.length;
   }

   sidebar.html

   slides/translate/sidebar.html

   Xem trên GitHub

   <html>
   <head>
     <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
     <style>
       .logo { vertical-align: middle; }
       ul { list-style-type: none; padding: 0; }
       h4 { margin: 0; }
     </style>
   </head>
   <body>
   <form class="sidebar branding-below">
     <h4>Translate selected slides into:</h4>
     <ul id="languages"></ul>
     <div class="block" id="button-bar">
       <button class="blue" id="run-translation">Translate</button>
     </div>
     <h5 class="error" id="error"></h5>
   </form>
   <div class="sidebar bottom">
     <img alt="Add-on logo" class="logo"
          src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
     <span class="gray branding-text">Translate sample by Google</span>
   </div>
   
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>
     $(function() {
       // Add an input radio button for every language.
       const languages = {
         ar: 'Arabic',
         zh: 'Chinese',
         en: 'English',
         fr: 'French',
         de: 'German',
         hi: 'Hindi',
         ja: 'Japanese',
         pt: 'Portuguese',
         es: 'Spanish'
       };
       const languageList = Object.keys(languages).map((id)=> {
         return $('<li>').html([
           $('<input>')
                   .attr('type', 'radio')
                   .attr('name', 'dest')
                   .attr('id', 'radio-dest-' + id)
                   .attr('value', id),
           $('<label>')
                   .attr('for', 'radio-dest-' + id)
                   .html(languages[id])
         ]);
       });
   
       $('#run-translation').click(runTranslation);
       $('#languages').html(languageList);
     });
   
     /**
      * Runs a server-side function to translate the text on all slides.
      */
     function runTranslation() {
       this.disabled = true;
       $('#error').text('');
       google.script.run
               .withSuccessHandler((numTranslatedElements, element) =>{
                 element.disabled = false;
                 if (numTranslatedElements === 0) {
                   $('#error').empty()
                           .append('Did you select elements to translate?')
                           .append('<br/>')
                           .append('Please select slides or individual elements.');
                 }
                 return false;
               })
               .withFailureHandler((msg, element)=> {
                 element.disabled = false;
                 $('#error').text('Something went wrong. Please check the add-on logs.');
                 return false;
               })
               .withUserObject(this)
               .translateSelectedElements($('input[name=dest]:checked').val());
     }
   </script>
   </body>
   </html>

Chạy tập lệnh

1. Trong bản trình bày của bạn trên Trang trình bày, hãy tải lại trang.
2. Nhấp vào Tiện ích > Dịch trang trình bày > Bắt đầu. Có thể mất vài giây để mục trình đơn của tiện ích bổ sung xuất hiện.
3. Khi được nhắc, hãy cho phép tiện ích bổ sung.
4. Nhấp lại vào Tiện ích > Dịch trang trình bày > Bắt đầu.
5. Thêm văn bản vào bản trình bày rồi chọn văn bản đó.
6. Trong tiện ích bổ sung, hãy nhấp vào Dịch để thay thế văn bản đã chọn.

Các bước tiếp theo

• Mở rộng Google Trang trình bày bằng Apps Script
• Tài liệu tham khảo về dịch vụ Trang trình bày