[英]how to used google-input-tool in react js
我正在使用代碼作為 Google Transliterate API 開發人員指南,但它不起作用
代碼
import React, { Component } from "react";
import PropTypes from "prop-types";
import $ from 'jquery';
import 'https://invitationindia.pages.dev/app-js/translation.min.js';
class EditText extends Component {
constructor(props) {
super(props);
this.state = {
element: "",
}
}
componentDidMount() {
google.load("elements", "1", { packages: "transliteration" });
let control;
function onLoad() {
var options = {
//Source Language
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
// Destination language to Transliterate
destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: "ctrl+g",
transliterationEnabled: true
},
control = new google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(["txtMessage"]);
}
google.setOnLoadCallback(onLoad);
}
render() {
const { props } = this;
return (
<>
<div id="txtMessage" contentEditable="true"
style={{
fontSize: props.fontSize,
}}
>
{props.Text}
</div>
</>
);
}
}
export default EditText;
請幫助我如何編寫正確的代碼
如果你想添加谷歌輸入工具,你可以使用下面的代碼來添加它
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['gu', 'ml', 'hi', 'kn', 'ta', 'te'],
shortcutKey: 'ctrl+m',
transliterationEnabled: true
}
// Create an instance on TransliterationControl with the required options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = ["language"];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between English and other destination language.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<textarea name="hi" rows="6" id="language" cols="6" style="width:600px;height:70px" ></textarea>
<div id='translControl'></div>
您可以改用 'react-transliterate' npm package。 這是鏈接 - https://snyk.io/advisor/npm-package/react-transliterate
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.