• react中simdiotr富文本的基础使用


     

      simditor是什么?

      一个基于浏览器的文本编辑器,也就是我们通常说的富文本

      

      simditor官网

      https://simditor.tower.im/  (simditor官网)

      https://github.com/mycolorway/simditor  (github)

      simditor安装

      npm install simditor

      simditor卸载

      npm uninstall simditor

      simditor使用

      1.在你react组件中引入simditor和css样式

      

      2.在你react组件的render()中return下面的html代码

      

      3.Simditor需要在组件加载时进行初始化,在生命周期函数componentDidMount()中调用richEditor()

      

       注:其中this.refs[''editor-descripition"]指代上面DOM节点<textarea ref="editor-descripition"></textarea>

     

      如果要插入多个富文本编辑器,只需要在创建相应的simditor实列

      

      

      若运行后报错如下图提示

      

       注:可降低版本,经本人测试,simditor2.3.6版本可解决上述问题

      DEMO

    import React, { Component } from 'react';
    import Simditor from 'simditor';
    import 'simditor/styles/simditor.css';
    
    class QuestionList extends Component {
    
        constructor(props) {
            super(props)
            this.state = {
              
            }
        }
    
        componentDidMount() {
            this.richEditor();
        }
    
        richEditor() {
            let element_editor_descripition = this.refs['editor-descripition'];
            let element_input_descripition = this.refs['editor-input-descripition'];
            let element_output_descripition = this.refs['editor-output-descripition'];
            let editor1 = new Simditor({
                textarea: element_editor_descripition,
                toolbar: [
                    'title', 'bold', 'italic',
                    'underline', 'strikethrough', 'fontScale',
                    'color', 'ol', 'ul',
                    'blockquote', 'code', 'table',
                    'link', 'image', 'indent',
                    'outdent', 'alignment', 'hr']
            });
            let editor2 = new Simditor({
                textarea: element_input_descripition,
                toolbar: [
                    'title', 'bold', 'italic',
                    'underline', 'strikethrough', 'fontScale',
                    'color', 'ol', 'ul',
                    'blockquote', 'code', 'table',
                    'link', 'image', 'indent',
                    'outdent', 'alignment', 'hr']
            });
            let editor3 = new Simditor({
                textarea: element_output_descripition,
                toolbar: [
                    'title', 'bold', 'italic',
                    'underline', 'strikethrough', 'fontScale',
                    'color', 'ol', 'ul',
                    'blockquote', 'code', 'table',
                    'link', 'image', 'indent',
                    'outdent', 'alignment', 'hr']
            });
        }
    
        render() {
    
            return (
               <div>
                    <textarea ref="editor-descripition" placeholder="富文本编辑器"></textarea>
                    <textarea ref="editor-input-descripition" placeholder="富文本编辑器"></textarea>
                    <textarea ref="editor-output-descripition" placeholder="富文本编辑器"></textarea>
               </div>
            );
        }
    }
    
    export default QuestionList;

      

  • 相关阅读:
    网站SEO优化问答精选
    用eclipse怎样将本地的项目打成jar包上传到maven仓库
    查询linux机器的公网ip
    Srping mvc mabatis 报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
    使用SecureCRT的SFTP在WINDOWS与LINUX之间传输文件(转载)
    苹果手机如何减少后台流量
    《图解CSS3——第4章 CSS3背景-2》
    《图解CSS3——第4章 CSS3背景-1》
    《图解CSS3——第3章 CSS3边框-4》
    《图解CSS3——第3章 CSS3边框-3》
  • 原文地址:https://www.cnblogs.com/tu-0718/p/13151398.html
Copyright © 2020-2023  润新知