vue和react富文本编辑器

在网上看过很多的富文本编辑器，给大家推荐两个我自己使用的富文本编辑器 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格式