TinyMCE 4没有正确合并样式
TinyMCE 4 not merging styles properly
我已经看了所有当前的配置选项,但我仍然不能弄清楚。我只是希望样式标签被附加到选定的元素,而不是有一个额外的span生成。所以这:
<p>Hello World!</p>
应该变成这样:
<p style="font-size: 18px;">Hello World!</p>
但TinyMCE 4生成:
<p><span style="font-size: 18px;">Hello World!</span></p>
在TinyMCE <3.4称为merge_styles_invalid_parents
,这使我相信跨度仅在父节点在此列表中时生成。为什么它们现在似乎是为所有样式生成的?这是默认的操作,还是可能是我的设置与它有关?下面是我所有编辑器的默认值列表,以防万一它被证明是有用的:
var defaults = {
plugins: "-fullscreen -code -paste -image -link -textcolor -anchor -table -hr -autoresize -contextmenu -upload -commonlinks",
link_title: false,
menubar: false,
statusbar: false,
skin_url: '../tinymce/skins/lightgray',
contextmenu: "link inserttable | cell row column deletetable",
content_css: "css, /tinymce/content-default.css?v=1",
width: '100%',
height: 20,
autoresize_bottom_margin: 'auto',
autoresize_min_height: 20,
// Font families
font_formats: "Arial = Arial, Helvetica Neue, Helvetica, sans-serif;" + // cssfontstack.com
"Courier New = Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;" +
"Georgia = Georgia, Times, Times New Roman, serif;" +
"Lucida Grande = Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;" +
"Tahoma = Tahoma, Verdana, Segoe, sans-serif;" +
"Times New Roman = TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;" +
"Trebuchet MS = Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;" +
"Verdana = Verdana, Geneva, sans-serif", // No semi-colon on last, or TinyMCE errors out
// Formats
style_formats: [
{title: 'Headers', items: [
{title: 'Heading 1', block: 'h1'},
{title: 'Heading 2', block: 'h2'},
{title: 'Heading 3', block: 'h3'},
{title: 'Heading 4', block: 'h4'}
]},
{title: 'Paragraph', block: 'p'},
{title: 'Buttons', items: [
{title: 'Default', selector: 'a', classes: 'btn btn-user'},
{title: 'Blue', selector: 'a', classes: 'btn btn-primary'},
{title: 'Yellow', selector: 'a', classes: 'btn btn-warning'},
{title: 'Red', selector: 'a', classes: 'btn btn-danger'},
{title: 'Lt. Blue', selector: 'a', classes: 'btn btn-info'}
]},
{title: 'Vertical Align', items: [
{title: 'Top', selector: '*', styles: {'vertical-align': 'top'}},
{title: 'Middle', selector: '*', styles: {'vertical-align': 'middle'}},
{title: 'Bottom', selector: '*', styles: {'vertical-align': 'bottom'}},
{title: 'Text-Top', selector: '*', styles: {'vertical-align': 'text-top'}},
{title: 'Text-Bottom', selector: '*', styles: {'vertical-align': 'text-bottom'}}
]},
{title: 'Line Height', items: [
{title: '1.0', selector: '*', styles: {'line-height': '1'}},
{title: '1.2', selector: '*', styles: {'line-height': '1.2'}},
{title: '1.4', selector: '*', styles: {'line-height': '1.4'}},
{title: '1.5', selector: '*', styles: {'line-height': '1.5'}},
{title: '1.6', selector: '*', styles: {'line-height': '1.6'}},
{title: '1.8', selector: '*', styles: {'line-height': '1.8'}},
{title: '2.0', selector: '*', styles: {'line-height': '2'}}
]}
],
// Element Whitelist:
// - Tag will be removed if empty
// = Attribute will get the set default
// + Tag will be simplified if empty
// @ These rules apply to all tags
// [rule|rule2] Attributes allowed on this tag
// [rule<one?two] Attribute can have only listed values
// More info: // tinymce.com/wiki.php/Configuration:valid_elements
valid_elements: "-@[style|class]," + // Global
"p,div,span,h1,h2,h3,h4,h5,h6," + // Core
"strong/b,em/i,sup,sub," + // Mod
"a[href|name|!target|target=_top|target<_blank?_top?_self]," + // Links
"+hr,+img[alt|title|src],br," + // Other
"table,thead,tbody,tr,th,td[colspan|rowspan]," + // Tables
"ul,ol,li", // Lists
// Font Sizes
fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 24px 30px 36px 48px 72px",
// Toolbars
toolbar1: 'upload code | cut copy paste | link unlink anchor | table hr | bullist numlist | indent outdent | alignleft aligncenter alignright alignjustify', // tinymce.com/wiki.php/Configuration:toolbar
toolbar2: 'bold italic underline | forecolor backcolor styleselect removeformat | fontselect fontsizeselect | rules facts',
}
任何帮助都会很感激。提前感谢。
试试这个:它会在没有class
的项上移除span<script type="text/javascript">
tinymce.init({
extended_valid_elements : "span[!class]"
});
</script>
更新:
尝试选择段落并点击删除格式
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- JQuery合并了keyup和focusout两个函数
- 将样式表插入iframe
- 跟踪在页面加载时应用内联样式的JavaScript
- 如果文本字段为空,则使用JavaScript应用CSS样式
- JSON重构(合并内容)与javascript
- 定义完全独立的样式信息
- W3C循环样式的JavaScript
- jQuery/JavaScript在线公文包表单-打印样式表
- 使用递归、Ramda.js和无点样式重构字符串的getPermutations()
- FF和Chromium中CSS样式按钮的外观差异
- Javascript-根据赋值顺序,按键合并对象数组
- 如何首先设置样式<td>表中包含在窗体中的元素
- javascript问题正文样式
- 压缩脚本和样式,并将所有js和样式引用合并为单个引用,以优化网站性能
- 在浏览器中合并并保存加载的样式表到一个文件中
- 如何将两个方法合并为一个(.style + .getcomputed 样式)
- 浏览HTMLElement中的每个CSS值,合并CSS样式
- TinyMCE 4没有正确合并样式
- Laravel酏剂不合并样式表的变化