TinyMCE外层包裹选定的元素
TinyMCE outer wrap selected elements
我有一个问题,让TinyMCE包装选择的内容。
第一个style_format simple将类添加到所选元素中,这很好。
问题是第二个style_format我想让它在
里面包裹选定的元素。在
<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>
后<p class="accordion_top">test text</p>
<div class="accordion_middle">
<div class="accordion_middle-wrapper">
<p>test text</p>
<p>test text</p>
<p>test text</p>
</div>
</div>
使用jQuery版本我有下面,问题的代码是底部样式格式
$("#tinymce").tinymce({
script_url : HOME+"/webapp/shared/javascript/tiny_mce/tiny_mce.js",
mode : "textareas",
theme : "advanced",
skin : "cirkuit",
width: "726",
plugins : "advlist,insertdatetime,paste,print,searchreplace,spellchecker,table,wordcount,visualchars,xhtmlxtras,template,codemagic",
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,undo,redo,|,hr,acronym,charmap,blockquote,replace,|,insertdate,inserttime,|,cleanup,removeformat,codemagic,",
theme_advanced_buttons2 : "wrap_div,styleselect,formatselect,|,bold,italic,underline,bullist,numlist,|,table,|,link,unlink,insertimage,spellchecker|mybutton",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
//theme_advanced_buttons1 : "|,,table,pasteword",
theme_advanced_blockformats : "p,h2,h3,h4,h5,h6",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
forced_root_block : "p",
force_br_newlines : false,
force_p_newlines : true,
valid_elements : "span[class|id],br[class|id],a[href|target|title],img[src|id|width|height|class|alt],i,"+
"li[class|id],ul[class|id],ol[class|id],p[class|id],"+
"table[class|id],th[class|id],tr[class|id],td[class|id],thead,tbody,"+
"h1[class|id],h2[class|id],h3[class|id],h4[class|id],h5[class|id],h6[class|id],strong[class|id],"+
"div[class|id]",
content_css : TEMPLATE_HOME+"/css/tinymce.css?" + new Date().getTime(),
plugin_insertdate_dateFormat : "%d/%m/%Y",
plugin_insertdate_timeFormat : "%H:%M",
paste_auto_cleanup_on_paste : true,
convert_urls: false,
relative_urls: false,
// Style formats
style_formats : [
{title : 'Accorion Top', selector : 'p,h2,h3,h4,h5,h6', classes : 'accordion_top'},
{title : 'Accorion Middle', block : 'div', classes : 'accordion_middle'}
],
setup: function (ed) {
// Create an wrap DIV button
ed.addButton ('wrap_div', {
'title' : 'Wrap Accordion',
'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
'onclick' : function () {
var text = ed.selection.getContent({ 'format' : 'text' });
if (text) {
tinyInsert('<div class="accordion_middle"><div class="accordion_middle-wrapper">' + text + '</div></div>');
}
}
});
}
});
使用style插件,需要对tinymce核心(Formatter.js)进行大的修改。我会写一个自己的函数放在自己的插件。要实现你的目标,你不需要那么多代码。
EDIT:你几乎是对的。首先尝试使用span,以确保这在编辑器中有效。
setup: function (ed) {
// Create an wrap DIV button
ed.addButton ('wrap_div', {
'title' : 'Wrap Accordion',
'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
'onclick' : function () {
var text = ed.selection.getContent({ 'format' : 'text' });
if (text && text.length > 0) {
ed.execCommand('mceInsertContent', false, '<span class="accordion_middle"><span class="accordion_middle-wrapper">' + text + '</span></span>');
}
}
});
}
下一步将是用div替换span,并确保您的tinymce设置允许嵌套div标记(参见valid_children设置)。
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- Wordpress TinyMCE在从文本切换到视觉时,如果锚标记包裹块元素,则会删除锚标记
- 包裹在较高的元素上
- 根据其同级元素包裹元素
- 如何动态地将元素包裹在身体内部
- 如何使滑块在元素结束时继续循环(如何包裹滑块)
- 包裹成对的元素
- 在前一个元素jQuery的锚中包裹图像
- 根据父元素和/或类,用新元素包裹元素
- 用ng-if包裹子元素
- Jquery在表单中包裹一组特定的元素
- TinyMCE外层包裹选定的元素
- jquery点击事件只有当被包裹的元素被点击
- jQuery在很多元素周围包裹元素
- 在一个循环中包裹li元素
- JQuery收集一组元素,将每个元素展开,然后将所有元素包裹在新元素中