如何更改 React-TinyMCE 中的默认语言？答案

【问题标题】：How to change default language in React-TinyMCE?如何更改 React-TinyMCE 中的默认语言？
【发布时间】：2019-09-13 11:31:09
【问题描述】：

我刚刚在我的 React JS 应用程序中安装并配置了 react-tinymce。一切正常！

但是，用户界面是英文的，我的客户希望它是法文的。因此，我遵循了有关 tinymce 文档的建议，但我的文本编辑器中出现了以下错误消息：“无法加载插件 url：https://cloud.tinymce.com/5/langs/fr_FR.js”，并且界面仍然是英文。

这是我对这个元素的代码：

     <Editor
           apiKey='XXX'
           initialValue="<p>Contenu de l'information</p>"
           cloudChannel='Default'
           init={{
             plugins: 'link image code table imagetools media ',
             toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code | table | image',
             language: 'fr_FR',
             images_upload_url: true,
           }}

        onEditorChange={this.handleEditorChange}
    />

有什么想法吗？

提前谢谢你

【问题讨论】：

标签： reactjs tinymce

【解决方案1】：

从here下载您要使用的语言包。
将语言文件解压到您的 public/langs 文件夹中。
设置此设置：

tinymce.init({ 语言：“fa_IR”， language_url: "/langs/fa_IR.js", 方向性：“rtl”， });

【讨论】：

为什么这个答案没有被标记为解决方案？它简单而完美。谢谢@Moh3eN

【解决方案2】：

您必须在此link 中下载 lang 并将文件复制到您的应用中

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import './langs/fa_IR.js';

import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.min.css';
import 'tinymce/skins/content/default/content.css';
import 'tinymce/themes/silver';


// Initialize the app
tinymce.init({
  selector: '#mytextarea',
  language:'fa_IR',
  plugins: ['paste', 'link']
});

【讨论】：

我下载 langs/fa_IR.js

【解决方案3】：

CDN 似乎因 tinymce 而失败。因此，作为一种解决方法，您可以执行以下步骤：-

1) 从here下载语言包

2) 将 language.js 存储到 tinymcd/language 中的某个文件夹中

3）使用language_url参数指向你保存js文件的位置——绝对url

tinymce.init({
  language_url : 'http://example.com/tinymcd/language/fr_FR.js'  // site absolute URL
});

希望有帮助！！

【讨论】：

【解决方案4】：

TinyMCE 云平台目前不托管语言文件，因此您需要下载所需的语言文件并将它们本地托管在您的服务器上，然后使用 language_url 配置选项引用它们。

【讨论】：

【解决方案5】：

//  in  initConfig.js  file;

import zh_Cn from './langs/zh_CN.js';

export const initConfig = {

    language: 'zh_CN',
    language_url: zh_Cn,

......

}

// in Editor.js file

<Editor

        id="Editor1" 
        init={initConfig}   
        disabled={false}
        onInit={(evt, editor) => (editorRef.current = editor)}

// other props
        
/>

【讨论】：