الصفحة الرئيسية>موارد بناء الموقع>موارد أخرى
تنزيل

angulareditor

محرر نصية من WysiWyg/Rich Mative لـ Angular 6-19+

نوفمبر -27-2019 17-26-29

العرض التوضيحي

العرض التوضيحي | انظر الرمز في StackBlitz.

ابدء

تثبيت

تثبيت عبر NPM Package Manager 

npm install @kolkov/angular-editor --save

الإصدارات

3.0.0 وما فوق - للزاوي V13 + (تم إزالته من متغيرات الرموز الرائعة + CSS)

2.0.0 وما فوق - للزاوي V13.xx وما فوق

1.0.0 وما فوق - للزاوي V8.xx وما فوق

0.18.4 وما فوق - للزاوي V7.xx

0.15.x - لـ Angular V6.xx

انتباه! قد تحتوي إصدارات alpha beta على تغييرات كسر.

الاستخدام

استيراد وحدة angular-editor 

 import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;

@ NgModule ( {
  imports : [ HttpClientModule , AngularEditorModule ]
} )

ثم في HTML 

 < angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >

أو للاستخدام بأشكال تفاعلية 

 < angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor >

إذا كنت تستخدم أكثر من محرر واحد في نفس خاصية id تعيين الصفحة 

 < angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >

أين 

 import { AngularEditorConfig } from '@kolkov/angular-editor' ;


editorConfig: AngularEditorConfig = {
    editable : true ,
      spellcheck : true ,
      height : 'auto' ,
      minHeight : '0' ,
      maxHeight : 'auto' ,
      width : 'auto' ,
      minWidth : '0' ,
      translate : 'yes' ,
      enableToolbar : true ,
      showToolbar : true ,
      placeholder : 'Enter text here...' ,
      defaultParagraphSeparator : '' ,
      defaultFontName : '' ,
      defaultFontSize : '' ,
      fonts : [
        { class : 'arial' , name : 'Arial' } ,
        { class : 'times-new-roman' , name : 'Times New Roman' } ,
        { class : 'calibri' , name : 'Calibri' } ,
        { class : 'comic-sans-ms' , name : 'Comic Sans MS' }
      ] ,
      customClasses : [
      {
        name : 'quote' ,
        class : 'quote' ,
      } ,
      {
        name : 'redText' ,
        class : 'redText'
      } ,
      {
        name : 'titleText' ,
        class : 'titleText' ,
        tag : 'h1' ,
      } ,
    ] ,
    uploadUrl : 'v1/image' ,
    upload : ( file : File ) => { ... }
    uploadWithCredentials : false ,
    sanitize : true ,
    toolbarPosition : 'top' ,
    toolbarHiddenButtons : [
      [ 'bold' , 'italic' ] ,
      [ 'fontSize' ]
    ]
} ;

لكي يعمل ngModel formControlName يجب استيراد FormsModule من @angular/forms @angular/forms ReactiveFormsModule

لخدمة ملف الرموز ، تأكد من أن angular.json يحتوي على تكوين الأصول التالي: 

 {
  "glob": "**/*",
  "input": "node_modules/@kolkov/angular-editor/assets/icons",
  "output": "assets/ae-icons/"
}

التصميم

قم بتوصيل ملف السمة الافتراضي إلى angular.json أو nx.json 

 "styles": [
     "projects/angular-editor-app/src/styles.scss",
     "node_modules/@kolkov/angular-editor/themes/default.scss"
],

أو @include أو @use في ملف styles.scss ، ثم تجاوز متغيرات السمة الافتراضية مثل هذا: 

 :root {
  --ae-gap : 5 px ;
  --ae-text-area-border : 1 px solid #ddd ;
  --ae-text-area-border-radius : 0 ;
  --ae-focus-outline-color : #afaeae auto 1 px ;
  --ae-toolbar-padding : 1 px ;
  --ae-toolbar-bg-color : #b3dca0 ;
  --ae-toolbar-border-radius : 1 px solid #ddd ;
  --ae-button-bg-color : #dadad7 ;
  --ae-button-border : 3 px solid #3fb74e ;
  --ae-button-radius : 5 px ;
  --ae-button-hover-bg-color : #3fb74e ;
  --ae-button-active-bg-color : red ;
  --ae-button-active-hover-bg-color : blue ;
  --ae-button-disabled-bg-color : gray ;
  --ae-picker-label-color : rgb ( 78 , 84 , 155 );
  --ae-picker-icon-bg-color : rgb ( 34 , 41 , 122 );
  --ae-picker-option-bg-color : rgba ( 221 , 221 , 84 , 0.76 );
  --ae-picker-option-active-bg-color : rgba ( 237 , 237 , 62 , 0.9 );
  --ae-picker-option-focused-bg-color : rgb ( 255 , 255 , 0 );  
}

أزرار مخصصة

يمكنك تحديد الأزرار المخصصة الخاصة بك مع إجراءات مخصصة باستخدام executeCommandfn. يقبل الأوامر من execcommand. الوسيطة الأولى من هذه الطريقة هي acommandname والوسيطة الثانية هي Avalueargument. يوضح المثال زر يضيف شعار المحرر الزاوي إلى المحرر. 

 < angular-editor id =" editor1 " [(ngModel)] =" htmlContent1 " [config] =" config1 " (ngModelChange) =" onChange($event) "
                (blur) =" onBlur($event) " >
  < ng-template #customButtons let-executeCommandFn =" executeCommandFn " >
    < ae-toolbar-set >
      < button aeButton title =" Angular editor logo " (click) =" executeCommandFn('insertHtml', angularEditorLogo) " >
        < svg viewBox =" -8 0 272 272 " xmlns =" http://www.w3.org/2000/svg "
             preserveAspectRatio =" xMidYMid " fill =" #000000 " >
          < g id =" SVGRepo_bgCarrier " stroke-width =" 0 " > </ g >
          < g id =" SVGRepo_tracerCarrier " stroke-linecap =" round " stroke-linejoin =" round " > </ g >
          < g id =" SVGRepo_iconCarrier " >
            < g >
              < path
                d =" M0.0996108949,45.522179 L125.908171,0.697276265 L255.103502,44.7252918 L234.185214,211.175097 L125.908171,271.140856 L19.3245136,211.971984 L0.0996108949,45.522179 Z "
                fill =" #E23237 " > </ path >
              < path
                d =" M255.103502,44.7252918 L125.908171,0.697276265 L125.908171,271.140856 L234.185214,211.274708 L255.103502,44.7252918 L255.103502,44.7252918 Z "
                fill =" #B52E31 " > </ path >
              < path
                d =" M126.107393,32.27393 L126.107393,32.27393 L47.7136187,206.692607 L76.9992218,206.194553 L92.7377432,166.848249 L126.207004,166.848249 L126.306615,166.848249 L163.063035,166.848249 L180.29572,206.692607 L208.286381,207.190661 L126.107393,32.27393 L126.107393,32.27393 Z M126.306615,88.155642 L152.803113,143.5393 L127.402335,143.5393 L126.107393,143.5393 L102.997665,143.5393 L126.306615,88.155642 L126.306615,88.155642 Z "
                fill =" #FFFFFF " > </ path >
            </ g >
          </ g >
        </ svg >
      </ button >
    </ ae-toolbar-set >
  </ ng-template >
</ angular-editor >

API

المدخلات

مدخل يكتب تقصير مطلوب وصف
بطاقة تعريف string - لا خاصية المعرف عند استخدام محرر متعدد في نفس الصفحة
[التكوين] AngularEditorConfig default config لا تكوين للمحرر
عنصر نائب string - لا قم بتعيين عنصر نائب مخصص لمنطقة الإدخال
Tabindex number - لا تعيين مجموعة Tabindex على محرر الزاوي

المخرجات

الإخراج وصف
(HTML) الإخراج HTML
(ViewMode) تم إطلاقه عند تبديل وضع مصدر HTML
(طمس) تم إطلاقه عندما تم تحرير المحرر
(ركز) تم إطلاقه عندما يركز المحرر

طُرق

اسم وصف
ركز يركز عنصر المحرر

آخر

اسم يكتب وصف
AngulareditorConfig إعدادات التكوين لمكون Angulareditor.

إعدادات

مدخل يكتب تقصير مطلوب وصف
قابلة للتحرير bolean true لا تعيين تمكين التحرير أم لا
فحص الإملائي bolean true لا تعيين ممكّن Elpchecking أو لا
يترجم string yes لا تعيين تمكين الترجمة أم لا
عقم bolean true لا قم بتعيين التمكين للتطهير DOM أم لا
ارتفاع string auto لا ضبط ارتفاع المحرر
مينهايت string 0 لا حدد الحد الأدنى من ارتفاع المحرر
maxheight string auto لا حدد أقصى ارتفاع للمحرر
عرض string auto لا حدد عرض المحرر
Minwidth string 0 لا حدد الحد الأدنى عرض المحرر
enoledetoolbar bolean true لا تعيين شريط الأدوات ممكّنًا أم لا
Showtoolbar bolean true لا تعيين شريط الأدوات مرئيًا أم لا
نظام الأدوات string top لا تعيين موقع شريط الأدوات أعلى أو أسفل
عنصر نائب string - لا تعيين نص النائب
DefaultParagraphSeparator string - لا اضبط فاصل الفقرة الافتراضي مثل p
DefaultFontName string - لا اضبط الخط الافتراضي مثل Comic Sans MS
DefaultFontSize string - لا اضبط حجم الخط الافتراضي مثل 1 - 7
تحميل string - لا اضبط نقطة تحميل الصورة https://api.exapple.com/v1/image/upload وإرجاع الاستجابة باستخدام مفتاح ImageUrl. {"imageurl":}
رفع function - لا تعيين وظيفة تحميل الصورة
التحميل مع الأداء bolean false لا تعيين تمرير أو عدم بيانات الاعتماد في مكالمة تحميل الصورة
الخطوط Font[] - لا تعيين مجموعة من الخطوط المتاحة [{name, class},...]
CustomClasses CustomClass[] - لا تعيين مجموعة من الخطوط المتاحة [{name, class, tag},...]
مخطط bolean true لا حدد الخطوط العريضة للمحرر إذا كان في التركيز
Toolbarhiddenbuttons string[][] - لا مجموعة من مجموعة أسماء الأزرار أو العناصر للاختباء 
toolbarHiddenButtons: [
  [
    'undo' ,
    'redo' ,
    'bold' ,
    'italic' ,
    'underline' ,
    'strikeThrough' ,
    'subscript' ,
    'superscript' ,
    'justifyLeft' ,
    'justifyCenter' ,
    'justifyRight' ,
    'justifyFull' ,
    'indent' ,
    'outdent' ,
    'insertUnorderedList' ,
    'insertOrderedList' ,
    'heading' ,
    'fontName'
  ] ,
  [
    'fontSize' ,
    'textColor' ,
    'backgroundColor' ,
    'customClasses' ,
    'link' ,
    'unlink' ,
    'insertImage' ,
    'insertVideo' ,
    'insertHorizontalRule' ,
    'removeFormat' ,
    'toggleEditorMode'
  ]
]

ما هو مدرج

ضمن التنزيل ستجد الدلائل والملفات التالية. سترى شيئًا كهذا: 

 angular-editor/
└── projects/
    ├── angular-editor/
    └── angular-editor-app/

angular-editor/ - مكتبة

تطبيق angular-editor-app/ -التجريبي

الوثائق

يتم استضافة وثائق Angulareditor في موقعنا على موقع Angulareditor

أيقونات من رموز الرموز أيقونات جمع الرموز

المساهمة

يرجى قراءة إرشاداتنا المساهمة. تشمل الاتجاهات لفتح المشكلات ومعايير الترميز والملاحظات حول التطوير.

تتوفر تفضيلات المحرر في تكوين المحرر لسهولة الاستخدام في محرري النص المشترك. اقرأ المزيد وقم بتنزيل الإضافات على http://editorconfig.org.

الإصدار

من أجل الشفافية في دورة إطلاقنا وفي السعي للحفاظ على التوافق المتخلف ، يتم الحفاظ على Angulareditor بموجب إرشادات الإصدار الدلالي.

راجع قسم الإصدارات في مشروعنا لـ Changelogs لكل إصدار إصدار.

المبدعون

أندريه كولكوف

  • https://github.com/kolkov

يتبرع

إذا كنت تحب عملي وأوفر وقتك ، يمكنك شراء لي؟ أو ؟

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل