【问题标题】:TinyMCE Rich text editor does not allow multiple text editorsTinyMCE 富文本编辑器不允许多个文本编辑器
【发布时间】:2015-01-11 12:19:52
【问题描述】:

我在我的 MVC 应用程序中使用 TinyMCE 富文本编辑器。我正在使用 tinymce.js 和 tinymce.min.js。 我面临的问题是我无法在我的应用程序中显示多个富文本编辑器。 如果用户选择了一个编辑器,那么它可以正常工作,但如果进行了多个选择,那么编辑器只显示第一个,其余的显示为普通文本区域。

请帮忙。

我的代码片段:

包含 TinyMCE 的捆绑包:

@using System.Web.Optimization
@Scripts.Render("~/bundles/tinymce")   

全球.asax:

 public static void RegisterBundles(BundleCollection bundles)
        {

            //Creating bundle for your js files
            bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
            "~/Scripts/tinymce/tiny_mce.js"));
        }

没有浏览器脚本错误。出现 JSScript 错误说: “对象不支持此属性或方法”错误”

Tiny_Mcefull.cshtml 现在:

<script type="text/javascript">

    (function(){ 

        tinyMCE.init({

            // General options
            mode: "exact",
            elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
            theme: "advanced",
            height: "500",
            width: "790",
            verify_html : false,
            plugins : "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",

            // Theme options
            theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : false,

            // Example content CSS (should be your site CSS)
            //content_css : "css/content.css",
            content_css : '@Url.Content("~/Scripts/tinymce/css/content.css")',
            convert_urls : false,

            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "lists/template_list.js",
            external_link_list_url : "lists/link_list.js",
            external_image_list_url : "lists/image_list.js",
            media_external_list_url : "lists/media_list.js"

        });

    })();

</script>

【问题讨论】:

  • 您能否提供您尝试初始化 2 tinyMCE 的 View 代码?一旦我遇到这个问题。原因是我尝试启动 Tiny MCE 两次。
  • 嗨,teo,你想让我为你提供 tinymce_full.cshtml 代码吗?
  • 你从 Nuget 得到包并且没有改变它?
  • 是的,我没有改变任何东西

标签: asp.net-mvc tinymce rich-text-editor


【解决方案1】:

好吧,在你的布局中:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/tinymce")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqgrid")
</head>

现在不能说为什么,但我记得在 Jquery 之后插入 TinyMCE 很重要。 TinyMCE 模板:

<script type="text/javascript">

    (function(){ 

        tinyMCE.init({

            // General options
            mode: "exact",
            elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
            theme: "advanced",
            height: "500",
            width: "790",
            verify_html : false,
            plugins : "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",

            // Theme options
            theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : false,

            // Example content CSS (should be your site CSS)
            //content_css : "css/content.css",
            content_css : "@Url.Content("~/Scripts/tinymce/css/content.css")",
            convert_urls : false,

            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "lists/template_list.js",
            external_link_list_url : "lists/link_list.js",
            external_image_list_url : "lists/image_list.js",
            media_external_list_url : "lists/media_list.js",

        });

    })();

</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

希望这对你有用

【讨论】:

  • 非常感谢Teo,让我试试你提供的答案。
  • 我仍然无法获得多个编辑器。我收到一个 JScript 错误,指出对象不支持此属性,并在获取主题时出错。 :(
  • 您能否提供您尝试创建的视图代码?如果存在错误,浏览器会显示错误吗?
  • 我在问题中添加了sn-ps
  • 抱歉,我还是看不到全图。现在哪个包包含 TinyMCE 脚本? tinymce_full.cshtml 改完后的样子?您可以发布 Brouser 脚本完整错误吗?
猜你喜欢
  • 2011-01-06
  • 2011-12-25
  • 1970-01-01
  • 2011-06-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多