首頁>建站資源>其他資源
下載

Angulareditor

一個簡單的本機Wysiwyg/Angular 6-19+的豐富文本編輯器

2019年11月27日17-26-29

演示

演示|請參閱Stackblitz中的代碼。

入門

安裝

通過NPM軟件包管理器安裝

npm install @kolkov/angular-editor --save

版本

3.0.0及以上 - 對於Angular V13 +（刪除的字體很棒的圖標DEP + CSS變量）

2.0.0及以上 - 對於角v13.xx及以上

1.0.0及以上 - 對於Angular V8.xx及以上

0.18.4及以上 - 對於角v7.xx

0.15.x-對於角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工作，您必須從@angular/forms或formControlName導入FormsModule ，您必須從@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"
],

或您的project styles.scss文件中的@include或@use ，然後覆蓋默認主題變量： 

 :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

輸入

輸入類型預設必需的描述
ID string -不同一頁面上使用多個編輯器時的ID屬性
[config] AngularEditorConfig default config不編輯器的配置
佔位符string -不設置輸入區域的自定義佔位符
Tabindex number -不在Angular-編輯器上設置Tabindex

輸出

輸出描述
（html）輸出HTML
（ViewMode）切換Visual和HTML源模式時發射
（模糊）當編輯模糊時被解僱
（重點）當編輯重點時被解僱

方法

姓名描述
重點聚焦編輯器元素

其他

姓名類型描述
AngulareditorConfig配置Angulareditor組件的配置。

配置

輸入類型預設必需的描述
可編輯bolean true不設置啟用是否設置編輯
拼寫檢查bolean true不設置啟用拼寫檢查是否
翻譯string yes不設置啟用的翻譯與否
消毒bolean true不設置啟用dom消毒或不設置
高度string auto不編輯器的設置高度
Minheight string 0不設置編輯器的最小高度
麥克海string auto不設置編輯器的最大高度
寬度string auto不設置編輯器的寬度
最小string 0不設置編輯器的最小寬度
enabletoolbar bolean true不設置工具欄是否啟用
Showtoolbar bolean true不設置工具欄是否可見
工具欄string top不設置工具欄位置頂部或底部
佔位符string -不設定佔位符文字
DefaultParagraphaphapharator string -不設置默認段落分隔符，例如p
DefaultFontName string -不設置默認字體，例如Comic Sans MS
DefaultFontSize string -不設置默認字體大小7例如1
上載string -不設置圖像上傳端點https://api.exapple.com/v1/image/upload ，並使用imageUrl鍵返迴響應。 {“ imageUrl”：}
上傳function -不設置圖像上傳功能
上傳WithCredentials bolean false不在圖像上傳電話中設置通過或不憑據
字體Font[] -不設置一系列可用字體[{name, class},...]
定制類CustomClass[] -不設置可用字體的數組[{name, class, tag},...]
大綱bolean true不如果焦點為focor
工具巴爾漢頓頓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上閱讀更多並下載插件。

版本控制

為了透明我們的發行週期並努力保持向後兼容性，在語義版本指南下保持了Angularedit。

請參閱每個發行版本的更改程序項目的發布部分。

創造者

安德烈·科爾科夫

  • https://github.com/kolkov

捐

如果您喜歡我的工作，我節省了您的時間，您可以給我買一個嗎？或者 ？

展開
附加信息
相關應用
爲您推薦
相關資訊 全部