今日完成
quill富文本编辑器样式修改，客制化工具栏
ng-zooro模态框使用
明日计划
完成 文章上下线 编辑 删除功能
html调用
<quill-editor
class="quill"
placeholder="输入内容"
[modules]="quillConfig"
[(ngModel)]="editInfo.content"
>
</quill-editor>
导入
import { config } from './quill.config';
public quillContent:object;
设置配置文件
export const config = {
// modules: {
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline'],
[{ 'color': [] }, { 'background': [] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
['blockquote', 'code-block'],
[{ 'align': [] }],
['clean', 'link'],
]
};
遇到的问题
无论怎么修改样式文本编辑器都会超出父容器高度
解决办法
未找到有效资料 暂未解决
暂时单独设置margin-bottom增大下外边距，使样式不重叠
当点击立刻上线或存为草稿时弹出确认框 点击确认或延时关闭并完成页面跳转
使用方法
引入
import { NzModalService } from 'ng-zorro-antd/modal';
constructor(
private http: HttpClient,
private articleService: ArticleService,
private modalService: NzModalService,
private router: Router
) { }
// 上线 存草稿
submitArticle(status) {
this.editInfo.status = status;
//执行post请求 this.articleService.addArticle(this.editInfo)
.subscribe((res: any) => {
if (res.code == 0) {
this.subSuccess();
}
})
}
// 弹窗
subSuccess(): void {
//创建弹窗
const modal = this.modalService.success({
nzTitle: '操作成功',
nzContent: '页面将在两秒后跳转',
//点击确定执行方法
nzOnOk: this.subSuccessBack
})
//延时执行 setTimeout(() => this.subSuccessBack(modal), 2000);
}
// 页面跳转
subSuccessBack(modal) {
this.router.navigate(['/article']);
modal.destroy();
}
遇到的问题
发送post请求时发现后端接口并不能接受json格式的请求
使用postman测试
设置好对应请求头的请求体格式，不论json格式还是form-data格式都会返回状态码-9016
只用使用x-ww-form-urlencoded格式或者直接在url传参才可正常响应
所以在发送请求时需把对象类型的数据转换为字符串
//新增Article
addArticle(data) {
// 请求头
const httpOptions = {
headers: new HttpHeaders({ 'content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' })
}
// 数据格式转换
let postData: string = '';
for (let key in data) {
postData += key + '=' + data[key] + '&';
}
console.log(data)
console.log(postData)
return this.http.post('api/a/u/article', postData, httpOptions)
}
返回列表
评论