zoukankan      html  css  js  c++  java
  • 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;

      

  • 相关阅读:
    jvm基本结构和解析
    多态的意思
    java中对象的简单解读
    double类型和int类型的区别
    python 解析xml文件
    win10不能映射Ubuntu共享文件
    Qt程序打包
    Ubuntu boot分区文件误删,系统无法启动,怎么解
    ubuntu Boot空间不够问题“The volume boot has only 5.1MB disk space remaining”
    Ubuntu 分辨率更改 xrandr Failed to get size of gamma for output default
  • 原文地址:https://www.cnblogs.com/tu-0718/p/13151398.html
Copyright © 2011-2022 走看看