Question

我通过AJAX将tinyMCE用于textareas和POSTing表单。

但是当我尝试保存textarea值时，它会在第一次点击时使用旧值，但在第二次点击时会显示更新的值。

我尝试使用tinyMCE.triggerSave()，但它没有用。

我还尝试了tinyMCE.get('myid').getContent()，但仍需要旧值。

我的代码如下。

    $(".submit").live("click", function () {
            tinyMCE.triggerSave();
            var f = $(this).parents("form");
            var action = f.attr("action");
            var serializedForm = f.serialize();
            //tinyMCE.triggerSave(); also tried putting here
            $.ajax({
                 type: 'POST',
                 url: action,
                 data: serializedForm,
                 async: false,
                 success: function (data, textStatus, request) {
                     $(".divform").html(data);
                 },
                 error: function (req, status, error) {
                     alert&("Error occurred!");
                 }
            });
    return false;
    });

请帮助，任何帮助将不胜感激

Answer 1

您可以按照以下方式配置TinyMCE，以便在通过TinyMCE编辑器进行更改时保持隐藏文本的值保持同步：

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

有了这个，你可以随时直接从textarea元素访问最新的值。

已经在TinyMCE 4.0上测试了

演示：http://jsfiddle.net/9euk9/

Answer 2

使用此代替tinymce.triggerSave();

$('#' + 'your_editor_id').html( tinymce.get('your_editor_id').getContent() );

Answer 3

Dan Malcolm为TinyMCE 3.x发布的另一个实现方案如下：

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.onChange.add(function() {
            editor.save();
        });
    }
});

除了使用3.x之外，此版本使用editor.save代替tinymce.triggerSave，这意味着它只更新当前编辑器而不是页面中的所有编辑器。

Answer 4

对我来说很好用

import React, { useState, useEffect } from "react"; import { MenuItem, TextField } from "@material-ui/core"; import _get from "lodash/get"; const InfiniteSelection = ({ data, onCaseCadeSelection }) => { // an array of segments like ['a1', 'x4', 'z1'] const [path, setPath] = useState([]); // joins to a string like `a1.x4.z1` const cascade = path.join("."); // call callback whenever the cascade changes useEffect(() => { if (onCaseCadeSelection) { onCaseCadeSelection(cascade); } }, [cascade]); // need to know the index in the paths array where the change occurred const handleChange = (index) => (event) => { // set this value and delete everything after it setPath([...path.slice(0, index), event.target.value]); }; // options for the NEXT value from a given path const optionsForPath = (path) => { // lodash get handles this except when path is empty array [] const value = path.length > 0 ? _get(data, path) : data; // get the options from this path, or null if it is terminal return typeof value === "object" ? Object.keys(value) : null; }; // either the current path is to a terminal value, or there should be one more level of selects const currentOptions = optionsForPath(path); // helper function can be used as a callback to path.map // will also be called one extra time for the next values if not on a terminal value const renderSelect = (value, index) => { return ( <SelectControlled className="text form_text" variant="outlined" list={optionsForPath(path.slice(0, index)) ?? []} onChange={handleChange(index)} value={value ?? ""} /> ); }; // render selects for each element in the path and maybe a next select return ( <div className="vertically_spaced"> {path.map(renderSelect)} {currentOptions === null || renderSelect("", path.length)} </div> ); };

放在ajax帖子之前

Answer 5

在使用Ajax发布数据之前，请先使用此脚本。这是JavaScript代码，使用前请加载微小的mce js文件并使用。

tinymce.triggerSave（）;

$.ajax({ 
    type: 'post', 
    url: 'autoSaveReport.php', 
    data: $('form').serialize(), 
    success: function (result) { 
        var redirectURL = window.location.pathname; 
        var redirectURL1 = redirectURL+"?incid="+result; 
        window.location = window.location+"?incid="+result; 
    } 
});

Answer 6

@Dan Malcom，

我注意到，当您在其中一个框中键入内容时，按“显示文本值”按钮，然后，如果单击“撤消”箭头，它只会保留已显示的文本，而不是由“撤消”。我在尝试使用您的示例来检查文本编辑器中是否包含某些内容时发现了它。

在我的示例中，如果我在其中键入内容，则执行“撤消”操作会删除其中的文本，但表单仍会提交。

在此处查看示例：

enter code here

https://codepen.io/speedygonzales77/pen/bzMrqB

enter code here

Answer 7

我知道时间过去了，但我今天找到了这个解决方案。

在序列化表单之前，您必须仅使用以下方法保存编辑器：

tinymce.activeEditor.save();
var serializedForm = f.serialize();

也许这对某些同志有所帮助。

TinyMCE textarea和使用ajax发布表单

7 个答案: