允许 TinyMCE 中的自定义标签与 indexhibit 集成

发布于 2024-11-08 21:40:32 字数 693 浏览 0 评论 0原文

我正在尝试允许将一些自定义标签输入到 TinyMCE 中。标签是

<plug:plugin_name />

然而这变成了

<plug:plugin_name></plug:plugin_name>

我即将编写一个正则表达式来处理这个问题，因为我必须完成工作，我真的不想这样做，但它会解决我的问题。

我已经尝试了许多初始化选项：

extended_valid_elements : "plug.plugin_name[*]",
custom_elements: "plug.plugin_name[*]",
verify_html : false, **//This ment that the tag wasn't ouright removed**
selfclosetags : \" />\", //some plugin I found, didn't seem to work
closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

还有其他人肯定能让它与最新版本的 TinyMCE 一起使用吗？

另外，另一个问题是，在我用正则表达式修复它之后，编辑器会删除标签！

原文

I'm trying to allow some custom tags to be entered into TinyMCE. The tag is

<plug:plugin_name />

However this is turned into

<plug:plugin_name></plug:plugin_name>

I'm about to write a regex to deal with this as I have to get the job done, I'd really rather not, but it will fix my issue.

I've tried many of the init options:

extended_valid_elements : "plug.plugin_name[*]",
custom_elements: "plug.plugin_name[*]",
verify_html : false, **//This ment that the tag wasn't ouright removed**
selfclosetags : \" />\", //some plugin I found, didn't seem to work
closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

Anyone else definitely got this to work with a recent version of TinyMCE?

Also, another problem will be the editor will strip away the tag, after I have fixed it with the regex!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅唱ヾ落雨殇 2024-11-15 21:40:32

您只需将其添加到短结束元素列表中即可：

extended_valid_elements : "plug:plugin_name[*]",
custom_elements: "~plug:plugin_name[*]",
short_ended_elements: 'area base basefont br col frame hr img input isindex link meta param embed source wbr track plug:plugin_name'

这是一个用于演示的 fiddle 。

You just need to add it to the list of short ended elements:

extended_valid_elements : "plug:plugin_name[*]",
custom_elements: "~plug:plugin_name[*]",
short_ended_elements: 'area base basefont br col frame hr img input isindex link meta param embed source wbr track plug:plugin_name'

Here's a fiddle to demonstrate.

回复收藏 0 原文

晨与橙与城 2024-11-15 21:40:32

而不是：

closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

这有效吗？

closed : /^(br|hr|input|meta|img|link|param|area|plug)$/,

请注意最后一项“plug”不带 : 修饰符。

Instead of:

closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

Does this work?

closed : /^(br|hr|input|meta|img|link|param|area|plug)$/,

Note the last item "plug" without the : modifier.

回复收藏 0 原文

寄风 2024-11-15 21:40:32

您尝试过这个选项吗？

valid_elements: "a,br,span,plug:plugin_name,another:tag"

Have you tried this option?

valid_elements: "a,br,span,plug:plugin_name,another:tag"

回复收藏 0 原文

浸婚纱 2024-11-15 21:40:32

首先让我们为您的 Tinymce 4 编辑器创建一个自定义插件。然后为此插件添加一个菜单项：

 tinymce.PluginManager.add('YOUR_CUSTOM_PLUGIN_NAME_HERE', function(editor, url){
           //添加第一个菜单项
    editor.addMenuItem('YOUR_MENU_ITEM1_CUSTOM_NAME_HERE', {

    text: '菜单项 1',
    上下文：'YOUR_CUSTOM_DROP_DOWN_MENU_NAME'， 
    onclick: 函数() {
       //当用户单击此处的此菜单时，奇迹就会发生...
    } });

您已经完成了自定义插件和自定义菜单项的创建，让我们将其实际添加到 Tinymce 4 编辑器中。这将在tinymce.init方法中完成：

tinymce.init({
        选择器：“文本区域”，
        插件：“YOUR_CUSTOM_PLUGIN_NAME_HERE”，
        工具栏：“插入文件撤消重做|样式选择|粗体斜体|alignleftaligncenteralignrightalignjustify|bullistnumlistoutdent缩进|链接图像”，

    //这就是您获取自定义菜单的方式，如上图所示
            菜单 ： {
                 YOUR_CUSTOM_DROP_DOWN_MENU_NAME：{

                     title: '在这里随意命名',
                     项目：“YOUR_MENU_ITEM1_CUSTOM_NAME_HERE YOUR_MENU_ITEM2_CUSTOM_NAME_HERE YOUR_MENU_ITEM3_CUSTOM_NAME_HERE”
                 }
             },

             菜单栏：“YOUR_CUSTOM_DROP_DOWN_MENU_NAME” 
    });

    });

First lets create a custom plugin for your Tinymce 4 editor.and then add a menu item for this plugin:

 tinymce.PluginManager.add('YOUR_CUSTOM_PLUGIN_NAME_HERE', function(editor, url){
           //add first menu item
    editor.addMenuItem('YOUR_MENU_ITEM1_CUSTOM_NAME_HERE', {

    text: 'Menu Item 1',
    context: 'YOUR_CUSTOM_DROP_DOWN_MENU_NAME', 
    onclick: function() {
       //make the magic happen when the user click this menu here...
    } });

you are done creating your custom plugin and custom menu items, lets actually add it to the Tinymce 4 editor. This will be done in the tinymce.init method:

tinymce.init({
        selector: "textarea",
        plugins: "YOUR_CUSTOM_PLUGIN_NAME_HERE",
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",

    //this is how you will get your custom menu like in the above image
            menu : {
                 YOUR_CUSTOM_DROP_DOWN_MENU_NAME: {

                     title: 'Name it whatever you like here',
                     items: 'YOUR_MENU_ITEM1_CUSTOM_NAME_HERE YOUR_MENU_ITEM2_CUSTOM_NAME_HERE YOUR_MENU_ITEM3_CUSTOM_NAME_HERE'
                 }
             },

             menubar: 'YOUR_CUSTOM_DROP_DOWN_MENU_NAME' 
    });

    });

回复收藏 0 原文