tinymce 将跨度插入列表标签

Posted

技术标签:

【中文标题】tinymce 将跨度插入列表标签【英文标题】:tinymce inserting span into list tags 【发布时间】:2013-01-12 20:19:39 【问题描述】:

我在 <p> 标签内的 tinymce 编辑器中有一些文本,没有别的,没有类,没有样式。当我选择文本并单击无序列表按钮时,<p> 成为一个列表。但是每个<li> 看起来都是这样的:

<li><span style="font-size: 12px; line-height: 1.5em;">Some text...</span></li>

那些样式来自哪里,哪个tinymce配置选项,哪个文件,哪个什么???我希望列表按钮只添加列表 html 标记,没有任何跨度和样式。

这是我的 tinymce 配置。配置是直接从 Chrome 检查器复制的(这就是嵌套道具中没有缩进的原因):(断点位于第 13547 行,在 tiny_mce_src.js 中的语句 tinymce.add(t); 处)

settings: Object
accessibility_focus: true
accessibility_warnings: false
add_form_submit_trigger: true
add_unload_trigger: true
apply_source_formatting: 0
bodyClass: "wysiwygeditor"
button_tile_map: true
content_css: "/sites/all/themes/adaptivetheme/at_core/css/at.layout.css,/sites/all/themes/atsl/css/global.base.css,/sites/all/themes/mytheme/css/global.styles.css
convert_fonts_to_spans: 1
convert_urls: false
delta_height: 0
delta_width: 0
dialog_type: "modal"
directionality: "ltr"
doctype: "<!DOCTYPE>"
document_base_url: "/"
entities: "quot,apos,amp,lt,gt,nbsp,iexcl"
entity_encoding: "named"
extended_valid_elements: ""
fix_table_elements: true
font_size_legacy_values: "xx-small,small,medium,large,x-large,xx-large,300%"
font_size_style_values: "xx-small,x-small,small,medium,large,x-large,xx-large"
forced_root_block: "p"
formats: Object
hidden_input: true
id: "edit-body-und-0-value"
ie7_compat: true
indent: "simple"
indent_after: "p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,ul,li,area,table,thead,tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist"
indent_before: "p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,ul,li,area,table,thead,tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist"
indentation: "30px"
inline_styles: true
language: "en"
mode: "none"
object_resizing: true
padd_empty_editor: true
paste_auto_cleanup_on_paste: 0
plugins: "style,-codemagic"
popup_css: ""
preformatted: 1
relative_urls: true
remove_linebreaks: 1
remove_script_host: true
render_ui: true
skin: "thebigreason"
strict_loading_mode: true
style_formats: Object
submit_patch: true
table_inline_editing: false
table_styles: Array[0]
theme: "advanced"
theme_advanced_blockformats: "p,h3,h4"
theme_advanced_buttons1: "bold,italic,underline,justifyleft,justifycenter,justifyright,separator,bullist,numlist,indent,outdent"
theme_advanced_buttons2: "link,image,media,charmap,blockquote,separator,formatselect,removeformat,styleselect,codemagic"
theme_advanced_buttons3: ""
theme_advanced_resize_horizontal: 0
theme_advanced_resizing: 1
theme_advanced_resizing_use_cookie: false
theme_advanced_statusbar_location: "bottom"
theme_advanced_toolbar_align: "left"
theme_advanced_toolbar_location: "top"
url_converter: function (url, name, elm) 
url_converter_scope: tinymce.create.Editor
validate: true
verify_html: true
visual: true
width: "100%"

“格式”是这样的:

formats: Object
aligncenter: Object
classes: "align-center"
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img"
__proto__: Object
alignleft: Object
classes: "align-left"
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img"
__proto__: Object
alignright: Object
classes: "align-right"
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img"
__proto__: Object
forecolor: Object
classes: "forecolor"
inline: "span"
styles: Object
__proto__: Object
hilitecolor: Object
classes: "hilitecolor"
inline: "span"
styles: Object
__proto__: Object
strikethrough: Object
inline: "line-through"
__proto__: Object
underline: Object
classes: "underline"
exact: true
inline: "span"
__proto__: Object
__proto__: Object

“样式格式”是这样的:

style_formats: Object
blink: Object
attributes: Object
class: "blink"
__proto__: Object
inline: "span"
title: "Blink"
__proto__: Object
__proto__: Object

【问题讨论】:

你能发布你的tinymce配置吗?在 tinymce 示例中创建没有跨度的无序列表应该可以工作:tinymce.com/tryit/full.php 我用这个信息更新了原始帖子。 哦,不。它没有像 style_formats 这样的嵌套对象...问题是,我不知道如何从 Drupal 转储最终配置,包括所有插件和自定义设置.. 我会尝试找出该怎么做它。 你可以使用这个建议来获取嵌套信息:***.com/questions/957537/… 我已经看到了,登录到控制台会带来同样的问题 - 嵌套对象没有展开。但我已经手动完成并在底部添加了格式和样式格式。 【参考方案1】:

与http://fiddle.tinymce.com 相比,我的 tinymce 配置缺少“插件”设置 当我添加“插件”设置时,tinymce 不再将带有样式的跨度插入列表。

一些额外的信息让我找到了解决方案:

tiny_mce_src.js 的第 14212 行在我的网站上调试时返回 false(在创建列表时) - 它在 tinymce fiddle 上返回 true。 (if (o = t.execCommands[cmd]) .....)

在我的网站 tinymce 上不知何故执行了第 15063 行(execNativeCommand 函数),而在 tinymce fiddle 上却没有(可能是缺少插件的结果)

原生 Chrome execCommand 在插入样式跨度时遇到问题,如下所述:http://help.dottoro.com/ljcvtcaw.php 我还创建了一个小提琴来确认它:http://jsfiddle.net/fUsmx/(关闭并重新打开检查器以查看结果)

【讨论】:

出现“lists”插件规范了这种行为。【参考方案2】:

看来我找到了解决您问题的方法:http://martinsikora.com/how-to-make-tinymce-to-output-clean-html

关键在于使用extended_valid_elements。 这将删除所有没有类属性的跨度

extended_valid_elements : "span[!class]"

【讨论】:

我以前见过这个解决方案。但是,我(和我的用户!)使用不带类的跨度,只使用特殊格式的样式。所以据我了解,它也会删除这些跨度 - 不能这样做。 Tinymce 一定是从某个地方汲取了这些风格。 sry,我没有其他解决方案

以上是关于tinymce 将跨度插入列表标签的主要内容,如果未能解决你的问题,请参考以下文章

为啥 TinyMCE 显示 HTML 标签?

Tinymce,我的 textarea 编辑器中的 textarea

在光标所在的 TinyMCE 编辑器中插入文本

更改 windowManager TinyMCE 上的按钮配置

Tinymce wiris数学编辑

Plone 4.3b1 中的 TinyMCE 1.3b8 链接?