jjzjj

javascript - React HTML 编辑器 (TinyMce)

coder 2024-07-24 原文

我一直在寻找用于 React 的 HTML 编辑器，但因为我找不到任何可以正常工作的东西(我只需要格式化文本 h1、h2、h3、p、粗体和图像 [在 base64 中])

最后我决定使用 Tiny Mce，效果很好。但只有当页面第一次打开时。如果我再次进入该页面。如果没有浏览器 relaod，则 tinymce 不会被初始化。你知道在这种情况下会触发什么 react 事件吗？到目前为止，这是我的小 wrapper :

/** @jsx React.DOM */
var React = require('react');

var TinyMceEditor = React.createClass({
    componentDidMount: function() {
        var that = this;
        tinymce.init({
            selector: "textarea.tiny-mce-editor",
            setup : function(editor) {
                editor.on('change', function(e) {
                    that.props.onChange(editor.getContent());
                });
            },
            plugins: [
                "lists link image charmap print preview anchor",
                "searchreplace code fullscreen",
                "insertdatetime media table contextmenu paste"
            ],
            toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
        });
        tinyMCE.get(that.props.lang + '-editor').setContent(that.props.html);
    },
    render:function(){
        return (
            <div>
                <textarea ref="text" className="tiny-mce-editor" id={this.props.lang + '-editor'} />
            </div>
        )
    }
});
module.exports = TinyMceEditor;

最佳答案

为了解决这个问题，我必须在卸载时删除 TinyMce 实例。

componentWillUnmount: function() {
    tinymce.remove('#' + this.props.lang + '-editor');
}

关于javascript - React HTML 编辑器 (TinyMce)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29169158/

javascriptTinyMcesectioneditorfunctionreactjstinymce-4

有关javascript - React HTML 编辑器 (TinyMce)的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. ruby-on-rails - 如何在 vim 编辑器中使用 bundler 打开 gem 源代码 - 2

    尝试使用bundleopen命令打开gem源代码，accordingtoofficialdocumentationandinstruction.因此，我在.profile中导出编辑器:exportBUNDLER_EDITOR=viexportEDITOR=vi并尝试打开例如rails使用控制台的源代码:bundleopenrails出现错误CouldnotlocaleGemfile[ruby-2.1.1][~/]$:rails-vRails4.0.3[ruby-2.1.1][~/]$:bundle-vBundlerversion1.5.3[ruby-2.1.1][~/]$:bundle

  6. ruby-on-rails - Rails 编辑序列化的 JSON 数据 - 2

    我有一个存储JSON数据的列。当它处于编辑状态时，我不知道如何显示它。serialize:value,JSON=f.fields_for:valuedo|ff|.form-group=ff.label:short=ff.text_field:short,class:'form-control'.form-group=ff.label:long=ff.text_field:long,class:'form-control' 最佳答案 代替=f.fields_for:valuedo|ff|请使用以下代码:=f.fields_for:va

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby-on-rails - 尝试编辑时，Rails form_for 结果为 POST 而不是 PUT - 2

    我正在使用Rails4并遇到以下错误。RoutingErrorNoroutematches[POST]"/logs/1/meals/13/edit我正在使用:meal传递模型对象的form_for，并且编辑页面正确呈现。但是，Rails似乎并没有检查膳食对象是否已经保存，因此它一直尝试将表单发送到#create操作并尝试发出POST请求，而不是将表单发送到更新操作并进行当我点击提交时一个PUT请求。我如何让form_for识别我正在尝试更新现有对象并且需要PUT而不是POST？其他一切正常，我已经运行了所有迁移。我是Rails的新手，几乎一整天都在尝试自己解决这个问题。请帮忙!请注意，

随机推荐