javascript - 在 asp.net MVC 中实现搜索与tinyMCE编辑器发生冲突

Question

我实现了搜索表单，我可以在其上搜索一些问题以在 asp.net MVC 中查看其答案，我的搜索功能工作完全正常，我使用 TinyMCE编辑器编辑我的问题。

这是我的模型:

  public class Question
    {

        public virtual int Id { get; set; }
        public virtual int CategoryId { get; set; }
        public virtual string Qu { get; set; }

        [AllowHtml]
        [UIHint("tinymce_full_compressed")]
        public virtual string Ans { get; set; }
        public virtual Category Category { get; set; }


    } 

例如，当我输入 enter 时在句子之间，在我的编辑中，它创建 </br>标记并保存在我的数据库中。在文本框上搜索后，在结果而不是渲染标签中，它显示 </br>标签。像这样的test<br />test并在浏览器中显示它而不是两个 test两个不同行中的单词没有 </br>标签。似乎无法翻译编辑器添加到字符串中的标签。

。这张图片显示了发生的情况

这是我的 Controller :

  public ActionResult Help(string searchString)
    {
        searchString = Request["search"];
        var repsearch = new RepositorySearch();
        List<Question> question = new List<Question>();
        if (!string.IsNullOrEmpty(searchString))
        {
            question = repsearch.GetAllQuestion().Where(n => n.Qu.ToLower().Contains(searchString.ToLower())).ToList();
        }
        return Request.IsAjaxRequest() ? (ActionResult)PartialView("_QuestionPartial", question) : View(question);
    }

我认为问题与此有关QuestionPartial 这是我的QuestionPartial

  @using iranhoidaytour_com.Models
  @if (Model.Count > 0)
{
<ul id="hs">
    @foreach (Question q in Model)
    {
        <li class="">
            <h5 class="quos">@q.Qu</h5>
            <p class="answ">@q.Ans</p>
        </li>

    }
  </ul>
 }

这是我的TinyMCE设置:

      <script>
   tinymce.init({
       selector: '#mytextarea',
  height: 500,
  theme: 'modern',
  force_br_newlines: false,
  force_p_newlines: false,
  forced_root_block: '',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
  ],
  toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'
  ]
 });

    </script>

这是我的观点

<div class="row" id="searchhelp">

    <div class="container">
        @using (Html.BeginForm("Help", "Home", FormMethod.Get, new { @id = "FormSearch", @class = "form-group container" }))
        {

            @Html.TextBox("search", null, new { @class = "form-control col-md-10", @placeholder = "What Is Your Question?Enter Keyword!" })
    <button type="submit" class="left " id="btn-search">
        <i class="fa fa-search" aria-hidden="true"></i>
    </button>
        }
    </div>

</div>




<div id="helpicons" class="container">


    <div id="tagsname">

        <div id="intagsname">
            @Html.Partial("_QuestionPartial", Model)
            <div class="ajaxloader1">
                <img class=""  src="~/Content/img/ajax-loader (4).gif" alt="Alternate Text" />
            </div>
        </div>
    </div>



</div>

感谢任何帮助。谢谢

Answer 1

这是您必须执行的操作才能返回非 HTML 编码的标记。:

<h5 class="quos">@q.Qu</h5>
   <p class="answ">@Html.Raw(q.Ans)</p>