angular富文本編輯器tinymce-angular

一.使用

快速使用富文本,上手很迅速.

tinymce-angular把tinymce分裝成angular的一個組件,安裝引入後,添加一個editor標籤就能使用,以下

1.1 安裝與引入

npm install @tinymce/tinymce-angular

在你對應的module裏面引用

import { EditorModule } from '@tinymce/tinymce-angular'; 
@NgModule({   
declarations: [AppComponent   ],   
imports: [
    BrowserModule,
    EditorModule // <- Important part  
     ],  
providers: [],   
bootstrap: [AppComponent] 
     })

1.2 使用

@Component({
  selector: 'app-edit',
  template: `<editor apiKey=ptnnw15px4ils3sllw1sv54m6kl6flak2mdocfj72k0jv9w2 
[init]=editParam></editor>
`,
  styleUrls: ['./edit.component.scss']
})
export class EditComponent implements {
  editParam = {
    selector: 'textarea',
   // plugins是tinymce的各類插件
    plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample',
   // 語言包可使用tinymce提供的網址,可是牆的緣由,會連不上,因此仍是自行下載,放到assets裏面
    language_url: '../../../assets/tinymce/langs/zh_CN.js',  
    language: 'zh_CN',
    // toolbar定義快捷欄的操做, | 用來分隔顯示
    toolbar: 'codesample | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft'
      + ' aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo '
      + '| link unlink image code | removeformat | h2 h3 h4',
    height: 400,
    // 這裏是代碼塊的一些語言選擇,好像暫時還沒支持typescript,因此博文都是js格式
    codesample_languages: [
      { text: 'HTML/XML', value: 'markup' },
      { text: 'JavaScript', value: 'javascript' },
      { text: 'CSS', value: 'css' },
      { text: 'Java', value: 'java' }
    ]
  };
}

angular富文本編輯器angular-tinymce的使用就在此了

二.展現頁面

在tinymce中編輯的內容展現出來也很方便,這裏用使用ngModel就能綁定內容了

<editor [init]=editParam [(ngModel)]="editData.content"></editor>
 <div [innerHTML]="editData.content"></div>

由於angular的安全策略,會把innerHTML裏面的樣式過濾掉,這時候就須要信任下content

三.本地配置tinymce

第一步是使用了tinymce雲服務來建立編輯器,不少插件,樣式等,都是依賴tinymce上的各類文件,由於雲在國外,編輯器加載出來很慢.因此須要把雲上的文件配置到本地來

首先,下載tinymce

npm install tinymce

而後在angular.json文件中作下配置引入相應文件

"assets": [ 
"src/favicon.ico",
"src/assets",    
//  新增tinymce中的皮膚和插件文件夾,這種寫法參考copy-webpack-plugin
//  ng-cli的底層就是webpack
// 這三個分別的皮膚,插件,主題等引用文件夾,初始化的時候能夠去控制檯看看
{ "glob": "**/*", "input": "./node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "./node_modules/tinymce/plugins", "output": "/plugins/" },
{ "glob": "**/*", "input": "./node_modules/tinymce/themes", "output": "/themes/" }

 ],
 "styles": [
"src/styles.scss",
// prism的樣式文件,先忽略
"src/assets/styles/prism.css"
],
"scripts": [
// tinymce基礎文件,用來初始化編輯器
"node_modules/tinymce/tinymce.min.js",
// tinymce的codesample的語法高亮用的是prism,代碼塊回顯須要用到,也能用別的高亮插件,此處先忽略
"src/assets/js/prism.js"
 ]

配置完成,就能夠本地初始化tinymce的插件了,aot打包試試,看看打包是否有問題.

四. 圖片上傳插件和自定義上傳方法

要能上傳上傳圖片固然先得須要一個上傳圖片的接口.

tinymce有個默認的上傳方法,咱們只須要設置下參數   images_upload_url: uploadUrl 便可.固然默認須要你接口返回的圖片地址參數爲{location:xxxx}.

固然還有自定義上傳的辦法,images_upload_handler方法:

editParam = {
    selector: 'textarea',
    mobile: {
      theme: 'silver',
      plugins: [ 'autosave', 'lists', 'autolink' ]
    },
    plugins: `link lists image code table colorpicker fullscreen fullpage help
    textcolor wordcount contextmenu codesample importcss media preview print
    textpattern tabfocus hr directionality imagetools autosave paste`,
    language_url: '../../../assets/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    toolbar: 'codesample | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft'
      + ' aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo '
      + '| link unlink image code | removeformat | h2 h4 | fullscreen preview paste',
    height: 700,
    codesample_languages: [
      { text: 'JavaScript', value: 'javascript' },
      { text: 'HTML/XML', value: 'markup' },
      { text: 'CSS', value: 'css' },
      // { text: 'TypeScript', value: 'typescript' },
      { text: 'Java', value: 'java' }
    ],
    image_caption: true,
    // paset 插件容許粘貼圖片
    paste_data_images: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    // 這個即是自定義上傳圖片方法
    images_upload_handler: function (blobInfo, success, failure) {
      let xhr, formData;
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open('POST', '/api/upload');
      xhr.onload = function() {
        let json;
        if (xhr.status !== 200) {
          failure('HTTP Error: ' + xhr.status);
          return;
        }
        json = JSON.parse(xhr.responseText);
        if (!json || typeof json.location !== 'string') {
          failure('Invalid JSON: ' + xhr.responseText);
          return;
        }
        success(json.location);
      };
      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      xhr.send(formData);
    }

  };

這裏init的配置多了很多,由於已經把tinymce全部的配置文件都下載下來了,因此我把全部好用的插件都放了上去.加載速度仍是很快的.