tinymce的使用
默认ng-alain 已经内置了tinymc
- 查看共享模块是否加载了tinymce
import {NgxTinymceModule} from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule];
- 在appmodule中注册
import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
imports: [
BrowserModule,
NgxTinymceModule.forRoot({
baseURL: '/assets/tinymce/',
config: {
height: 500,
menubar: false, // 隐藏工具栏
toolbar_mode: 'wrap', // 工具不出现三个点下拉 sliding 滑动下拉
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image tools textpattern help emoticons autosave indent2em autoresize',
toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em',
language: 'zh_CN',
language_url: '/assets/tinymce/langs/zh_CN.js',
automatic_uploads: false, // 自动上传
paste_data_images: true,
// statusbar:false, // 隐藏底部 http://tinymce.ax-z.cn/configure/editor-appearance.php
branding: false, // 隐藏右下角技术支持
browser_spellcheck: true, // 拼写检查
placeholder: '请输入内容',
// toolbar_location:'bottom', //位置底部
/*初始化文字的方法
init_instance_callback: function(editor) {
editor.setContent('请输入');
console.log(editor.content);
},*/
}
}),
- 直接使用
<tinymce [(ngModel)]="userInfo" ></tinymce>
配置tinymce的汉化及工具,添加图片上传功能
- 加载自定义配置
<tinymce [(ngModel)]="userInfo" [config]="editorConfig" ></tinymce>
editorConfig = {
height: 200,
images_upload_url: this.upLoadUrl,
// images_upload_base_path: 'http://212.64.85.235:8041/',
// 图片上传功能
images_upload_handler: (blobInfo, success, failure) => {
let formData;
formData = new FormData();
// console.log(blobInfo);
formData.append('file', blobInfo.blob(), blobInfo.filename());
// console.log(formData);
this.http.post(this.upLoadUrl, formData).subscribe(response => {
// // console.log('图片上传结果'把值存在RESPONSE里)console.log(response);
if (response) {
const url = response.data;
// 把图片链接,img src标签显示图片的有效链接放到下面回调函数里
console.log(url);
success(url);
} else {
if (response && response.msg) {
failure(response.msg);
} else {
failure('上传失败:未知错误');
}
}
});
}
};