一.使用

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

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 //

],

providers: [],

bootstrap: [AppComponent]

})

1.2 使用

@Component({

selector: 'app-edit',

template: `

[init]=editParam>

`,

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就能绑定内容了

因为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所有的配置文件都下载下来了,所以我把所有好用的插件都放了上去.加载速度还是很快的.