angular8 富文本编辑_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 //
],
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所有的配置文件都下载下来了,所以我把所有好用的插件都放了上去.加载速度还是很快的.