2

我想使用类属性来定位特定的 iframe，以便使用 CSS 设置宽度。

iframe 是像这样嵌入的谷歌地图：

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&amp;t=m&amp;ll=52.8382,-2.327815&amp;spn=4.646012,9.338379&amp;z=6&amp;output=embed"></iframe>

它们被复制并粘贴到 tinyMCE 的 HTML 源代码编辑器中。我需要对 iframe 应用一个类属性，但是在源编辑器上单击更新时它会被删除。

我已经尝试在配置中使用 valid_elements 和 extended_valid_elements 但对于 iframe [class] 都不起作用。

我正在运行 3.4.3 版。我下载了 3.5.7，它似乎有同样的问题。尽管 valid_elements 的文档声明支持类属性 (http://www.tinymce. com/wiki.php/Configuration:valid_elements）。

这是完整的配置：

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

    // Theme options
    theme_advanced_buttons1 : "bold,italic,strikethrough,formatselect,styleselect,undo,redo,|,code,|,fullscreen,",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,blockquote,nonbreaking,|,charmap,media,|,link,unlink,anchor,image",
    theme_advanced_buttons3 : "",
    theme_advanced_buttons4 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    width : "500",
    height : "600",
    apply_source_formatting : true,
    remove_linebreaks: true,
    theme_advanced_blockformats : "p,blockquote,h1,h2,h3,h4,h5,h6",
    forced_root_block : false,
    plugin_preview_width : "1050",
    plugin_preview_height : "800",
    convert_urls : false,
    extended_valid_elements : "figure,figcaption",

    // Skin options
    skin : "o2k7",
    skin_variant : "silver",

    // Example content CSS (should be your site CSS)
    content_css : "/admin/includes/css/tinymce.css",

    // 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",

    // Style formats
    style_formats : [
        {title : 'Google Maps', selector : 'iframe', classes : 'google-maps-embed'},
        {title : 'Intro', selector : 'p', classes : 'intro'},
        {title : 'News Image', selector : 'img', classes : 'news-image'}
    ],
});
4

3 回答 3

2

在 \tinymce\jscripts\tiny_mce\plugins\media\editor_plugin_src.js 中，我通过从第 12 行的 rootAttributes 中删除“类”然后使用 jscompress.com 缩小并替换了 editor_plugin.js 的内容来解决此问题文件（在同一文件夹中）。

改变：

 var rootAttributes = tinymce.explode('id,name,width,height,style,align,class,hspace,vspace,bgcolor,type')

到：

 var rootAttributes = tinymce.explode('id,name,width,height,style,align,hspace,vspace,bgcolor,type')

它在 3.5.8 中仍然是一个问题，并已将其作为错误提交。

于 2012-11-28T03:45:45.270 回答
1

您是否启用了“媒体”插件？我看到了类似的问题，我想知道媒体插件是否干扰了编辑器对 HTML 元素的正常操作。我尝试创建一个 style_formats 选项来操作 iframe，但没有任何运气。

于 2012-11-09T16:19:16.813 回答
0

对于遇到媒体插件冲突，但仍需要媒体插件的用户，可以在tinymce初始化时设置以下选项来消除冲突：

media_live_embeds: false

在 tinymce v4.6.1 中测试

于 2017-12-21T08:45:17.333 回答