I am looking for a solution to be able to insert a selector of predefined html templates in the summernote toolbar
I would like to create files.html (with tables, fonts, etc …) in a folder to be able to easily copy the contents of the desired file in the Summernote editor
Do you think there is any possibility to be able to achieve this result?
You could use a database table to store the HTML template code and populate the editor with a selected record/template - eg from a select menu. I don’t know if it would be possible to add this to the toolbar.
In fact I’m currently looking for how to insert pasthtml into the Summernote toolbar
the dropdown menu for the templates I managed to insert it. Now I have to understand how to popularize it and how to make it work
Cool idea. Please keep us posted on progress?
I came to list the templates (template1.html, …) in a dropdown in the summernote toolbar of Wappler.
I added an add_template.js file
add_template.js.zip (1.6 KB)
and modified the toolbar
But now I don’t know how I can do, without creating problems to wappler, to create the command for copy the templates contents in the summernote page.
Using your example, you need to create three files: templatel .html, template2.html etc. If you save them in a folder called ‘templates’, edit add_template.js by adding the folder name here (at about line 33):
var defaultOptions = {
label: “Template”,
tooltip: “Add template”,
path: “templates” // add this line
};
You can change these names or add templates, by editing line 19.
You’ll also need to remove this line:
console.log(angular.module);
(about line 75)
I expect there’s a better way of doing this - ie a more dynamic way, but this should work.
1 Like
Thanks TomD
I made the suggested changes, but unfortunately it still doesn’t work. I can’t understand, but I still try
I’ve just tested it and it seems to work fine - but, I think you need the full version of jQuery, not the slim version.
You can set the config for the template plugin also on the summernote component like:
dmx-plugin:template="{ path: 'templates', list: ['template1', 'template2'] }"
You could also try to use dynamic data, like getting the templates with a serverconnect action
dmx-plugin:template="{ path: 'templates', list: serverconnect1.data.list }"
3 Likes
thanks later when i am at the computer i will try these tips
I don't quite understand where and how I can insert your plugin
I think you still need your .js file, but the variables for the folder location and template file (and the button label) can be set within Wappler, statically or dynamically. You just need to add the code from Patrick within the Summernote <textarea>. This is a much better solution which I didn’t know was possible.
I find the error
In the is file I correct option.path -> options_path
Now is OK
Thank You very much
With your collaboration, now the button for choosing the templates, works wonderfully both on the insert page and on the update page.
To complete it would be necessary to have a reset button that deletes all the html code, without having to open the code page.
Actually the command for summernote exists:
“$(’#summernote’).summernote(‘reset’);”
but I can’t understand how to insert it with Wappler’s Summernote
There is a dynamic event for this:
.. though I don't know if you can include it in the toolbar. (As far as I can see, only one or two of these options have been implemented yet, but this one works.)
but where do I find this acrion?
If you select a button, add an onclick event and select the action in the normal way:
… you’ll see these options. You might want to display a confirmation dialog before clearing the textarea; if so, you could use a flow. As I mentioned, I don’t think these actions are all implemented yet but a few are, including Reset.
I was unable, as you said, to insert the button in the Summernote toolbar.
However with an external button it works great.
It is not the best aesthetically, but it is acceptable
Thanks