微型MCE添加自定义HTML标签 [英] Tiny MCE adding custom HTML tags
问题描述
我正在将Tiny 4.3.3用于MODx 我需要添加
I am using Tiny 4.3.3 for MODx I need to add a
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
我不介意是一个额外的菜单项还是在段落"下拉菜单中.我只是想减少耗时的工作.
I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.
我已经尝试过 http://alexzag. blogspot.co.uk/2009/12/custom-tags-in-tinymce.html ，但是以某种方式，这是行不通的.
I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.
有人可以给我指出一个好的教程吗，或者告诉我如何在下拉菜单中添加一个图标或名称，以自动创建具有正确类的p和em标签? 谢谢
Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please? Thanks
推荐答案
自从提出问题以来已经有一段时间了，但是由于我目前做的完全一样，我认为我在此问题上分享了自己的发现和解决方案. :)
It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)
我正在为工作中的测试项目扩展TinyMCE，我们的解决方案需要自定义标签-在其中一些中，用户应该只能输入一行，在另一些中(如您的 em )很多文字.
I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.
要完成所需的步骤，需要完成的步骤:
Steps to be done, in order to achieve the desired solution:
-
使用两个配置关键字 extended_valid_elements 和 custom_elements :
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
为开始和结束标记创建两个图像.我为示例 emstart.png 和 emend.png 命名了我的名字.
create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.
为您的自定义元素创建自定义CSS样式，并将其放入自定义CSS文件(在TinyMCE配置中指定的文件，在我的情况下为 editor.css ):
create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case editor.css):
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
编写一个自定义插件，该插件将输入新标签并将其放在plugins目录中.我叫我的 customem :
write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:
插件代码:
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
最后一步是将自定义插件加载到编辑器中(使用 plugin 和 toolbar 配置选项)并享受结果:
The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
编辑器现在看起来像这样:
The editor now looks like this:
以及示例中的来源:
这篇关于微型MCE添加自定义HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
