ed
1.0.0
npm start
Использование ProSemirror с данными из API сетки
Демо: grid.github.io/ed/, с матчем
Демонстрация показывает перевод с Prosemirror в API GRID API и обратно.
Prosemirror предоставляет интерфейс на основе схемы высокого уровня для взаимодействия с contenteditable , заботясь об этой боли. Эд сосредоточен на:
Эд разоблачает компонент React по умолчанию.
import Ed from '@the-grid/ed'
export default class PostEditor extends React . Component {
render ( ) {
return (
< Ed key = 'item-uuid' initialContent = { ... } onChange = { ... } ... / >
)
}
} В том числе dist/build.js на вашей странице раскрывает window.TheGridEd
< script src =' dist/build.js ' > </ script > Существуют {mountApp, unmountApp} Помощные методы, доступные для использования как это:
var container = document . querySelector ( '#ed' )
window . TheGridEd . mountApp ( container , {
// REQUIRED -- Content array from post
initialContent : [ ] ,
// OPTIONAL (default true) enable or disable the default menu
menuBar : true ,
// REQUIRED -- Hit on every change
onChange : function ( ) {
/* App can show "unsaved changes" in UI */
} ,
// REQUIRED
onShareFile : function ( index ) {
/* App triggers native file picker */
/* App calls ed.insertPlaceholders(index, count) and gets array of ids back */
/* App uploads files and sets status on placeholder blocks with ed.updateProgress */
/* On upload / measurement finishing, app replaces placeholder blocks with ed.setContent */
} ,
// REQUIRED
onRequestCoverUpload : function ( id ) {
/* Similar to onShareFile, but hit with block id instead of index */
/* App uploads files and sets status on blocks with ed.updateProgress */
/* Once upload is complete, app hits ed.setCoverSrc */
} ,
// REQUIRED
onShareUrl : function ( { block , url } ) {
/* Ed made the placeholder with block id */
/* App shares url with given block id */
/* App updates status on placeholder blocks with ed.updateProgress */
/* On share / measurement finishing, app replaces placeholder blocks with ed.setContent */
} ,
// REQUIRED
onPlaceholderCancel : function ( id ) {
/* Ed removed the placeholder if you call ed.getContent() now */
/* App should cancel the share or upload */
} ,
// OPTIONAL
onRequestLink : function ( value ) {
/*
If defined, Ed will _not_ show prompt for link
If selection is url-like, value will be the selected string
App can then call `ed.execCommand('link:toggle', {href, title})`
Note: If that is called while command 'link:toggle' is 'active', it will remove the link, not replace it
*/
} ,
// OPTIONAL
onDropFiles : function ( index , files ) {
/* App calls ed.insertPlaceholders(index, files.length) and gets array of ids back */
/* App uploads files and sets status on placeholder blocks with ed.updateProgress */
/* On upload / measurement finishing, app replaces placeholder blocks with ed.setContent */
} ,
// OPTIONAL
onDropFileOnBlock : function ( id , file ) {
/* App uploads files and sets status on block with ed.updateProgress */
/* Once upload is complete, app hits ed.setCoverSrc */
} ,
// OPTIONAL
onMount : function ( mounted ) {
/* Called once PM and widgets are mounted */
window . ed = mounted
} ,
// OPTIONAL
onCommandsChanged : function ( commands ) {
/* Object with commandName keys and one of inactive, active, disabled */
} ,
// OPTIONAL -- imgflo image proxy config
imgfloConfig : {
server : 'https://imgflo.herokuapp.com/' ,
key : 'key' ,
secret : 'secret'
} ,
// OPTIONAL -- where iframe widgets live relative to app (or absolute)
widgetPath : './node_modules/' ,
// OPTIONAL -- site-wide settings to allow cover filter, crop, overlay; default true
coverPrefs : {
filter : false ,
crop : true ,
overlay : true
} ,
// OPTIONAL -- site or user flags to reduce functionality
featureFlags : {
edCta : false ,
edEmbed : false
}
} )
// Returns array of inserted placeholder ids
ed . insertPlaceholders ( index , count )
// Update placeholder metadata
// {status (string), progress (number 0-100), failed (boolean)}
// metadata argument with {progress: null} will remove the progress bar
ed . updateProgress ( id , metadata )
// Once block cover upload completes
// `cover` is object with {src, width, height}
ed . setCover ( id , cover )
// For placeholder or media block with uploading cover
// `src` should be blob: or data: url of a
// sized preview of the local image
ed . setCoverPreview ( id , src )
// Returns content array
// Expensive, so best to debounce and not call this on every change
// Above the fold block is index 0, and starred
ed . getContent ( )
// Only inserts/updates placeholder blocks and converts placeholder blocks to media
ed . setContent ( contentArray )
// Returns true if command applies successfully with current selection
ed . execCommand ( commandName )Демо: ./demo/demo.js
С помощью onCommandsChanged Prop приложение получит объект, содержащий эти клавиши командных имен. Значения будут одной из этих строк: inactive , active , disabled , flagged .
Приложения могут применять команды форматирования / редактирования с помощью ed.execCommand(commandName)
Специальный случай: ed.execCommand('link:toggle', {href, title}) (заголовок необязательно), чтобы установить ссылку на текущий выбор.
Поддерживаемые ключи commandName :
strong:toggle
em:toggle
link:toggle
paragraph:make
heading:make1
heading:make2
heading:make3
bullet_list:wrap
ordered_list:wrap
horizontal_rule:insert
lift
undo
redo
ed_upload_image
ed_add_code
ed_add_location
ed_add_userhtml
ed_add_cta
ed_add_quote
npm start и Open http: // localhost: 8080/
В режиме разработки WebPack строит и обслуживает цели в памяти из /webpack /
Изменения запустит обновление браузера.
Плагины - это классы ES2015 с 2 необходимыми методами:
constructor (ed) {} получает ссылку на главное ed , где вы можетеed.pm.on('draw', ...)ed.pluginContainer.appendChild(...)teardown () {} , где все слушатели и пользовательский интерфейс должны быть удалены Виджеты-это мини-редакторы, построенные для редактирования конкретных типов средств массовой информации
Запустить в iframe и общаться через Postmessage
Пример: CED - виджет для редактирования кода
Пример: WIP
style JS (пример)require('./component-name.css') стиль включает, но необходимо для некоторых отзывчивых хаков и переопределения Prosemirror Стандарт Feross, проверенный Eslint с npm test или npm run lint
Чтобы автоматически исправить простые вещи, такие как Trailing Whitespace: npm run lintfix
npm test
Карма настроена на проведение тестов в местном хроме и Firefox.
Тесты также будут работать на мобильных платформах через BrowserStack, если у вас установлены переменные среды:
BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY
npm run build
Выходы Минифицированные виджеты Dist/ed.js и копий, определенные в Package.json.
npm version patch - настройки стиля, исправления горячих ошибок
npm version minor - Добавление функций, совместимые с обратно
npm version major -удаление функций, не совместимые с Backwards изменения
Эти ярлыки будут запускать тесты, теги, изменять версию пакета и выдвигать изменения и теги на GH.
Затем Трэвис опубликует новые теги в NPM и создаст демонстрацию для публикации на GH-Pages.
