Angular中使用ueditor富文本编辑器
npm install ngx-ueditor --save
把从官网下载下来的uediotor文件放在assets中
在app.module.ts(在其他module.ts中也放一下,以防万一,我没试过)
import { UEditorModule } from 'ngx-ueditor';
imports: [
UEditorModule.forRoot({
js:[
'../assets/ueditor/ueditor.all.js',
'../assets/ueditor/ueditor.config.js',
],
options:{
UEDITOR_HOME_URL:'../assets/ueditor',
}
}),
]
在需要使用UEditor的组件中
HTML文件
TS文件
html = ``; //编辑器内容
editorConfig={
wordCount: true, // 文字计数
initialFrameHeight: 300, // 设置高度
initialFrameWidth: '100%', // 设置宽度
}
_ready($event){}
_destroy(){}
_change($event){}
去修改src\assets\ueditor\ueditor.config.js,添加一句:
window.UEDITOR_HOME_URL="/assets/ueditor/";
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
然后极大可能报错,都和ueditor.config.js有关:
类似于下面这种报错:
The load ../assets/ueditorthemes/default/css/ueditor.css fails,check the url settings of file ueditor.config.js
解决方法:在ueditor.config.js中找到下面代码,取消部分注释
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件:
//现有如下皮肤:default
//,theme:'default'
//,themePath:URL +"themes/"
修改后的文件如下:
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
,lang:"zh-cn"
,langPath:URL +"lang/"
//主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件:
//现有如下皮肤:default
,theme:'default'
,themePath:URL +"themes/"
到此为止,ueditor出来了,部分功能无法实现,哈哈哈哈!!!!
toolbars:控制编辑器中的内容
// 'undo', 'redo', '|',
// 'bold', 'forecolor', 'removeformat', 'autotypeset', 'pasteplain', '|', '|',
// 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
// 'link', 'unlink', '|',
// 'simpleupload', 'insertimage', '|',
// 'wordimage', '|',
// 'inserttable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells'