tinyMCE ajax保存数据

tinyMCE ajax to save data

我已经看到许多关于tinyMCE和ajax的帖子，但是我无法使它正常工作-不是通过触发tinyMCE.triggerSave();而不是通过覆盖Submit而不是通过触发tinyMCE.get("elm1").save();

这是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$('#ss').submit(function (e) {
e.preventDefault();
var ed = tinyMCE.get('elm1');
var data = ed.getContent()

// tinyMCE.triggerSave();
// tinyMCE.get("elm1").save();

// var data = $(this).serialize();
console.log(data);
$.ajax({
type: 'POST',
cache: false,
url: 'xtras/ssheetsave.php',
data: data,
success: function(){
console.log("Updates have successfully been ajaxed");
}
});
return false;
});

形式：

1
2
3
4
5
6
7
8

和tinyMCE：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

tinyMCE.init({
// General options
mode :"textareas",
theme :"advanced",
plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
// save_onsavecallback :"ajaxSave",

// Theme options
theme_advanced_buttons1 :"save,cancel,|,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
theme_advanced_buttons2 :"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,cleanup,help,code,tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,advhr",
theme_advanced_toolbar_location :"top",
theme_advanced_toolbar_align :"left",
theme_advanced_statusbar_location :"bottom",
theme_advanced_resizing : true,

// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],

// Replace values for the template plugin
template_replace_values : {
username :"Some User",
staffid :"991234"
}
});

有人可以帮我解决这个问题吗？ -基本上我什至没有在控制台console.log(data);

中获取数据

您需要在原始文本区域中使用"名称"值，并使用" getContent()"获取内容。

这直接来自他们的文档。

1
2
3
4
5
6
7
8
9
10
11
12
13

tinymce.init({
selector:"textarea",
plugins:"save",
toolbar:"save",
save_enablewhendirty: true,
save_onsavecallback: function() {
// USE THIS IN YOUR AJAX CALL
alert(tinyMCE.get('ajax_text').getContent());
}
});

<textarea name="ajax_text" /></textarea>

基本上，我通过引入on()侦听器使其工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).on('submit','#ss',function (e) {
e.preventDefault();
var ed = tinyMCE.get('elm1');
var data = ed.getContent();
var cat_id = $('#cat_id').val();

console.log(cat_id);
$.ajax({
type: 'GET',
cache: false,
url: 'xtras/ssheetsave.php',
data: 'data=' + escape(data) + '&cat_id=' + cat_id,
success: function(){
$("#ss").remove();
$("#output").html(data);
}
});
return false;
});

这是一个完整的工作示例，但js略有不同：

HTML：

1
2
3
4
5

注意：就我而言，仅设置name=属性是不够的。我必须同时设置name和id属性，并分配相同的值(如上所示)。

JS / jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$(document).ready(function(){

tinymce.init({
selector: '#prjOView',
theme: 'modern',
width: 600,
height: 300,
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor'
],
content_css: 'css/content.css',
toolbar: 'insertfile undo redo | styleselect | sizeselect | bold italic | fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
}); //tinyMCE

$('#btnProjSave').click(function(){
var mi = tinymce.get('prjOView').getContent();
alert(mi);

//The data is now in var `mi`, use AJAX to save via PHP
$.ajax({
type: 'post',
url: 'path_to_your_php_file.php',
data: 'tinydata=' +mi,
success:function(){
}
});
});

}); //END document.ready

文件path_to_your_php_file.php：

1
2
3

<?php
var $tinydata = $_POST['tinydata'];
//the data is now in the above var. Do what you need to do.

有关如何使用AJAX的一些基本示例，请参见这篇文章

您需要使用" elm1"而不是" content"

1	var ed = tinyMCE.get('elm1');