Слияние кода завершено, страница обновится автоматически
React-umeditor
React Editor, похожий на Umeditor (https://github.com/fex-team/umeditor).
Установка
npm install react-umeditor --save
Использование JavaScript:
var React = require('react');
var Editor = require('react-umeditor');
class App extends React.Component {
constructor(props){
super(props);
this.state = {
content: ""
}
}
handleChange(content){
this.setState({
content: content
})
}
getIcons(){
var icons = [
"source | undo redo | bold italic underline strikethrough fontborder emphasis | ",
"paragraph fontfamily fontsize | superscript subscript | ",
"forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | ",
"cleardoc | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | ",
"horizontal date time | image emotion spechars | inserttable"
]
return icons;
}
getPlugins(){
return {
"image": {
"uploader": {
"name":"file",
"url": "/api/upload"
}
}
}
}
render(){
var icons = this.getIcons();
var plugins = this.getPlugins();
return (<Editor ref="editor"
icons={icons}
value={this.state.content} defaultValue="<p>React Umeditor</p>"
onChange={this.handleChange.bind(this)}
plugins={plugins} />)
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor Demo</title>
<!-- mathquill & umeditor stylesheet & if you have the formula icon -->
<link rel="stylesheet" href="../../dist/third-part/mathquill/mathquill.css"/>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
<div id="react-container"></div>
<!-- jquery & mathquill javascript & if you have the formula icon -->
<script src="../../dist/third-part/jquery.min.js"></script>
<script src="../../dist/third-part/mathquill/mathquill.js"></script>
<!-- your react script -->
<script src="bundle.js"></script>
<script src="app.js"></script>
</body>
</html>
Пример
Функции Ref
Вы можете использовать this.refs.editor.xxx()! Возможные значения xxx:
Свойства Можно установить свойства! Возможные свойства:
{ content: string };Значки Поддерживаются значки, такие как:
source undo redo bold italic underline strikethrough fontborder emphasis
paragraph fontfamily fontsize superscript subscript
forecolor backcolor removeformat insertorderedlist insertunorderedlist selectall
cleardoc ## Снимок
// клонирование кода
git clone https://github.com/liuhong1happy/react-umeditor
cd react-umeditor
// установка зависимостей
npm install
// сборка
npm run build
// запуск примера сервера
cd example
npm run example
Изменения и улучшения приветствуются! Не стесняйтесь создавать форки и открывать запросы на вытягивание. Пожалуйста, вносите изменения в определённой ветке и запрашивайте их перенос в основную ветку! Если возможно, перед отправкой PR убедитесь, что редактор полностью работает, так как это поможет ускорить процесс.
Подробнее см. в документе.
Email: liuhong1.happy@163.com
QQ Group: 247978846
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )