编辑器有哪些?这里只列出个人使用过的几个
1. npm install依赖
npm install wangeditor --save
2. 在jsx文件中引入
import E from 'wangeditor'
3. HTML结构
4. 初始化使用
componentDidMount () {
this.initEditor()
}
initEditor () {
const elem = this.refs.editorElem
const editor = new E(elem)
this.editor = editor
editor.customConfig.zIndex = 100
editor.customConfig.uploadImgServer = utils.url + '/fileclient-management/api/uploadpic'
// 限制一次最多上传 1 张图片
editor.customConfig.uploadImgMaxLength = 1
editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
console.log(files)
if (files[0]) {
const formData = new window.FormData()
formData.append('file', files[0], 'cover.jpg')
fetch(utils.url + '/fileclient-management/api/uploadpic', {
method: 'POST',
body: formData
}).then((res) => {
return res.json()
}).then((res) => {
const data = res.resultData
if (data) {
// 上传代码返回结果之后,将图片插入到编辑器中
insert(data.resourceUrl)
} else {
console.log(data.msg)
}
})
} else {
message.info('請選擇要上傳的圖片')
}
}
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
// 'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
// 'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
// 'emoticon', // 表情
'image', // 插入图片
// 'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.lang = {
'设置标题': 'Title',
'字号': 'Size',
'文字颜色': 'Color',
'设置列表': 'List',
'有序列表': '',
'无序列表': '',
'对齐方式': 'Align',
'靠左': '',
'居中': '',
'靠右': '',
'正文': 'p',
'链接文字': 'link text',
'链接': 'link',
'上传图片': 'Upload',
'网络图片': 'Web',
'图片link': 'image url',
'插入视频': 'Video',
'格式如': 'format',
'上传': 'Upload',
'创建': 'init'
}
editor.create()
}
5. 提交或赋值的方法
提取内容:
this.editor.txt.html()
获取内容后填入:
this.editor.txt.html(data.content)
1. npm install 依赖
npm install @tinymce/tinymce-react --save
2. 文件中引入
import { Editor } from '@tinymce/tinymce-react'
3. HTML结构,填写apiKey,注意这里自定义上传图片或文件时需要写自己的方法(imagesUploadHandler)
4. 初始化使用,自定义上传图片的方法,imagesUploadHandler
componentDidMount () {
this.initEditor()
}
initEditor () {
const editor = this.refs.tinyEditor
this.editor = editor.editor
}
imagesUploadHandler = (blobInfo, success, failure) => {
if (blobInfo.blob()) {
const formData = new window.FormData()
formData.append('file', blobInfo.blob(), blobInfo.filename())
fetch(utils.url + '/fileclient-management/api/uploadpic', {
method: 'POST',
body: formData
}).then((res) => {
return res.json()
}).then((res) => {
const data = res.resultData
if (data) {
// 将图片插入到编辑器中
success(data.resourceUrl)
} else {
failure(data.msg)
}
})
} else {
message.info('請選擇要上傳的圖片')
}
}
5. 提取内容、设置内容的方法
提取内容:
this.editor.getContent()
设置内容(设置state的content):
data,是服务器返回的数据
this.setState({
content: data.content
})
至此