Скачать smartblock - Скачать исходный код smartblock

smartblock

Другие ресурсы

1.0.0

Скачать

SmartBlock

SmartBlock.js - это редактор на основе блока JavaScript, который позволяет легко писать содержимое на веб -сайтах даже с смартфоном .

IE11 / Edge	Firefox	Хром	Сафари	ios safari

Скриншот

Функции

Простой в использовании со смартфоном
Полностью настраиваемый
Блок на основе
Держите чистый HTML и вытирайте ненужные теги
Получите результат как HTML или JSON
копировать и вставить содержимое

Установить

$ npm install smartblock --save

Использование

 import * as React from 'react' ;
import { render } from 'react-dom' ;
import 'smartblock/css/smartblock.css' ;
import { SmartBlock , Extensions } from 'smartblock' ;

render ( < >
  < SmartBlock 
    extensions = { Extensions }
    html = { '<h2>Hello World</h2><p>hello</p>' }
    onChange = { ( { json , html } ) => { console . log ( json , html ) ; } }  
  />
</ > , document . getElementById ( "app" ) ) ;

Попробуйте это на CodeSandbox

Настраивать

Вы можете добавить подобный блок

 import * as React from 'react' ;
import { Extensions , CustomBlock , CustomMark } from 'smartblock' ;
Extensions . push ( new CustomBlock ( {  
  tagName : 'div' ,
  className : '.alert' ,
  icon : < SomeIconComponent />
} ) ;

render ( < >
  < SmartBlock 
    extensions = { Extensions }
    html = { '<h2>Hello World</h2><p>hello</p>' }
    onChange = { ( { json , html } ) => { console . log ( json , html ) ; } }  
  />
</ > , document . getElementById ( "app" ) ) ;

Вы можете добавить пользовательский встроенный встроенный элемент

 import * as React from 'react' ;
import { Extension , CustomBlock , CustomMark } from 'smartblock' ;
import 'smartblock/css/smartblock.css' ;
Extension . push ( new CustomMark ( {  
  tagName : 'span' ,
  className : '.small' ,
  icon : < SomeIconComponent />
} ) ;

render ( < >
  < SmartBlock 
    extensions = { Extensions }
    html = { '<h2>Hello World</h2><p><small>hello</small></p>' }
    onChange = { ( { json , html } ) => { console . log ( json , html ) ; } }  
  />
</ > , document . getElementById ( "app" ) ) ;

Параметры

Реквизит	описание	тип	по умолчанию
расширения	Массив расширений, которые расширяют функцию SmartBlock	Расширение[]	массив расширений
Онхандж	Функция обратного вызова, которая вызывается, когда изменяется содержимое редактора. Вы можете получить HTML и JSON	Функция
Oninit	Функция обратного вызова, которая вызывается, когда редактор инициализируется	Функция
json	Содержание редактора будет инициализировано с помощью данных JSON	Объект	{}
HTML	Содержание редактора будет инициализировано с помощью HTML	Нить	''
Showtitle	Название будет показано	Логический	ЛОЖЬ
Showbackbtn	BTN для поддержки истории обратно будет показана	Логический	ЛОЖЬ
Автосовая	HTML будет храниться в LocalStorage каждый раз, когда изменяется контент	Логический	ЛОЖЬ
geteditorRef	Получите объект ref Rediter	Функция