javascript - Permitir etiquetas personalizadas en TinyMCE para la integración con indexhibit

editor rich-text-editor

Question

Estoy intentando permitir que se ingresen algunas etiquetas personalizadas en TinyMCE. La etiqueta es

<plug:plugin_name />

Sin embargo esto se convierte en

<plug:plugin_name></plug:plugin_name>

Estoy a punto de escribir una expresión regular para lidiar con esto, ya que tengo que hacer el trabajo, realmente preferiría no hacerlo, pero solucionará mi problema.

He probado muchas de las opciones de inicio:

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)$/,

¿Alguien más definitivamente consiguió que esto funcionara con una versión reciente de TinyMCE?

Además, otro problema será que el editor eliminará la etiqueta, ¡una vez que la haya arreglado con la expresión regular!

Answer 1

1. Primero, creamos un complemento personalizado para tu editor de Tinymce 4. y luego agregamos un elemento de menú para este complemento:

    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...
       } });

   Ya ha terminado de crear su complemento personalizado y los elementos de menú personalizados, en realidad lo agregamos al editor de Tinymce 4. Esto se hará en el método tinymce.init:

   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'' 
       });
   
       });

Answer 2

¿Has probado esta opción?

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

Answer 3

En lugar de:

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

¿Esto funciona?

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

Tenga en cuenta el último elemento "plug" sin el: modificador.

Answer 4

Puede utilizar el método de codificación como sin procesar para cualquier tipo de datos.

tinyMCE.init({
   encoding : "raw"
})

Answer 5

Solo necesita agregarlo a la lista de elementos de final corto:

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''

Aquí hay un fiddle para demostrar.