我想使用class属性定位特定的iframe,以便使用CSS设置宽度。
iframe是像这样的谷歌地图嵌入:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&t=m&ll=52.8382,-2.327815&spn=4.646012,9.338379&z=6&output=embed"></iframe>
将它们复制并粘贴到tinyMCE的HTML源编辑器中。我需要将一个class属性应用于iframe,但在源代码编辑器上单击update时它会被条带化。
我已尝试在配置中使用valid_elements和extended_valid_elements但不适用于iframe [class]。
我正在运行3.4.3版。我下载了3.5.7,它似乎有同样的问题。这个行为也在tinyMCE网站(http://www.tinymce.com/tryit/full.php)上的演示中展示,尽管有关valid_elements的文档声明支持class属性(http://www.tinymce。 COM / wiki.php /配置: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'}
],
});
答案 0 :(得分:2)
在\ tinymce \ jscripts \ tiny_mce \ plugins \ media \ editor_plugin_src.js中,我通过从第12行的rootAttributes中删除“class”然后使用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中的问题,并已将其作为错误提交。
答案 1 :(得分:1)
您是否启用了“媒体”插件?我遇到了类似的问题,我想知道媒体插件是否干扰了HTML元素编辑器的正常操作。我尝试创建一个style_formats选项来操纵iframe,但没有任何运气。
答案 2 :(得分:0)
对于那些遇到媒体插件冲突但仍需要媒体插件的人,可以在tinymce初始化期间设置以下选项以消除冲突:
media_live_embeds: false
在tinymce v4.6.1中测试