medium draft
1.0.0
أحدث تطور يحدث في هذا الفرع.
وسيط مثل محرر النصوص الغنية التي تم بناؤها على مسودة JS مع التركيز على القضاء على استخدام الماوس عن طريق إضافة اختصارات لوحة المفاتيح ذات الصلة.
الوثائق قيد التقدم.
تثبيت إصدار بيتا باستخدام
npm install medium-draft@beta
RETURN .caption - يمكن استخدامها كتعليق للكتل الوسائط مثل الصورة أو الفيديو بدلاً من draft-js المتداخلة من أجل البساطة.block-quote-caption التوضيحية لـ blockquote s.todo - TODO TEXT مع خانة اختيار.toolbarConfig للكتلة التالية والأنماط المضمنة. الإعدادات الافتراضية للجميع. حساسية الموضوع.block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT'] Alt/Option +
هذه الأوامر ليست جزءًا من المحرر الأساسي ولكن تم تنفيذها في رمز المثال الذي يستخدم محرر medium-draft .
localstorage .localstorage . -- كانت الكتلة الحالية عبارة عن blockquote ، فسيتم تغييرها إلى block-quote-caption أو caption الأخرى.*. (An asterisk and a period) - unordered-list-item .*<SPACE> (An asterisk and a space) unordered-list-item .-<SPACE> (A hyphen and a space) unordered-list-item .1. (The number 1 and a period) unordered-list-item .## - header-two .[] - todo .== - unstyled .npm install medium-draft .import Editor from 'medium-draft'<link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> في <head><script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> . المتوسطة المتوسطة متوفرة في الكائن العالمي كدخول MediumDraft . يجلس medium-draft على قمة draft-js مع بعض الوظائف المدمجة والكتل. API هو نفسه تقريبا مثل draft-js . يمكنك إلقاء نظرة على رمز المحرر التجريبي لمعرفة التنفيذ.
قم بتضمين CSS التي تأتي مع المكتبة في HTML -
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/medium-draft.css " > إذا كنت تستخدم webpack للتجميع ، فيمكنك استيراد CSS مثل هذا في رمز JS الخاص بك
import 'medium-draft/lib/index.css' ; إذا كنت تستخدم sideButtons ، فستحتاج أيضًا إلى تضمين CSS لـ font-awesome -
< link rel =" stylesheet " href =" //maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css " >أو شيء مكافئ.
في الحد الأدنى ، تحتاج إلى توفير الدعائم editorState onChange ، مثل draft-js .
import React from 'react' ;
import ReactDOM from 'react-dom' ;
// if using webpack
// import 'medium-draft/lib/index.css';
import {
Editor ,
createEditorState ,
} from 'medium-draft' ;
class App extends React . Component {
constructor ( props ) {
super ( props ) ;
this . state = {
editorState : createEditorState ( ) , // for empty content
} ;
/*
this.state = {
editorState: createEditorState(data), // with content
};
*/
this . onChange = ( editorState ) => {
this . setState ( { editorState } ) ;
} ;
this . refsEditor = React . createRef ( ) ;
}
componentDidMount ( ) {
this . refsEditor . current . focus ( ) ;
}
render ( ) {
const { editorState } = this . state ;
return (
< Editor
ref = { this . refsEditor }
editorState = { editorState }
onChange = { this . onChange } />
) ;
}
} ;
ReactDOM . render (
< App /> ,
document . getElementById ( 'app' )
) ; يقبل Editor medium-draft دعامة تسمى sideButtons . بشكل افتراضي ، يوجد زر واحد فقط (صورة) ، ولكن يمكنك إضافة المزيد. يجب أن يكون الدعامة sideButtons عبارة عن مجموعة من الكائنات مع كل كائن له التوقيع التالي:
{
"title" : "unique-button-name" ,
"component" : ButtonComponent
}على سبيل المثال:
{
"title" : "Image" ,
"component" : ImageSideButton
}رمز المثال:
في الوقت الحالي ، يضيف زر الصورة ببساطة صورة داخل المحرر باستخدام URL.createObjectURL . ولكن إذا كنت ترغب أولاً في تحميل الصورة إلى الخادم الخاص بك ثم أضف تلك الصورة إلى المحرر ، فيمكنك اتباع إحدى الطرقتين:
إما تمديد مكون ImageSideButton الافتراضي الذي يأتي مع medium-draft .
أو قم بإنشاء مكونك الخاص مع الوظيفة الكاملة بنفسك.
من أجل البساطة ، سوف نتبع الطريقة الأولى. إذا قمت بدراسة تنفيذ ImageSideButton ، فسترى طريقة onChange التي تتلقى حدث اختيار الملف حيث تتوفر الملفات المسلحة event.target.files . سنقوم ببساطة بتجاوز هذه الطريقة لأننا لا نريد تخصيص أي شيء آخر. لاحظ أيضًا أن كل مكون زر جانبي يتلقى وظيفة getEditorState (إرجاع مسودة editorState ) ووظيفة setEditorState(newEditorState) (تعيين المحرر الجديد) والوظيفة close التي تحتاج إلى الاتصال بها يدويًا لإغلاق قائمة الأزرار الجانبية:
import React from 'react' ;
import {
ImageSideButton ,
Block ,
addNewBlock ,
createEditorState ,
Editor ,
} from 'medium-draft' ;
import 'isomorphic-fetch' ;
class CustomImageSideButton extends ImageSideButton {
/*
We will only check for first file and also whether
it is an image or not.
*/
onChange ( e ) {
const file = e . target . files [ 0 ] ;
if ( file . type . indexOf ( 'image/' ) === 0 ) {
// This is a post request to server endpoint with image as `image`
const formData = new FormData ( ) ;
formData . append ( 'image' , file ) ;
fetch ( '/your-server-endpoint' , {
method : 'POST' ,
body : formData ,
} ) . then ( ( response ) => {
if ( response . status === 200 ) {
// Assuming server responds with
// `{ "url": "http://example-cdn.com/image.jpg"}`
return response . json ( ) . then ( data => {
if ( data . url ) {
this . props . setEditorState ( addNewBlock (
this . props . getEditorState ( ) ,
Block . IMAGE , {
src : data . url ,
}
) ) ;
}
} ) ;
}
} ) ;
}
this . props . close ( ) ;
}
}
// Now pass this component instead of default prop to Editor example above.
class App extends React . Component {
constructor ( props ) {
super ( props ) ;
this . sideButtons = [ {
title : 'Image' ,
component : CustomImageSideButton ,
} ] ;
this . state = {
editorState : createEditorState ( ) , // for empty content
} ;
/*
this.state = {
editorState: createEditorState(data), // with content
};
*/
this . onChange = ( editorState ) => {
this . setState ( { editorState } ) ;
} ;
this . refsEditor = React . createRef ( )
}
componentDidMount ( ) {
this . refsEditor . current . focus ( ) ;
}
render ( ) {
const { editorState } = this . state ;
return (
< Editor
ref = { this . refsEditor }
editorState = { editorState }
onChange = { this . onChange }
sideButtons = { this . sideButtons }
/>
) ;
}
} ;لإزالة الأزرار الجانبية تمامًا ، بحيث لا يظهر زر الإضافة الدائرية أبدًا ، ما عليك سوى تمرير صفيف فارغ:
sideButtons={[]}
هناك ثلاث دعائم يمكنك استخدامها لتخصيص الأزرار الموجودة في شريط الأدوات الذي يظهر كلما قمت بتحديد نص داخل المحرر:
blockButtonsinlineButtonstoolbarConfig أزرار المحرر على مستوى الكتلة الافتراضية هي ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] ، وأزرار المحرر الافتراضي ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] .
على سبيل المثال ، إذا كنت ترغب في الاحتفاظ بأزرار الكتلة الافتراضية وإضافة عدد قليل ، يمكنك القيام بشيء مثل ما يلي:
import { BLOCK_BUTTONS } from 'medium-draft' ;
const blockButtons = [ {
label : 'H1' ,
style : 'header-one' ,
icon : 'header' ,
description : 'Heading 1' ,
} ,
{
label : 'H2' ,
style : 'header-two' ,
icon : 'header' ,
description : 'Heading 2' ,
} ] . concat ( BLOCK_BUTTONS ) ;
// in your component
< Editor blockButtons = { blockButtons } . . . / > إذا كنت ترغب في إزالة بعض الأزرار أو إعادة ترتيبها ، فيمكنك استخدام وظائف مثل array.slice على BLOCK_BUTTONS الافتراضي و INLINE_BUTTONS ، ولكن هذا ربما يكون أكثر مشكلة مما يستحق.
لهذا الغرض ، من الأفضل استخدام دعامة toolbarConfig :
// custom ordering for block and inline buttons, and removes some buttons
const toolbarConfig = {
block : [ 'unordered-list-item' , 'header-one' , 'header-three' ] ,
inline : [ 'BOLD' , 'UNDERLINE' , 'hyperlink' ] ,
}
< Editor toolbarConfig = { toolbarConfig } . . . / > يجب أن تتطابق الأوتار الموجودة داخل block والمصفوفات inline مع سمة style داخل blockButtons ومصفوفات inlineButtons .
لتلخيص: إذا كنت بحاجة إلى إضافة الأزرار وإزالة وإعادة ترتيب ، فمن المحتمل أن يكون أسهل لاستخدام blockButtons و inlineButtons و toolbarConfig معًا.
إذا لم تكن دعائم تخصيص شريط الأدوات كافيًا للحصول على السلوك الذي تريده ، فيمكنك ضخ شريط الأدوات الخاص بك باستخدام ToolbarComponent Prop.
يسمى هذا النمط حقن المكون. يتلقى ToolbarComponent نفس الدعائم مثل شريط الأدوات الافتراضي.
إذا كنت ترغب في كتابة مكون شريط الأدوات الخاص بك ، فإن مكانًا جيدًا للبدء هو مع المكون الافتراضي.
تتوفر ميزة تصدير HTML من الإصدار 0.4.1 فصاعدًا.
يستخدم medium-draft (التي تستخدم بدورها خادم React-DOM) لتقديم editorState draft-js إلى HTML.
المصدر ليس جزءًا من المكتبة الأساسية. إذا كنت ترغب في استخدام medium-draft-exporter ، اتبع هذه الخطوات-
npm install draft-convert . draft-convert هي جزء من peerDependencies medium-draft .
import mediumDraftExporter from 'medium-draft/lib/exporter' ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */ < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-exporter.js " > </ script > المصدر متاح باعتباره MediumDraftExporter Global ؛
var mediumDraftExporter = MediumDraftExporter . default ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */ يأتي medium-draft-exporter أيضًا مع CSS مسبقًا إذا كنت ترغب في تطبيق بعض الأنماط الأساسية على HTML المقدمة.
في WebPack ، كجزء من صفحة HTML المقدمة ، استخدم هذا-
import 'medium-draft/lib/basic.css'في المتصفح ، في صفحة HTML المقدمة ، يمكنك تضمين رابط ورقة الأنماط هذا
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/basic.css " >medium-draft-exporter إلى editorState تتوفر ميزة تصدير HTML من الإصدار 0.5.3 فصاعدًا.
يستخدم medium-draft (التي تستخدم بدورها خادم React-DOM) لتقديم editorState draft-js إلى HTML.
المستورد ليس جزءًا من المكتبة الأساسية. إذا كنت ترغب في استخدام medium-draft-importer ، اتبع هذه الخطوات-
npm install draft-convert . draft-convert هي جزء من peerDependencies medium-draft .
import { convertToRaw } from 'draft-js' ;
import { createEditorState } from 'medium-draft' ;
import mediumDraftImporter from 'medium-draft/lib/importer' ;
const html = /* your previously exported html */ ;
const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
// Use this editorState < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-importer.js " > </ script > المستورد متاح كمتوسطة MediumDraftImporter Global.
const { convertToRaw } = Draft ;
const { createEditorState } = MediumDraft ;
const mediumDraftImporter = MediumDraftImporter . default ;
const html = /* your previously exported html */ ;
const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
// Use this editorStatemedium-draft . git clone https://github.com/brijeshb42/medium-draft.git .npm install react react-dom draft-convert && npm install .npm run dev . سيبدأ هذا خادمًا محليًا على المنفذ 8080 .npm run build . معهد ماساتشوستس للتكنولوجيا
