我在Modal中遇到了一个tinyMCE的问题,每当我输入单词并按下输入预期的输出时,它就会有一个新行。但遗憾的是,我网站上显示的输出是“这是一个文本
这是第二个文本”。
这是我的HTML:
<div id="experience">
@using (Ajax.BeginForm("AddExperiences",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.ReplaceWith,
UpdateTargetId = "experience",
OnSuccess = "ExperiencesAjaxSuccess",
OnBegin = "tinymce.execCommand('mceRemoveEditor', true, 'AboutMe');"
}))
{
@Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Experience</h4>
</div>
<div id="addExperience" class="modal-body">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.UserID)
@Html.HiddenFor(model => model.FirstName)
@Html.HiddenFor(model => model.LastName)
<div class="form-group">
<div class="col-md-12">
@Html.TextAreaFor(model => model.Description, new { @class = "form-control user-form", placeholder = @Html.DisplayNameFor(m => m.AboutMe) })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="text-right">
<div><span>Characters left:</span> <span id="chars_left"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
}
这是我的Javascript
<script>
var max_chars = 4000; //max characters
var max_for_html = 4000; //max characters for html tags
var allowed_keys = [8, 13, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 46];
var chars_without_html = 0;
function alarmChars() {
if (chars_without_html > (max_chars - 25)) {
$('#chars_left').css('color', 'red');
} else {
$('#chars_left').css('color', 'gray');
}
}
tinymce.init({
selector: '#Description',
menubar: false,
theme: "modern",
statusbar: false,
plugins: "importcss",
height: 130,
setup: function (ed) {
ed.on("KeyDown", function (ed, evt) {
chars_without_html = $.trim(tinyMCE.activeEditor.getContent().replace(/(<([^>]+)>)/ig, "")).length;
chars_with_html = tinyMCE.activeEditor.getContent().length;
var key = ed.keyCode;
$('#chars_left').html(max_chars - chars_without_html);
if (allowed_keys.indexOf(key) != -1) {
alarmChars();
return;
}
if (chars_with_html > (max_chars + max_for_html)) {
ed.stopPropagation();
ed.preventDefault();
} else if (chars_without_html > max_chars - 1 && key != 8 && key != 46) {
alert('Characters limit!');
ed.stopPropagation();
ed.preventDefault();
}
alarmChars();
});
},
toolbar: "bold italic underline | alignleft aligncenter alignright alignjustify | forecolor backcolor | bullist numlist | charmap",
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' }
]
});
chars_without_html = $.trim($("#Description").text().replace(/(<([^>]+)>)/ig, "")).length;
$('#chars_left').html(max_chars - chars_without_html);
alarmChars();
我提供了一张图片来完全理解我的问题
这是输入
这是输出
请帮助我跟踪开发