React在线编辑国际化文本

最新推荐文章于 2024-09-26 08:38:16 发布
最新推荐文章于 2024-09-26 08:38:16 发布
阅读量156 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b2cb779e51d4558a846c93e
版权

今天给大家介绍一个轻量但神奇的国际化库tiny-i18n

在我们的项目日益庞大的情况下，国际化的字典愈变愈大，国际化文本的维护是一个问题；
有时候修改一个字段，查找就花费了很大的时间功夫。 这个时候 tiny-i18n 中的 @tiny-i18n/react-live 就可以发挥它的力量了，可以帮助我们在线可视化修改、新增国际化字段。

效果

  • 视频效果：http://obu9je6ng.bkt.clouddn.com/Jietu20180622-102135-HD.mp4

  • DEMO - 更新后，字典存储至 localStorage 中

体验在线编辑

实现原理

对 i18n 转换方法进行包装，转换成包含特殊字符（包裹）的字符串；同时对 React.createElement 方法进行包装，检测出包含特殊字符（包裹）的字符串，这时候就会被认为是国际化的文本，这个时候再去注入一些而外的交互逻辑。

转载于:https://juejin.im/post/5b2cb779e51d4558a846c93e

weixin_34112208
关注
基于Slate的React富文本编辑器插件化可扩展支持自定义上传国际化
rojer的博客
07-07 2464
DSlate 是一个基于Slate 构建的React富文本编辑器。你可以通过插件的方式轻松自定义节点、工具等元素。同时支持自定义上传、国际化。预设了两种常见的UI风格（Ant Design与Semi Design）
react 中国际化_从头到尾如何在React中设置国际化
cumian8165的博客
07-22 1941
react 中国际化This post will use react-intl to help you go from create-react-app to setting up the framework to a completed, translated web app! 这篇文章将使用react-intl来帮助您从create-react-app到设置框架，再到完整的已翻译Web应用程序...
react-online-editor::pencil:简单的在线React编辑器
05-06
前言 近几年前端发展Swift，很多概念性的想法渐渐地变成了现实，比如前端微服务、Serverless 在前端的应用、在线IDE编码等，越来越多“工程”级别的项目选择使用 Web 浏览器作为宿主平台，前端发展可谓如日中天，本篇文章选择在线IDE作为切入点，介绍其实现原理，并且动手写一个简易版本的 React 在线IDE。 CodeSandBox 是目前为止最为强大的在线 IDE 工具之一，他实现了 90% 的本地前端 IDE 工具的功能，以下是比较令人惊叹的几个特性： 完全浏览器在线打包，实现了可在浏览器运行的 webpack 工具。 可使用 npm 包 支持文件系统 可离线使用 可在线发布应用 是的，你没有看错，这一切都是发生在浏览器上，更为惊叹的是，CodeSanBox 是个人项目，并不是由专业的公司团队开发完成。其强大功能证明了，浏览器能够做的事情是无穷无尽的，下面我将简单讲解其结
推荐一款创新的React在线编辑器：Vinceredream/react-online-editor
gitblog_00004的博客
04-24 917
推荐一款创新的React在线编辑器：Vinceredream/react-online-editor 项目地址:https://gitcode.com/Vincedream/react-online-editor 项目简介 Vinceredream/react-online-editor 是一个基于React框架构建的在线代码编辑器组件。它允许开发者在Web应用中嵌入一个实时预览、可编辑的代码环...
react在线编辑器
DreamFJ的博客
04-22 1734
https://codesandbox.io/s/proud-meadow-8i3nz?file=/src/index.js
详述iOS国际化
Vic
11-25 536
本文是投稿文章，作者：龚凯 原文：iOS国际化 在真正将国际化实践前，只知道通过NSLocalizedString方法将相应语言的字符串加载进来即可。但最近公司项目的新需求增加英文版本，并支持应用内无死角切换~，这才跳过各种坑实现了应用内切换语言，并记录至此。 环境 系统环境: iOS7 - iOS9 开发环境: Swift2 & Xcode7 DEMO
react-exercise-playground：实时运行React代码的在线编辑器
最新发布
gitblog_00352的博客
09-26 300
react-exercise-playground：实时运行React代码的在线编辑器 react-playground react在线代码编辑器，可实时运行react代码，支持动态引入自定义文件和第三方依赖包 项目地址: htt...
react 表格嵌套(主表和子表都可以新增、编辑、保存、删除、主表展开和分页国际化)
11-19
国际化则意味着分页的文本（如“上一页”、“下一页”、“第X页”等）需要根据用户的语言设置动态调整。可以使用`react-intl`等库来实现国际化。 8. **不含store**：这里的描述提到不包含`store`，可能是指没有使用...
React 国际化配置
TM_Godspeed的博客
08-04 770
依赖 yarn add react-intl 重要目录结构 练习时可以先按此目录结构把文件都新建好 |- src | |-- i18n | | |-- message | | | |-- en-US.js | | | |-- zh-CN.js | | | |-- index.js | | | | | |-- locales.js | | |-- provider.js | | |-- translate.js | | |-- index.js | | | |-- App.js 配置信息 locales
react-tag-input：React和可编辑标签的简单标签输入组件
02-13
React Tag Input是一个专门为React开发的轻量级组件，它允许用户在输入框中输入文本，并将其转化为可编辑的标签。这个组件特别适用于那些需要用户输入多选数据的应用场景，如关键词选择、分类标记等。其核心特性在于...
riek：React的一组常见表单组件，可在线编辑
03-04
React内联编辑工具包 各种常见HTML表单元素，可在React方法中进行在线编辑。 试用，看看它是什么样子。 安装 npm install riek --save-dev 或者 yarn add riek --dev 使用--save-dev因为您不想在生产中构建和打包JS / CSS 用法 导入库： import { RIEToggle , RIEInput , RIETextArea , RIENumber , RIETags , RIESelect } from 'riek' import _ from 'lodash' 假设我们希望能够编辑Task标题并将更改发送到服务器。 这是一个存储在我们父React组件内部的Task ： this . state = { id : 1 , title : 'Cover with tests' , completed
react-todolistt：在线React Editor和IDE：编译，运行和托管React应用
02-15
Repl.it React.js模板 一个轻量级且超快速的React.js模板。 由。 关于它的几件事： 入口文件是src/App.js ，其中已初始化React 诸如html，css和image之类的公共文件应位于/public JavaScript文件应位于src 开发过程 只需编写代码，添加文件等，然后运行 Esbuild将构建您的应用程序，如果出现错误，您将在控制台中看到它 如果构建成功，您将看到Web输出窗格刷新 npm软件包 该模板具有以下依赖关系，并作为项目的一部分安装，因此您可以自由更改，升级或替换它们： ：JavaScript编译器和捆绑程序 ：是一个小型静态服务器 react和react-dom：因为它是一个React.js模板:-) 要添加更多软件包，无论是React.js组件还是其他组件，您都可以简单地import该软件包，然后Repl.it会找到它并
react-利用React创建word文档
08-15
react-Haunted针对Web组件实现的ReactHooksAPI
react-app框架——使用monaco editor实现online编辑html代码编辑器
编程知识分享，主打前端
01-18 2万+
大家好，我是yma16，本文分享关于 react-app框架——使用monaco editor实现online编辑html代码编辑器。monaco editor 编辑器Monaco Editor是一款功能强大的Web编辑器，由微软开发并使用在多个项目中。它是基于VS Code编辑器的核心组件，具有类似的功能和用户体验。轻量级：Monaco Editor具有出色的性能，可以快速加载和渲染大型文件。可定制性：用户可以通过添加自定义插件和主题来扩展和个性化编辑器。
react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
热门推荐
编程知识分享，主打前端
08-06 3万+
大家好，我是yma16，本文分享关于react搭建在线编辑html的站点。react 发展历史React是由Facebook开发的一种JavaScript库，用于构建用户界面。React最初发布于2013年，并在2015年开源。以下是React框架的历史：2010年，Facebook开始使用XHP框架，使PHP代码生成HTML和JSX代码。Facebook的前端工程师Jordan Walke开始研究在JavaScript中实现类似的功能。
React+wangEditor生成在线编辑工具
Reset_Xc的博客
02-10 4222
利用react+wangEditor 实现一个简单的在线编辑工具
react使用CKEditor5，两种使用方式（在线构建器和从源代码构建）。附富文本国际化
weixin_47592804的博客
04-24 2130
react CKEditor5使用配置 两种使用方式（在线构建器和从源代码构建） 附国际化
React基于monaco editor的在线代码编辑器开发
lzc的博客
08-27 1914
在React项目中集成monaco editor，快来看看如何实现html标签回车自动闭合、html标签未闭合检测、主题定制、右键面板定制等功能
前端js react vue怎么实现在线预览doc文档
weixin_39818813的博客
07-11 2316
目前在纯前端层面没有很好的方案，基本都需要服务端的介入。
前端开发必备：富文本编辑器的实用指南
7. **国际化**：为了支持不同语言的用户，编辑器应提供国际化支持，包括文本的本地化、方向性的处理等。 举例来说，CKEditor、TinyMCE和Quill等都是流行的富文本编辑器选择。它们通常提供各种插件和配置选项，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值