ホーム>Web サイト構築リソース>その他のリソース
ダウンロード

Angulareditor

Angular 6-19+のシンプルなネイティブWysiWyg/Rich Text Editor

2019年11月27日17-26-29

デモ

デモ| stackblitzのコードを参照してください。

はじめる

インストール

NPMパッケージマネージャーを介してインストールします

npm install @kolkov/angular-editor --save

バージョン

3.0.0以上-AngularV13 +の場合（フォントの削除素晴らしいアイコンdeps + CSS変数）

2.0.0以上-Angular V13.xx以上の場合

1.0.0以上-Angular V8.xx以上の場合

0.18.4以降-Angular 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が動作するには、 @angular/formsからFormsModuleをインポートするか、 formControlNameの場合、 @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 project styles.scssファイルで@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であり、2番目の引数はAvalueargumentです。例は、Angular Editorのロゴをエディターに追加するボタンを示しています。 

 < 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プロパティ同じページで複数のエディターを使用した場合
[構成] AngularEditorConfig default configいいえエディター用の構成
プレースホルダーstring -いいえ入力領域のカスタムプレースホルダーを設定します
Tabindex number -いいえAngular-EditorにTabindexを設定します

出力

出力説明
（HTML）出力HTML
（ViewMode）視覚的およびHTMLソースモードを切り替えたときに発射されます
（ぼやけ）編集者がぼやけたときに解雇されました
（集中）編集者が焦点を合わせると解雇されます

方法

名前説明
集中エディター要素に焦点を合わせます

他の

名前タイプ説明
AngularEditorConfig構成Angulareditorコンポーネントの構成。

構成

入力タイプデフォルト必須説明
編集可能bolean trueいいえ編集を有効にするかどうか
スペルチェックbolean trueいいえEngabledを設定するかどうかを設定します
翻訳するstring yesいいえ翻訳が有効かどうかを設定します
消毒しますbolean trueいいえDOMの消毒が有効かどうかを設定します
身長string autoいいえ編集者の高さを設定します
ミニハイトstring 0いいえ編集者の最小高さを設定します
マックスハイトstring autoいいえ編集者の最大高さを設定します
幅string autoいいえエディターの幅を設定します
ミニ幅string 0いいえエディターの最小幅を設定します
InableToolbar bolean trueいいえ設定ツールバーを有効にするかどうか
showtoolbar bolean trueいいえ目に見えるツールバーを設定します
ツールベルポスstring topいいえツールバーの位置を上または下部に設定します
プレースホルダーstring -いいえプレースホルダーテキストを設定します
defaultAragraphseparator string -いいえpなどのデフォルトの段落セパレーターを設定します
defaultfontname string -いいえComic Sans MSなどのデフォルトのフォントを設定します
defaultfontsize string -いいえ1などのデフォルトのフォントサイズ7設定します
uploadurl string -いいえ画像アップロードエンドポイントhttps://api.exapple.com/v1/image/uploadを設定し、ImageUrlキーを使用して応答を返します。 {"Imageurl"：}
アップロードfunction -いいえ画像アップロード機能を設定します
uploadwithcredentials bolean falseいいえ画像のアップロード呼び出しの合格または資格情報を設定するかどうか
フォントFont[] -いいえ利用可能なフォントの配列[{name, class},...]
カスタムクラスCustomClass[] -いいえ利用可能なフォントの配列[{name, class, tag},...]を設定します。
概要bolean trueいいえ焦点を合わせている場合、編集者のアウトラインを設定します
ToolbarhiddendButtons 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のドキュメントは、当社のWebサイトAngulareditorでホストされています

ligatureシンボルアイコンのコレクションアイコンからのアイコン

貢献

貢献ガイドラインを読んでください。開始の問題、コーディング基準、および開発に関するメモの方向性が含まれています。

エディターの設定は、一般的なテキストエディターで簡単に使用できるエディター構成で利用できます。続きを読んで、http：//editorconfig.orgでプラグインをダウンロードしてください。

バージョン化

リリースサイクルへの透明性と、後方互換性を維持するために努力するために、Angulareditorはセマンティックバージョンのガイドラインの下で維持されます。

各リリースバージョンのChangelogsについては、プロジェクトのリリースセクションを参照してください。

クリエイター

アンドレイ・コルコフ

  • https://github.com/kolkov

寄付する

あなたが私の仕事が好きで、私があなたの時間を節約するなら、あなたは私を買うことができますか？または ？

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて