I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'ASP.NET (Core)', value: 'aspnet' },
{ text: 'Apache', value: 'apacheconf' },
{ text: 'Bash', value: 'bash' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' }
]
}
}
]
Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.
So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.
Customizing the webresource archive
PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:
[centos#cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/
After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append
console.log(Object.keys(Prism.languages))
at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?
PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.
As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:
Highlight in the editor, too
I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view
To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive
[centos#cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js
and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor:
Related
In my Vue.js projects almost all the times I need this code snippet as a template.
<template>
<div>
</div>
<template>
<script>
export default{
data(){
return{
}
},
methods:{
},
created(){
}
}
</script>
<style scoped>
</style>
Is there a way to tell Visual Studio Code each and every time I create a file with the extension .vue to automatically add that snippet to the file?
Simply, when I create new file with a certain extension, the predefined template for that extension should automatically be added to the file.
There isn't, not natively. But there is an extension called File Templates for VSCode that allows you to create your own file templates and generate from them. But I think you'd benefit from making an extension to do just that and maybe even more.
In the meantime, you can use a snippet to generate this instead of having to copy paste.
Go to File > Preferences > User Snippets and choose Vue from the dropdown. Vue will only show up if you have installed an extension that supports this file type. In this case, I'd recommend Vetur, but you probably have it already.
Then just add this entry to your vue.json file:
"vuetpl" : {
"body": [
"<template>",
"\t<div>",
"\t\t$0",
"\t</div>",
"</template>",
"<script>",
"export default{",
"\tdata(){",
"\t\treturn{",
"\t\t\t",
"\t\t}",
"\t},",
"\tmethods:{",
"\t\t",
"\t},",
"\tcreated(){",
"\t\t",
"\t}",
"}",
"</script>",
"<style scoped>",
"</style>",
],
"prefix": "vuetpl",
"description": "Creates a new template."
}
Then, when you create a new .vue file, just type vuetpl and press tab to autocomplete, and you'll have this:
Of course, you can also use a Snippet Generator to make your own snippets.
This is being worked on now and is built-in to vscode v1.70 Insiders and may be in Stable v1.70 early August, 2022.
1. Make sure you haven't disabled this setting by setting it to hidden:
// Controls if the untitled text hint should be visible in the editor.
"workbench.editor.untitled.hint": "text", // "text" is the default
2. Make some snippets that will serve as templates for whatever languages you are interested in in a snippets file (here they are in a global snippets file):
"vue template": {
"isFileTemplate": true, // changing to this soon
"isTopLevel": true, // was this
"scope": "vue",
"prefix": "vueTemplate",
"body": [
"const a = 'vue template'"
],
"description": "vue template"
},
"javascript template": {
"isFileTemplate": true,
"scope": "javascript",
"prefix": "jsTemplate",
"body": [
"const a = 'javascript template'"
],
"description": "javascript template"
},
The isFileTemplate option is key here. Any snippet with this option will appear in the following workflows.
If you have the "scope": "someLangID here" set in the keybinding then vscode can and will automatically change the current editor's language to that language ID.
3. Create a new file:
a. with the command File: New Untitled File Ctrl+N
[the following option in the new file message start with snippet has been delayed and won't be in v1.70 Stable - the command SNippets: Populate From Snippet is working though.]
Then you will see the message at the top of the file as in this demo:
start with snippet
Clicking on that will show any snippets with that "isFileTemplate": true, set. Choosing one from the resulting QuickPick thaht opens up will input the snippet contents AND change the editor's language association to the scope value.
b. You can also modify an existing file to the snippet content and language by using the command (found in the Command Palette)
Snippets: Populate from Snippet
[This command workbench.action.populateFileFromSNippet does not have a default keybinding.]
As you can see in the demo, using this command will delete all the current contents of the file AND change the language association of that editor.
So making your initial snippets will probably be the hardest part, you might look into the snippet generator app.
The extension Auto Snippet does exactly that.
You only need to configure two things:
The snippet's name
A filename pattern or a language for when the snippet should be applied
Recommendation
The author has some very custom defaults, so as soon as you install it, modify its settings and remove those patterns that you won't need.
Otherwise, it will complain every time you create a file and doesn't find the snippet configured.
There is a pretty good plugin called "Snippet Creator" that makes creating snippets painless.
I wanted a quick "template" file that I could re-use. Copied the text, then used command "Create Snippet", and it was done in a couple of steps.
It could also be used to create the same Vue templates mentioned above. You can edit the snippet, insert your tab stops etc, just visit Code > Preferences > Configure User Snippets once created 🥳
I want to add a markdown editor for users to post their answers into my page. I've found TinyMCE but there is a problem with it: I don't know how to implement markdown editor with TinyMCE.
Is there anybody who has experience with this? Please show me how to setup a markdown editor with it.
It looks like the Text Pattern Plugin can do this:
This plugin matches special patterns in the text and applies formats or executed commands on these patterns.
…
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: 'textpattern',
textpattern_patterns: [
{start: '*', end: '*', format: 'italic'},
{start: '**', end: '**', format: 'bold'},
{start: '#', format: 'h1'},
{start: '##', format: 'h2'},
{start: '###', format: 'h3'},
{start: '####', format: 'h4'},
{start: '#####', format: 'h5'},
{start: '######', format: 'h6'},
{start: '1. ', cmd: 'InsertOrderedList'},
{start: '* ', cmd: 'InsertUnorderedList'},
{start: '- ', cmd: 'InsertUnorderedList'}
]
});
Note that the plugins key here fixes a typo in the upstream documentation, which uses plugin instead.
TinyMCE does not currently support a markdown mode with their editor, however I just recently was in the situation where I needed a markdown editor and wanted to use tinymce for it.
You will have to add a markdown package to your project. I recommend MarkdownIt, which I found from this list of recommendations. You can use any one of the recommendations from the link, just change the MarkdownIt usage with your markdown library in the code examples below.
I do not recommend Chris' approach because it's not very user friendly - the user needs the ability to save text with markdown in it and expect it to render the proper element when it is rendered. To have to press space or enter after each element to watch it change into a WYSIWYG style element is not user friendly. As such, if you take this approach you should actually remove the textpattern plugin and the textpattern_patterns configuration.
What you will want to do is to configure the setup function in your tiny config to listen to change events, and then pass the content through your markdown parser before returning the value to whatever needs it. You will also want to set menubar, toolbar, and statusbar to false.
var editorHandlerTimeout;
var MarkdownIt = require('markdown-it')
tinymce.init({
el: 'el',
menubar: false,
toolbar: false,
statusbar: false,
setup: function (editor) {
editor.on('paste change input undo redo', function() {
// the timeout is to throttle how often this runs while typing
clearTimeout(vm.editorHandlerTimeout);
vm.editorHandlerTimeout = setTimeout(function () {
var md = new MarkdownIt() // or any other markdown library
var contentFromEditor = editor.getContent()
//MarkdownIt adds its own paragraph tags, so strip the ones from tinymce
if (contentFromEditor.startsWith('<p>'))
contentFromEditor = contentFromEditor.substring(3)
if (contentFromEditor.endsWith('</p>'))
contentFromEditor = contentFromEditor.substring(0, contentFromEditor.length - 4)
var contentFromMdIt = md.render(contentFromEditor)
// markdown-it inserts the html encoded values for these (this might be a bug), so we will want to replace them since we will be rendering as html
contentFromMdIt = contentFromMdIt.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/&/g, '&')
// time to do something with your rendered markdown text
// im in vuejs, so I emit the result as 'input' which allows my markdown editor to work as a v-model
vm.$emit('input', contentFromMdIt)
})
})
})
})
Also, it is highly recommended to add a preview to your markdown editor, as the majority of users are unfamiliar with markdown. Make the preview feature simple and accessible, and just render their output as html so they can see what is happening.
Seems TinyMCE has a Markdown plugin for their editor now
https://github.com/vaidhyanathan93/Markdownfortinymce/blob/master/markdown/plugin.js
https://www.tiny.cloud/labs/markdown/
Tiny Markdown is a markdown syntax plugin for TinyMCE, providing
flexible rich text and markdown content creation options for authors,
and also provides robust, reliable markdown output for developer
projects.
In the context of a custom CMS, I have replaced the default 'Link' and 'Image' buttons with my own dialogs and commands to be able to link to existing CMS pages and files by selecting them from my custom dialogs.
In older versions of CKEditor, there was no ACF, so this was no problem.
In 4.1+, if I do not include the original 'Link' and 'Image' buttons, the results from my new buttons get filtered by the ACF. The plugins themselves work just fine, but I can't figure out how to get the ACF to automatically allow links and images.
* I AM NOT INTERESTED IN DISABLING THE ACF *, I just want the plugins to behave.
Example toolbar configuration that allows my buttons (LinkContent, ImageSelect, and FileSelect) to work:
{ name: 'links', items : [ 'Link', 'LinkContent', 'Image', 'ImageSelect', 'FileSelect' ] }
If I use the following, the content from my buttons is filtered out:
{ name: 'links', items : [ 'LinkContent', 'ImageSelect', 'FileSelect' ] }
In my plugin definitions, I have added what I thought was the appropriate ACF settings. In my ImageSelect plugin file:
CKEDITOR.plugins.add('imageselector', {
init: function( editor ) {
editor.addCommand( 'imageselectorDialog', new CKEDITOR.dialogCommand ( 'imageselectorDialog', {
allowedContent: 'img[alt,!src]{width,height}',
requiredContent: 'img',
exec: function( editor ) {
...
Would love to find out how to correct this without having to include the default buttons alongside my own.
Okay, so my solution is actually correct. As has been the case with most CKEditor frustrations, the reason it looked incorrect is because CKEditor tends to be very persistent with its caching (* not actually cached by CKEditor -- see comments below).
After my changes were pulled into someone else's checkout, the plugins worked perfectly.
Lesson -- Completely clear your cache with EVERY change when trying to debug CKEditor problems.
EDIT -- clarified that caching is not done by CKEditor because someone complained.
I have correctly configured MoxieManager to be integrated with TinyMCE and all works fine. But I'd like to remove the "browse" button (which opens the MoxieManager dialog) from the "Insert link" dialog.
So from the following screenshot, the green should stay but the red should go.
Self answer, but I guess it will be helpful to other people as well.
Each TinyMCE plugin usually has a JS file located under plugins/[plugin_name]/plugin.js (or plugin.min.js, depending on if you are using the minified version). Those plugins usually call the editor.windowManager.open(), passing an object of configuration options to be applied to the newly opened window.
One of the values this object can have is body which is an array of the items to be displayed in the dialog. Each item has some options to be configured on its own, including the type property.
In the below example, I have used plugins/link/plugin.js to show the difference needed to replace the (default) text field with the file browser button - with the standard text field without the browse button.
win = editor.windowManager.open({
// ...
body: [
{
name: 'href',
type: 'filepicker',
filetype: 'file',
// ...
},
// More code follows here
And the new version:
win = editor.windowManager.open({
// ...
body: [
{
name: 'href',
type: 'textbox',
filetype: 'file',
// ...
},
// More code follows here
Or, if you don't want to change the source .. say you're using a minified version etc, you can disable it via CSS:
div[aria-label="Insert link"] .mce-btn.mce-open {
display: none;
}
add it to you config
file_picker_types: 'media image'
file_picker_types
This option enables you to specify what types of file pickers you need
by a space or comma separated list of type names. There are currently
three valid types: file, image and media.
https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#file_picker_types
I'd like to know what's the syntax or the language used to format the code templates in netbeans ide. I mean, in the default templates I can see things like;
while (${EXP default="exp"})
{
${selection line}${cursor}
}
And:
// <editor-fold defaultstate="collapsed" desc="${comment}">
${selection}${cursor}// </editor-fold>
And I experimented and did this:
int ${IDX newVarName default="loop"};
for (${IDX} = 0; ${IDX} < ${SIZE int default="size"}; ${IDX}++)
{
${cursor}
}
And it works but I don't really know where the "${IDX}" or the "${SIZE int default="size"}" or the "${selection}${cursor}" comes from and what other statements can I use to format my templates.
Is this some scripting or programming language?
Where can I find this information?
I think Netbeans uses the template engine Freemarker for this. So all variables (= ${...}) are filled in by Netbeans at the time you use the template.
Unfortunately I don't have a full list of all default variables / methods you can use, but here are two of them listed:
${cursor}:
defines a position where the caret will be located after the editing
of the code template values finishes.
${selection}:
defines a position for pasting the content of the editor selection.
This is used by so-called 'selection templates' that appear as hints
whenever the user selects some text in the editor.
See here: http://wiki.netbeans.org/Java_EditorUsersGuide#How_to_use_Code_Templates
${IDX} looks like a custom variable you use.
See also:
- Code Assistance in the NetBeans IDE Java Editor: A Reference Guide (Code Template)
- Code Templates in NetBeans IDE for PHP
How_to_use_Code_Templates pretty much covers everything there is.
Looking at CodeTemplateParameter.java shows there is another hint called "completionInvoke" which requests showing of the code completion popup for the currently focused text component, but that is all.