ambassify / tinymce-variable Goto Github PK

I've configured it as an external plugin but it never shows in my toolbar

external_plugins: {
'variables': '/plugins/variables/plugin.min.js',
},
toolbar:
'variables',

I'm using the react wrapper provided by Tiny and have created a plugins directory on the public folder. I get no loading errors but never see the plugin.

Any help appreciated.

When the last item in the editor is a variable you can't do space to start typing behind that variable.

Add way so a developer can add custom popup to variables. This can be used for all sorts of functionality:

• fallback content
• more information about a variable

Instead of passing a mapper object it should also be possible to pass a callback function. Because that way we could do the mapping based on for example the same object that's being used to fill up the insert variable dropdown.

When selecting text that includes a variable and set it bold you get the following HTML:

<strong>This is a </strong>{community_name}<strong> test</strong>

The result should look like this:

<strong>This is a {community_name} test</strong>

I recently found Your plugin, and it does exactly what I need.
There is one thing missing. Recent version of TinyMCE support Sidebar.
Maybe Your plugin can use this API to show list of available variables that can be inserted? This can be a simple list with names, when You click on variable it would get inserted in cursor position.
This would speed thing even more.

Submit the plugin to the plugin directory: https://www.tinymce.com/docs/plugins/

http://archive.tinymce.com/forum/viewforum.php?id=7

In Firefox it's not possible to delete a variable using backspace.

After entering any variable, the cursor location moves to start of the editor. I am giving the function from source code where I believe the issue might stem from:
function stringToHTML()
{
var nodeList = [],
nodeValue,
node,
div;

    // find nodes that contain a string variable
    tinymce.walk(editor.getBody(), function(n) {
        if (n.nodeType == 3 && n.nodeValue && stringVariableRegex.test(n.nodeValue)) {
            nodeList.push(n);
        }
    }, 'childNodes');

    // loop over all nodes that contain a string variable
    for (var i = 0; i < nodeList.length; i++) {
        nodeValue = nodeList[i].nodeValue.replace(stringVariableRegex, createHTMLVariable);
        div = editor.dom.create('div', null, nodeValue);
        while ((node = div.lastChild)) {
            editor.dom.insertAfter(node, nodeList[i]);

            if(isVariable(node)) {
                var next = node.nextSibling;
                editor.selection.setCursorLocation(next);
            }
        }

        editor.dom.remove(nodeList[i]);
    }
}

Specifically I believe the issue arises in this part:
if(isVariable(node)) {
var next = node.nextSibling;
editor.selection.setCursorLocation(next);
}
The next is null which in turn leads to setting the cursor at the start position.

When you cancel the code view the variables are not back converted to HTML elements.

I'd like to loop through a list of items and display it in a table. Something like this:

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
   {% for item in items %}
    <tr>
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

How can I implement such? It might also be good to see how one can extend the plugin.

I've prepared simple demo to show this issue: https://codepen.io/Misiu/pen/vxjQow

I have simple html:

<h1 style="text-align: center;">Hi {{user_name}}, have a nice day!</h1>
<h5 style="text-align: center;">Note, this is not an "enterprise/premium" demo.<br />Visit the <a href="https://www.tinymce.com/pricing/#demo-enterprise">pricing page</a> to demo our premium plugins.</h5>

that is displayed in editor like this:

after applying style (bold) to whole line I get this output:

<h1 style="text-align: center;"><strong>Hi </strong>{{user_name}}<strong>, have a nice day!</strong></h1>
<h5 style="text-align: center;">Note, this is not an "enterprise/premium" demo.<br />Visit the <a href="https://www.tinymce.com/pricing/#demo-enterprise">pricing page</a> to demo our premium plugins.</h5>

and in preview looks like this:

Here is recording showing my steps:

As You can see variable in output isn't bolded. Ideally variable should be treated as normal text.

Demo link navigates to: http://bubobox.github.io/tinymce-variable/ but is should navigate to: http://ambassify.github.io/tinymce-variable/

I've tryed but i find this error in the console:

Uncaught Error: Errors:
Failed path: (toolbarbutton)
Could not find valid strict value for "onAction" in {
"title": "My button",
"text": "Insert variable",
"type": "button"
}

Input object: {
"title": "My button",
"text": "Insert variable",
"type": "button"
}
at theme.min.js:4
at Object.getOrDie (theme.min.js:4)
at theme.min.js:4
at theme.min.js:4
at Object.fold (theme.min.js:4)
at theme.min.js:4
at Object.fold (theme.min.js:4)
at pD (theme.min.js:4)
at theme.min.js:4
at V (theme.min.js:4)

Someone was able to make it work with Tiny new version?

When you type a variable like for example {test} the cursor is positioned one word before the new variable.

Make this repo pass our eslint.

Test it with:

npm test

g flag potential problem:
https://github.com/bubobox/tinymce-variable/blob/master/src/plugin.js#L118

I want to add possibility of setting cursor before or after a variable. Is the absence of such a possibility a bug? You can reproduce it in your demo.
UPD: Is it possible to add a variable as a custom element to the scheme - which may allow the editor to work with the variable more correctly?

Insert a variable is only converted to HTML element when you focus on the text element.

If we use a span around each variable where we attach data-content that contains the text you want to use in the WYSIWYG. We can use a content replace using just CSS. This way we don't have to remove/add nodes while switching between visual and source mode. Because once send, the email client doesn't have this special CSS replace resulting in the actual variable value being shown.

POC:
https://jsfiddle.net/sitebase/ymhv33jz/5/

This will also solve some other issues like:
#2

The source code view doesn't work in IE, it's empty:

Sorry to be a mega noob on this but;

I think this is exactly what I need for my TinyMCE implementation. However, I can't see any docs on how to include this. This is my first TinyMCE project so I am kinda in the dark. I can see how to add it tothe list of plugins, where do I add the actual plugin source?

When you copy and paste text that contains a variable the contentEditable attribute gets stripped.

Looking at https://github.com/ambassify/tinymce-variable/blob/master/src/plugin.js#L13. I've noticed that plugin is named variable, but inside index.html (https://github.com/ambassify/tinymce-variable/blob/master/index.html#L49, https://github.com/ambassify/tinymce-variable/blob/master/index.html#L39) You use variables.
Please fix naming inconsistency.

I have found your plugin and have played around a little bit with it and I have found out that
$(variableSpan).attr("contentEditable", "false") does exactly what we need.

It prevents the html node in the editable node from being modified and moves the caret over the html node and deletes it on backspace and delete key.
The only thing you need to do is to add the node via range.insertNode() and not via document.execCommand() (used in the editor source), which behaved very strange in chrome, where html node attributes such as id and class disappeared.
See here: Stackoverflow issue

So it does exactly what your plugin does, except the dynamic provided variables and selection.

Worked for me for me in CLEditor.

Enjoy :)

In Safari if you manually type in a variable the cursor jumps to the beginning of the editor.

If I used a variable the default link plugin with TinyMCE no longer works. As soon as I delete that variable the link plugin works again.

This only happens when I trying inserting a link via highlighting some text first then trying to add a hyperlink.

When building template with styles variables are displayed incorrectly:

when line-height and font-size are removed same content looks like this:

I've created sample demo here: https://codepen.io/Misiu/pen/QprJPK

I'm not sure if this is by design, but maybe this can be improved?