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