TinyMCE将文本输出转换为Html Raw

时间:2017-02-08 07:03:43

标签: jquery asp.net-mvc razor asp.net-mvc-5 tinymce

我在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">&times;</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();

我提供了一张图片来完全理解我的问题

这是输入

input

这是输出

output

请帮助我跟踪开发

0 个答案:

没有答案