4

我有一个使用 React 的应用程序。我现在有一个问题，我正在尝试实现bootstrap-wysiwyg/bootstrap3-wysiwyg包。

为了让我<textarea>作为ootstrap-wysiwyg/bootstrap3-wysiwyg文本编辑器工作，我需要在文本编辑器上运行以下 JQuery 函数：

$(".textarea").wysihtml5()

这是我的组件：

import React, { Component } from 'react'

export class MyTextEditor extends Component {
    render() {
        return (
            <div className="form-group">
                <textarea className="textarea"></textarea>
            </div>
        )
    }
}

如何将该 JQuery 函数应用于我<textarea>的 React 组件？

我知道混合 React 和 JQuery 不是很好的做法，但我真的需要它来工作。如果有另一种方法可以让包工作，我会很感激作为答案。

否则，如果有人可以帮助我使其正常工作，将不胜感激！

更新：（ 仍在寻找）

感谢所有的建议。我尝试了很多，但它们都导致了问题：

  1. <ReactQuill>只是显示不好，按钮很大。
  2. <EditableDiv>给我：Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
  3. Syam Mohan 的回答给了我：Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

仍在寻找可行的方法，感谢您迄今为止所做的所有努力！

4

2 回答 2

3

尝试这个：

import React, { Component } from 'react';
import $ from 'jquery'; 

export class MyTextEditor extends Component {

  componentDidMount() {
    $(".textarea").wysihtml5()
  }

  render() {
    return (
        <div className="form-group">
            <textarea className="textarea"></textarea>
        </div>
     )
  }
}

注意：不要忘记添加 JQuery 库

于 2016-12-26T13:07:52.500 回答
0

添加和导入 JQuery 是第一部分。

1）使用webpack我看到的最好的方法是在你的webpack.config.js：

var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

所有这些不同的错别字都是为了使 JQuery 可用性与各种模块兼容。当然你需要npm install jquery和你的插件（wysihtml5）。

2）或者你可以将它导入你的index.html： <script src="jquery-3.1.1.min.js"></script>

编辑：3）我使用了流星，meteor add jquery并且成功了。

然后，第二部分是在 React 中使用它。

要在元素上使用 jquery 插件，您需要先渲染它，这就是为什么您需要放入代码componentDidMount（在第一次渲染之后运行）。我会建议你（根据我在必须做与你相同的事情但使用 时的不同搜索bootstrapTable）使渲染部分最简单（通过删除 ）并ReactDOM.findDOMNode(this)用作 JQuery 的选择器：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export class MyTextEditor extends Component {

    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).wysihtml5()
    }

    render() {
        return (
            <textarea className="textarea"></textarea>
        )
    }
}

编辑：或者使用 React 的refs

import React, { Component } from 'react'

export class MyTextEditor extends Component {

    componentDidMount() {
        $(this.refs.textareaIWantToUse).wysihtml5()
    }

    render() {
        return (
            <div className="form-group">
                <textarea className="textarea" ref="textareaIWantToUse"></textarea>
            </div>
        )
    }
}
于 2016-12-26T15:46:45.973 回答