Adding Translation Feature to Froala

by Froala_marketing

HTML

<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css">
<div id="editor"></div>

JavaScript

var myHeaders = new Headers()
myHeaders.append("X-API-KEY", "b2418bb30650672654daa4e0f594ae344919be00")
myHeaders.append("Content-Type", "application/json")

var requestOptions = {
  method: "GET",
  redirect: "follow",
  headers: myHeaders,
}

fetch("https://api.translateplus.io/v1/supported-languages", requestOptions)
  .then((response) => response.json())
  .then((result) => initFroala(result.supported_languages))
  .catch((error) => console.log("error", error))

function initFroala(options) {
  FroalaEditor.ICON_DEFAULT_TEMPLATE = "font_awesome_5"

  FroalaEditor.DefineIcon("translate", { NAME: "language" })

  FroalaEditor.RegisterCommand("translate", {
    type: "dropdown",
    title: "translate",
    options,
    refreshAfterCallback: true,
    html: function html() {
      var c = '<ul class="fr-dropdown-list" role="presentation">'
      var options = FroalaEditor.COMMANDS.translate.options

      for (var val in options) {
        if (options.hasOwnProperty(val) && val!=="Auto Detect") {
          c += `<li role="presentation"><a class="fr-command fr-title" tabIndex="-1" role="option" data-cmd="translate" data-param1="${this.language.translate(options[val])}" title="${this.language.translate(val)}"> ${this.language.translate(val)} <span class="fr-sr-only">${this.language.translate(val)}</span></a></li>`
        }
      }

      c += "</ul>"
      return c
    },
    callback: async function callback(cmd, param1) {
    	if(this.core.isEmpty()) return;
    
      this.commands.selectAll();
      const text = this.selection.text();   
      const result = await translate(text, param1);
      this.html.insert(result.translations.translation, true);

      
    },
    

  })



  async function translate(text, translateTo) {
    var requestOptions = {
      method: "POST",
      redirect: "follow",
      headers: myHeaders,
      body: JSON.stringify({
        text,
        source: "auto",
        target: translateTo,
      }),
    }
    let data = false
   ...