富文本编辑器
安装
# 使用npm安装
npm install braft-editor --save
# 使用yarn安装
yarn add braft-editor
使用
import BraftEditor from 'braft-editor'
// 定义一段HTML字符串
const htmlString = `<p>Hello <b>World!</b></p>`
// 将HTML字符串转换为编辑器所需要的EditorState实例
const editorState = BraftEditor.createEditorState(htmlString)
//上面创建的变量editorState即可传给编辑器的value属性
render () {
return (
<BraftEditor value={editorState}/>
)
}
实例属性
名称 | 说明 |
---|---|
font-size | 文字字号选择器 |
font-family | 文字字体选择器 |
line-height | 文字行高选择器 |
letter-spacing | 文字字间距选择器 |
text-color | 文字颜色选择器,包含文字背景颜色设置 |
bold | 设置文字加粗 |
italic | 设置文字斜体 |
underline | 设置文字下划线 |
strike-through | 设置文字删除线 |
superscript | 设置文字为上标 |
subscript | 设置文字为下标 |
remove-styles | 清除文字样式 |
emoji | Emoji表情选择器 |
text-align | 文字对齐方式工具,可通过textAligns属性来指定可以使用哪些对齐方式 |
text-indent | 段落缩进工具,最多可缩进6级 |
link | 链接插入工具 |
headings | 段落类型(标题1-6、常规) |
list-ul | 无序列表 |
list-ol | 有序列表 |
blockquote | 引用段落 |
code | 代码块 |
hr | 水平线工具 |
media | 多媒体插入工具 |
clear | 内容清除工具 |
undo | 撤销操作 |
redo | 重做操作 |
separator | 分割线,连续的多个separator将只显示为1个 |
https://github.com/margox/braft-extensions
braft-editor的拓展模块
比如文字高亮
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/code-highlighter.css'
import BraftEditor from 'braft-editor'
import CodeHighlighter from 'braft-extensions/dist/code-highlighter'
const options = {
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'] // 指定该模块对哪些BraftEditor无效
}
BraftEditor.use(CodeHighlighter(options))
https://github.com/margox/braft-utils
Braft-editor的工具包
包括把html解析成字符串、插入html等
支持在react、vue、angular中插入富文本
安装
npm install --save @tinymce/tinymce-react
使用
import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
export default function App() {
const editorRef = useRef(null);
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};
return (
<>
<Editor
apiKey='your-api-key'
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
<button onClick={log}>Log editor content</button>
</>
);
}
使用
// Import React dependencies.
import React, { useState } from 'react'
// Import the Slate editor factory.
import { createEditor } from 'slate'
// Import the Slate components and React plugin.
import { Slate, Editable, withReact } from 'slate-react'
const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => {
// Create a Slate editor object that won't change across renders.
const [editor] = useState(() => withReact(createEditor()))
return (
// Add the editable component inside the context.
<Slate editor={editor} initialValue={initialValue}>
<Editable />
</Slate>
)
}