rich text editor

即将发生的破坏变更警告

在18.10。我们将发布丰富的文本编辑器的新主要版本（V8），该版本是旧代码库的重写。此警告对于使用版本控制的NPM软件包用户并不重要，但是UMPKG捆绑包（http://unpkg.com/rich-text-editor/dist/rich-text-edter-bundle.js）会注意到，最新代码的最新捆绑包将不再像预期一样工作。为避免系统的破坏更改，您可以将UMPKG软件包的版本明确设置为V7的最后一个稳定版本，如下所示：http：//unpkg.com/rich-text-ect-7.3.0.3.0/dist/rich-text/rich-text-ext-ext-editor-bundle.js

这将使您有时间开发系统，以适应新版本的发布。

abitti.net

使用Abitti商标政策

丰富的文本编辑器，并为芬兰入学考试委员会提供数学支持。可以在https://math-demo.abitti.fi/上找到现场演示

由于v4.0.0，仅提供带有ES模块的ES2017代码（在dist目录中）。如果您想使用此库，则可能需要一个Bundler，例如WebPack或crolup。

用法

使用NPM使用

使用npm install rich-text-editor安装软件包。丰富的文本编辑器可以用作

• REACT组件import RichTextEditor from 'rich-text-editor'
• 或作为不使用React React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'的函数

大多数传递给组件或初始化函数的属性如下所述。可以在类型和/或源代码中找到更多信息。

用作CDN捆绑包

Add a script tag to your HTML page whose source is https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , eg <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> .

这将在窗口中添加makeRichText ，可用于初始化编辑器。

该函数将以下参数作为对象：

钥匙	默认
容器	document.getElementById（'Rich-Text-editor-root'）
语言	'fi'
baseurl	''
允许filetypes	['image/png'，'image/jpeg']
onvaluechange	（）=> {}
textareaprops	{}

例子：

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextAareAprops传递给可见编辑器元素的基础DIV元素，以下是与CDN用户配置相关的元素：

钥匙	类型	目的
Ariainvalid	布尔	添加ARIA-INVALID
Arialabelledby	细绳	添加Aria-labelledby
编辑风格	React.cssproperties	将CSS属性直接到编辑元素
className	细绳	编辑元素的其他类名称
ID	细绳	编辑元素的ID字段
朗	细绳	lang-field到编辑元素以供可访问性

目标（在提交之前请阅读此内容）

已经开发了丰富的文本编辑器，以允许芬兰入学考试的候选人附加屏幕截图并写入方程式作为其提交的一部分。我们的目的不是为Textarea创建通用的倒入替换，而是在Abitti及其嵌入式浏览器中使用的编辑器。

在庆祝每个错误报告，功能请求和拉请请求时，我们请您记住以下内容：

• 与输入公式和渲染乳胶有关的大多数问题是由MathJax和Mathquill库引起的。我们没有资源根据提交给我们的问题编写拉请请求。出于类似的原因，我们不会向我们报告的上游问题。
• 我们没有关注问题或拉的请求，这些要求超出了我们的任务-Abitti。

我们希望您了解我们希望专注于法律规定的目标。

依赖性

• Mathquill（https://github.com/digabi/mathquill）
• Mathjax节点
• jQuery
• 消毒-HTML

入门

1. 安装node.js
2. 运行npm install 。
3. 运行npm run dev 。
4. 浏览器测试：http：// localhost：5111/test/tests.html
5. 手动测试：http：// localhost：5111/test/tests.html？grep =手动

在本地测试捆绑包

1. 运行npm run build
2. 运行npm run dev-server
3. 在项目根中运行简单的HTTP服务器，例如python3 -m http.server 8080
4. 编辑dev/index.html脚本标签指向捆绑包： <script type="module" src="/dist/rich-text-editor-bundle.js"></script> （不要提交此）。
5. 转到http：// localhost：8080/dev/index.html

直接使用的示例

演示：http：//digabi.github.io/rich-text-editor/

资料来源：https：//github.com/digabi/rich-text-editor/blob/master/index.html

执照

https://opensource.org/licenses/mit