medium editor
5.23.3
إذا كنت مهتمًا بالمساعدة في الحفاظ على واحدة من أنجح محرري Wysiwyg النصوص على Github ، فأخبرنا! (انظر العدد رقم 1503)
هذا هو استنساخ من شريط أدوات محرر محرر Medium.com.
تمت كتابة Mediumeditor باستخدام Vanilla JavaScript ، لا توجد أطراف إضافية مطلوبة.
العرض التوضيحي : http://yabwe.github.io/medium-editor/
عبر NPM:
تشغيل في وحدة التحكم الخاصة بك: npm install medium-editor
عبر باور:
bower install medium-editor
عبر CDN خارجي
للحصول على أحدث إصدار:
< script src =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >من أجل واحد مخصص:
< script src =" //cdn.jsdelivr.net/npm/[email protected]/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/[email protected]/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >التثبيت اليدوي:
قم بتنزيل أحدث إصدار من الإصدار وإرفاق أوراق أنماط محرر متوسطة على صفحتك:
ابحث عن الملفات إلى الارتباط المذكور أدناه في مجلد DIST. (./medium-editor/dist/...)
< link rel =" stylesheet " href =" css/medium-editor.css " > <!-- Core -->
< link rel =" stylesheet " href =" css/themes/default.css " > <!-- or any other theme -->الخطوة التالية هي الرجوع إلى نص المحرر
< script src =" js/medium-editor.js " > </ script >يمكنك الآن إنشاء مثيل لكائن جديد متوسطة:
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >سيقوم الرمز أعلاه بتحويل جميع العناصر باستخدام الفئة القابلة للتطبيق إلى محتويات HTML5 القابلة للتحرير وإضافة شريط أدوات المحرر المتوسط إليهم.
يمكنك أيضًا تمرير قائمة عناصر HTML:
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; يدعم المتوسطة أيضًا Textarea. إذا قمت بتقديم عنصر TextArea ، فسيقوم البرنامج النصي بإنشاء Div جديد مع contentEditable=true ، إخفاء textarea وربط قيمة textarea بمحتوى Div HTML.
لقد ساهم الناس في الأغلفة في جميع أنحاء المتوسطة للاندماج مع الأطر المختلفة والمداخن التقنية. ألقِ نظرة على قائمة الأغلفة والتكامل الحالية التي تمت كتابتها بالفعل لمؤسسة متوسطة!
عرض وثائق خيارات الموسع المتوسطة على جميع الخيارات المختلفة للمتوسطة.
يتم تمرير خيارات تخصيص المحرر المتوسط كوسيطة ثانية إلى مُنشئ المؤسسة المتوسطة. مثال:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 'fontawesome'. الافتراضي: false باستخدام 'fontawesome' حيث يتطلب ButtonLabels الإصدار 4.1.0 من CSS Fontawesome ليكون على الصفحة لضمان عرض جميع الرموز بشكل صحيح
0falsefalsefalsefalsedocument.body{}truefalseيتم تنفيذ شريط الأدوات لـ Mediumeditor كملحق مدمج يعرض تلقائيًا كلما قام المستخدم بتحديد بعض النصوص. يمكن أن يحتفظ شريط الأدوات بأي مجموعة من الأزرار المدمجة المحددة ، ولكن يمكن أيضًا الاحتفاظ بأي أزرار مخصصة تم تمريرها كملحقات.
يتم تمرير خيارات شريط الأدوات ككائن هو عضو في كائن الخيارات الخارجية. مثال:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection : true ,
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' , 'h2' , 'h3' , 'quote' ] ,
diffLeft : 0 ,
diffTop : - 10 ,
firstButtonClass : 'medium-editor-button-first' ,
lastButtonClass : 'medium-editor-button-last' ,
relativeContainer : null ,
standardizeSelectionStart : false ,
static : false ,
/* options which only apply when static is true */
align : 'center' ,
sticky : false ,
updateOnEmptySelection : false
}
} ) ;true['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']0-10'medium-editor-button-first''medium-editor-button-last'relative بدلاً من absolute . الافتراضي: nullfalsefalse static :left | center | right - عندما يكون الخيار الثابت true ، فإن هذا يقلل من شريط الأدوات الثابتة بالنسبة لعنصر المحرر المتوسط. الافتراضي: centertrue ، فإن هذا يمكّن/يعطل شريط الأدوات "التمسك" بمنفذ العرض والبقاء مرئيًا على الشاشة أثناء تمرير الصفحة. الافتراضي: falsetrue ، فإن هذا يمكّن/يعطل تحديث حالة أزرار شريط الأدوات حتى عند انهيار التحديد (لا يوجد اختيار ، مجرد مؤشر). الافتراضي: false لتعطيل شريط الأدوات (الذي يعطل أيضًا امتداد مرساة المقاومة) ، قم بتعيين قيمة خيار toolbar إلى false :
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; يمكن تعديل سلوك الزر عن طريق تمرير كائن إلى صفيف الأزرار بدلاً من السلسلة. هذا يسمح لتجاوز بعض السلوك الافتراضي للأزرار. الخيارات التالية هي بعض الأجزاء الأساسية من الأزرار التي قد تتغلب عليها ، ولكن أي جزء من MediumEditor.Extension.prototype . (تحقق من رمز المصدر للأزرار لمعرفة ما يمكن تجاوزه كل شيء).
MediumEditor.execAction() عند النقر فوق الزر.<b> أو <strong> التي تشير إلى أن النص جريء بالفعل. لذا فإن مجموعة TagNames لـ Bold ستكون: ['b', 'strong']useQueryState على true .'font-weight' تم تعيينها على 700 أو 'bold' ، فهذا يشير إلى أن النص جريء بالفعل. لذا فإن كائن النمط لـ Bold سيكون { prop: 'font-weight', value: '700|bold' }useQueryState على true .'|' )document.queryCommandState() المدمج. إذا تم تطبيق الإجراء بالفعل ، فسيتم عرض الزر على أنه "نشط" في شريط الأدواتdocument.queryCommandState('bold')innerHTML لوضع داخل الزرinnerHTML لاستخدامه لمحتوى الزر إذا تم تعيين خيار ButtonLabels لـ MediumeDitor على 'fontawesome' مثال على الأزرار الإفراطية (هنا ، الهدف هو تقليد الأزرار من خلال وجود أزرار H1 و H2 التي تنتج بالفعل <h2> و <h3> علامات على التوالي):
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [
'bold' ,
'italic' ,
{
name : 'h1' ,
action : 'append-h2' ,
aria : 'header type 1' ,
tagNames : [ 'h2' ] ,
contentDefault : '<b>H1</b>' ,
classList : [ 'custom-class-h1' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h1'
}
} ,
{
name : 'h2' ,
action : 'append-h3' ,
aria : 'header type 2' ,
tagNames : [ 'h3' ] ,
contentDefault : '<b>H2</b>' ,
classList : [ 'custom-class-h2' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h2'
}
} ,
'justifyCenter' ,
'quote' ,
'anchor'
]
}
} ) ; معاينة المرساة هي امتداد مدمج يعرض تلقائيًا "تلميح الأدوات" عندما يحوم المستخدم على رابط في المحرر. ستعرض Tooltip href للرابط ، وعند النقر ، سيفتح نموذج تحرير المرساة في شريط الأدوات.
يتم تمرير خيارات معاينة مرساة "Tooltip" ككائن هو عضو في كائن الخيارات الخارجية. مثال:
var editor = new MediumEditor ( '.editable' , {
anchorPreview : {
/* These are the default options for anchor preview,
if nothing is passed this is what it used */
hideDelay : 500 ,
previewValueSelector : 'a'
}
}
} ) ;500'a'falsetrue لتعطيل معاينة المرساة ، قم بتعيين قيمة خيار anchorPreview إلى false :
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: false أو سمة data-disable-toolbar ) ، يتم تعطيل تعطيل المرساة تلقائيًا.معالج العنصر النائب هو امتداد مدمج يعرض نص العنصر النائب عندما يكون المحرر فارغًا.
يتم تمرير خيارات العنصر النائب ككائن هو عضو في كائن الخيارات الخارجية. مثال:
var editor = new MediumEditor ( '.editable' , {
placeholder : {
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text : 'Type your text' ,
hideOnClick : true
}
} ) ; النص : يحدد العنصر النائب الافتراضي للمحتوى الفارغ عندما لا يتم ضبط العنصر النائب على خطأ. يمكنك الكتابة فوقه عن طريق تعيين سمة data-placeholder على عناصر المحرر. الافتراضي: 'Type your text'
HideOnclick : يتسبب في اختفاء العنصر النائب بمجرد أن يكتسب الحقل التركيز. الافتراضي: true . لإخفاء العنصر النائب فقط بعد البدء في الكتابة ، وإظهاره مرة أخرى بمجرد أن يكون الحقل فارغًا ، قم بتعيين هذا الخيار على false .
لتعطيل العنصر النائب ، قم بتعيين قيمة خيار placeholder إلى false :
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;نموذج المرساة هو امتداد زر مدمج يسمح للمستخدم بإضافة/تحرير/إزالة الروابط من داخل المحرر. عندما يتم تمرير "المرساة" كزر في قائمة الأزرار ، سيتم تمكين هذا الامتداد ويمكن تشغيله بالنقر فوق الزر المقابل في شريط الأدوات.
يتم تمرير خيارات نموذج المرساة ككائن هو عضو في كائن الخيارات الخارجية. مثال:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' ]
} ,
anchor : {
/* These are the default options for anchor form,
if nothing is passed this is what it used */
customClassOption : null ,
customClassOptionText : 'Button' ,
linkValidation : false ,
placeholderText : 'Paste or type a link' ,
targetCheckbox : false ,
targetCheckboxText : 'Open in new window'
}
}
} ) ;null'Button'encodeURI . الافتراضي: false'Paste or type a link'target للرابط الذي تم إنشاؤه. الافتراضي: false'Open in new window'معالج اللصق هو امتداد مدمج يحاول تصفية المحتوى عند صخب المستخدم. كيف تكون مرشحات معالج اللصق قابلة للتكوين عبر خيارات محددة.
يتم تمرير خيارات معالجة اللصق ككائن هو عضو في كائن الخيارات الخارجية. مثال:
var editor = new MediumEditor ( '.editable' , {
paste : {
/* This example includes the default options for paste,
if nothing is passed this is what it used */
forcePlainText : true ,
cleanPastedHTML : false ,
cleanReplacements : [ ] ,
cleanAttrs : [ 'class' , 'style' , 'dir' ] ,
cleanTags : [ 'meta' ] ,
unwrapTags : [ ]
}
} ) ;truefalsetrue أو عند استدعاء طريقة المساعد cleanPaste(text) . يتم تنفيذ هذه البدائل قبل أن تكون بدائل بنيت. تقصير: []true أو عند استدعاء طريقة Helper cleanPaste(text) . يتم تنفيذ هذه البدائل بعد بدائل بنيت. تقصير: []true أو عند استدعاء cleanPaste(text) أو pasteHTML(html,options) طرق المساعد. الافتراضي: ['class', 'style', 'dir']true أو عند استدعاء cleanPaste(text) أو pasteHTML(html,options) أساليب المساعد. الافتراضي: ['meta']true أو عند استدعاء cleanPaste(text) أو pasteHTML(html,options) أساليب مساعد. تقصير: []يعد معالج أوامر لوحة المفاتيح امتدادًا مدمجًا لرسم خرائط للمفاتيح إلى الإجراءات التي يتم تنفيذها في المحرر.
يتم تمرير خيارات لوحة المفاتيح ككائن هو عضو في كائن الخيارات الخارجية. مثال:
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : {
/* This example includes the default options for keyboardCommands,
if nothing is passed this is what it used */
commands : [
{
command : 'bold' ,
key : 'B' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'italic' ,
key : 'I' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'underline' ,
key : 'U' ,
meta : true ,
shift : false ,
alt : false
}
] ,
}
} ) ;editor.execAction() عند استخدام المفاتيحfalse ، فسيتم تعطيل الاختصار لتعطيل أوامر لوحة المفاتيح ، قم بتعيين قيمة خيار keyboardCommands إلى false :
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;معالج الارتباط التلقائي هو امتداد مدمج يقوم تلقائيًا بتحويل عناوين URL التي تم إدخالها في حقل النص إلى علامات مرساة HTML (على غرار وظيفة Markdown). هذه الميزة متوقفة بشكل افتراضي.
لتمكين دعم الرابط التلقائي المدمج ، قم بتعيين قيمة خيار autoLink إلى true :
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;معالج سحب الصورة هو امتداد مدمج للتعامل مع السحب وإسقاط الصور في المحتوى. هذه الميزة تعمل بشكل افتراضي.
لتعطيل سحب الصورة المدمجة ، قم بتعيين قيمة خيار imageDragging إلى false :
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; للتوقف عن منع أحداث السحب والإفلات وتعطيل سحب الملف بشكل عام ، توفير امتداد Dummy DisagedRagging.
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;بسبب حالة الكود في 5.0.0 ، منع المحرر دائمًا أي إجراءات السحب والإفلات. سيكون لدينا طريقة أفضل لتعطيل سحب الملف في 6.*
var editor = new MediumEditor ( '.editable' , {
delay : 1000 ,
targetBlank : true ,
toolbar : {
buttons : [ 'bold' , 'italic' , 'quote' ] ,
diffLeft : 25 ,
diffTop : 10 ,
} ,
anchor : {
placeholderText : 'Type a link' ,
customClassOption : 'btn' ,
customClassOptionText : 'Create Button'
} ,
paste : {
cleanPastedHTML : true ,
cleanAttrs : [ 'style' , 'dir' ] ,
cleanTags : [ 'label' , 'meta' ] ,
unwrapTags : [ 'sub' , 'sup' ]
} ,
anchorPreview : {
hideDelay : 300
} ,
placeholder : {
text : 'Click to edit'
}
} ) ; بشكل افتراضي ، يدعم المتوسطة الأزرار لمعظم الأوامر لـ document.execCommand() التي يتم تدعمها جيدًا عبر جميع متصفحاتها المدعومة.
سيُظهر المتوسطة ، بشكل افتراضي ، فقط الأزرار المدرجة هنا لتجنب شريط أدوات ضخم:
هذه كلها الأزرار المدمجة التي تدعمها المؤسسة المتوسطة.
تحقق من صفحة الويكي للحصول على قائمة بالمواضيع المتاحة: https://github.com/yabwe/medium-editor/wiki/themes
عرض وثائق واجهة برمجة تطبيقات الكائن المتوسطة على الويكي للحصول على تفاصيل حول جميع الأساليب المدعومة على كائن الموسع المتوسط.
on()importSelection()exportSelection() )saveSelection()document.execCommand('createLink')document.execCommanddocument.queryCommandState(action)delayinnerHTML indexinnerHTML على html من العنصر في indexمن الممكن إضافة عناصر جديدة ديناميكيًا إلى مثيلك المتوسط الحالي:
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , this . _handleEditableInput . bind ( this ) ) ;
// imagine an ajax fetch/any other dynamic functionality which will add new '.editable' elements to the DOM
editor . addElements ( '.editable' ) ;
// OR editor.addElements(document.getElementsByClassName('editable'));
// OR editor.addElements(document.querySelectorAll('.editable')); سوف تمرير عناصر أو مجموعة من العناصر إلى addElements(elements) :
this.elements الداخلي.<textarea> :<textarea><div contenteditable=true> وأضفه إلى مجموعة العناصر. مباشرة إلى الأمام ، ما عليك سوى استدعاء removeElements مع العنصر أو مجموعة العناصر التي ترغب في هدمها. سيبقى كل عنصر بحد ذاته قابلاً للضمن - سيقوم فقط بإزالة جميع معالجات الأحداث وجميع الإشارات إليه حتى تتمكن من إزالته بأمان من DOM.
editor . removeElements ( document . querySelector ( '#myElement' ) ) ;
// OR editor.removeElements(document.getElementById('myElement'));
// OR editor.removeElements('#myElement');
// in case you have jQuery and don't exactly know when an element was removed, for example after routing state change
var removedElements = [ ] ;
editor . elements . forEach ( function ( element ) {
// check if the element is still available in current DOM
if ( ! $ ( element ) . parents ( 'body' ) . length ) {
removedElements . push ( element ) ;
}
} ) ;
editor . removeElements ( removedElements ) ; لمراقبة أي تغييرات على محتوى قابلة للضمن ، استخدم حدث 'editableInput' المخصص المكشوف عبر طريقة subscribe() :
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; يتم دعم هذا الحدث في جميع المتصفحات التي تدعمها المؤسسة المتوسطة (بما في ذلك IE9+ و EDGE)! للمساعدة في الحالات التي تراقب فيها مثيل واحد من المؤسسة المتوسطة عناصر متعددة ، ستكون الوسيطة الثانية التي تم تمريرها إلى معالج الحدث ( editable في المثال أعلاه) مرجعًا للعنصر القابل للضمن الذي تغير بالفعل.
هذا مفيد عندما تحتاج إلى التقاط أي تعديلات على العنصر القابل للمرضين بما في ذلك:
لماذا هذا مثير للاهتمام ولماذا يجب أن تستخدم هذا الحدث بدلاً من مجرد إرفاق حدث input على العنصر القابل للضمن؟
لذلك بالنسبة لمعظم المتصفحات الحديثة (Chrome ، Firefox ، Safari ، وما إلى ذلك) ، يعمل حدث input بشكل جيد. في الواقع ، يعد editableInput مجرد وكيل لحدث input في تلك المتصفحات. ومع ذلك ، فإن حدث input غير مدعوم للعناصر القابلة للضمن في IE 9-11 ويتم دعمه في الغالب في Microsoft Edge ، ولكن ليس بالكامل.
لذلك ، لدعم حدث editableInput بشكل صحيح في Internet Explorer و Microsoft Edge ، يستخدم Mediumeditor مجموعة من أحداث selectionchange و keypress ، بالإضافة إلى مراقبة المكالمات إلى document.execCommand .
تحقق من الوثائق من أجل تعلم كيفية تطوير الامتدادات للمتوسطة.
يمكن العثور هنا على قائمة من الامتدادات والمكونات الإضافية الحالية ، مثل الصور والوسائط.
لتشغيل العرض التوضيحي محليًا:
npm install من وحدة التحكم الخاصة بك في الجذرnode index.js من الجذرhttp://localhost:8088/demo/index.html لعرض العرض التوضيحيتتم إدارة مهام تطوير المتوسطة المتوسطة بواسطة Grunt. لتثبيت جميع الحزم اللازمة ، فقط استدعاء:
npm installلتشغيل جميع الاختبارات وإنشاء ملفات DIST للاختبار على الصفحات التجريبية ، فقط استدعاء:
gruntهذه هي المهام النخر الأخرى المتاحة:
توجد ملفات المصدر داخل دليل SRC . تأكد من إجراء تغييرات على هذه الملفات وليس الملفات في Distory Directory.
اقتل بعض الأخطاء :)
git checkout -b my-new-feature )git commit -am 'Added some feature' ) بدون ملفات من Dist Directory .git push origin my-new-featureللمساعدة في إنشاء رمز ثابت للنظر خلال المشروع ، نستخدم بعض الأدوات لمساعدتنا. لديهم ملحقات مكونات من أكثر المحررين/IDEs شعبية لصنع الترميز لمشروعنا ، ولكن يجب عليك استخدامها في مشروعك أيضًا!
نحن نستخدم JShint على كل بناء للعثور على أخطاء سهلة التمسك والمشاكل المحتملة في JS لدينا. يمكنك العثور على إعدادات JShint الخاصة بنا في ملف .jshintrc في جذر المشروع.
نستخدم JSCs على كل بناء لفرض بعض قواعد نمط الكود لدينا لمشروعنا. يمكنك العثور على إعدادات JSCS الخاصة بنا في ملف .jscsrc في جذر المشروع.
نستخدم EditorConfig للحفاظ على أنماط الترميز المتسقة بين مختلف المحررين و IDES. يمكنك العثور على إعداداتنا في ملف .editorconfig في جذر المشروع.
هل تبحث عن شيء بسيط للمساهمة الأولى؟ حاول إصلاح علة أول سهلة!
https://github.com/yabwe/medium-editor/graphs/contributors
أضف Org الخاص بك هنا ويمكننا إضافتك إلى صفحتنا المقصودة!
MIT: https://github.com/yabwe/medium-editor/blob/master/license
