在网上看过很多的富文本编辑器,给大家推荐两个我自己使用的富文本编辑器 PC端通用
Rreact
推荐 BraftEditor
在线文档
– npm
npm install braft-editor --save
//
const editorProps = {
contentFormat: 'html',
initialContent: value.content ? value.content : '',
contentId: value.id,
language:language,
height: 200,
emojis:['😀','😁','😂'],
controls:['emoji']
};
const media = {
allowPasteImage: false, // 是否允许直接粘贴剪贴板图片(例如QQ截图等)到编辑器
image: false, // 开启图片插入功能
video: false, // 开启视频插入功能
audio: false, // 开启音频插入功能
validateFn: null, // 指定本地校验函数,说明见下文
// uploadFn: uploadFn, // 指定上传函数,说明见下文
removeConfirmFn: null, // 指定删除前的确认函数,说明见下文
onRemove: null, // 指定媒体库文件被删除时的回调,参数为被删除的媒体文件列表(数组)
onChange: null, // 指定媒体库文件列表发生变化时的回调,参数为媒体库文件列表(数组)
onInsert: null, // 指定从媒体库插入文件到编辑器时的回调,参数为被插入的媒体文件列表(数组)
};
// 使用
<BraftEditor className={br.bfContainer} {...editorProps}
media={media}, flexDirection: 'column-reverse'}}/>
代码中使用
// 表单提交事件handleOk()下面已经放置事件了
<FormItem>
{/*内容 */}
{getFieldDecorator('content', {
// initialValue: value && value.content ? value.content : '',
initialValue: BraftEditor.createEditorState(value.content)|| '',
rules: [
{
required: true,
message: formatMessage({ id: 'app.appManagement.please.enter.send.content' }),
},
{
validator: (rule, value, callback) => {
if (!value.toText() || value.toText() == '') {
callback(
formatMessage({id: 'app.appManagement.please.enter.send.content'})
);
} else if (value.toText().length < 1) {
callback(
formatMessage({id: 'app.appManagement.please.enter.send.content'})
);
} else {
callback();
}
},
},
],
})
(<BraftEditor
{...editorProps}
media={media/>)}
</FormItem>
提交事件
handleOk = (fields, id, skip) => {
const { dispatch, loanproducts, loading } = this.props;
let customContent = '';
if (fields.content) {
// 转换问文本
customContent = fields.content.toText();
}
console.log(customContent,'customContent ')
});
效果图
vue
mavonEditor
在线文档
import mavonEditor from 'mavon-editor';
import Vue from 'vue';
// 一定要加这个样式不然没有图标
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor)
<div>
// 页面回显使用 v-html=""
<mavon-editor v-model="contents" :isHljs = "true" @imgAdd="$imgAdd" ref=md >
</mavon-editor>
</div>
----------------------------------------------------------------------------------------------
data() {
return {
id:this.$route.params.id,
content:'',
contents:'',
title:'',
img:[],
imgs:"",
},
methods: {
$imgAdd(pos, $file){
var formdata = new FormData(),
That = this;
formdata.append('Content', $file);
const data={content:$file.miniurl}
uploadFiles(data).then((response)=>{
if (response.code==200){
if (response.data.fileName){
let params=[{ url: response.data.fileName}]
this.img=(this.img.splice(0,index.index)).concat(params)
this.imgs=this.imgs+response.data.fileName+","
this.$refs.md.$img2Url(pos,response.data.fileName);
}
}else {
Toast('上传失败');
}
})
},
}
//内容反显
findOneArticles: function () {
let param = {
id: this.id
}
findOneArticles(param).then((response) => {
this.content = response.data.content
this.contentHtml = response.data.content
this.img = response.data.imgJsonArr
this.title = response.data.title
this.imgs = response.data.imgs
})
}
效果图
vue的富文本有个小小缺点就是回显的内容是输入内容转换为Html格式