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;

      

  • 相关阅读:
    深入js——this
    深入js——作用域链
    深入js——变量对象
    深入js——执行上下文栈
    vue为什么不能检测数组的变化
    常用的文件下载方式
    vue中修改第三方组件的样式不生效
    Neo4j 学习笔记2
    Neo4j 学习笔记1
    idea git 命令
  • 原文地址:https://www.cnblogs.com/tu-0718/p/13151398.html
Copyright © 2011-2022 走看看