I am using Angular 8 and TinyMCE v5. I have a custom component component that includes the tinymce editor with config properties associated.
<tinymce #editor [config]="context.config" [(ngModel)]="context.message">
I also have a button that has a callback function when clicked. As normal, after I type into the text editor, I use the button to call a function which captures the editor content. However, I want to also to allow the same function to be called when the enter key is pressed in the editor based on a condition. How can I accomplish this?
The problem I am running into is that I cannot access the component function from the config properties where I can specify in the setup.
Let me know if I need to include more information. Thanks!
If you use the Official TinyMCE Angular component, you can bind editor events via a shorthand prop on the editor component, for example:
<editor (onKeyUp)="handleEvent($event)"></editor>
https://github.com/tinymce/tinymce-angular#event-binding
This way, you can bind to the editor event from outside of the editor configuration properties.
Related
I'm having problems with removing tags from TimyMCE. (last version)
invalid_elements : 'br' or valid_elements : 'p/br'
This delete/replace the tag on ctrl+enter from html source but not from the DOM in the editor.
How can i prevent the use of invalid elements in the Editor DOM?
Simply said i want to prevent using a tag not only in the generated html source, but also in the Editor too.
What do you want to have happen when someone presses shift+enter if you don't want the <br> to be used? You can capture any keydown event in the editor and then choose what you want to do instead.
This TinyMCE Fiddle captures the keydown event and simply ignores shift+enter. You can certainly do something different if needed.
http://fiddle.tinymce.com/vogaab/1
EDIT: Based on your comment I updated the fiddle:
http://fiddle.tinymce.com/vogaab/2
...in this version I modify the event to make the event.shiftKey attribute false and then let the event finish as normal. I no longer get a <br> but instead get a <p> tag whether I use enter or shift+enter
I have a custom button that insert some HTML in the editor
First block of code is the button action and the second one is how the HTML is inserted
Any idea why it is rewriting it that way and how to stop it?
I just managed to fix it, in the init function:
valid_children : 'pre[code]'
TinyMCE includes the ability to insert code samples into the editor via its Code Sample plugin:
https://www.tinymce.com/docs/plugins/codesample/
If you want to try to do this yourself you need to do a few things like using the protect configuration option to tell TinyMCE to allow your PHP tags. See this TinyMCE Fiddle for a basic example:
http://fiddle.tinymce.com/Qdgaab
I've created my own extension to DefaultTextHover within my custom Eclipse editor, and wanted to add icons to the hover -- similar to what the JDT does when I hover over a program element.
Currently, my implementation of getHoverInfo returns the appropriate String for the hover itself. But I would like the hover to also contain an icon -- similar to what I'm already using in my editor's outline.
How can I do this?
You need to make your extension to DefaultTextHover implement ITextHoverExtension which adds the new method getHoverControlCreator. This method returns a IInformationControlCreator which is used to create the IInformationControl which is used to display the hover information.
IInformationControl creates the hover and can interpret the hover text any way it wishes (as HTML for example).
There is a DefaultInformationControl implementation of IInformationControl available which does a lot of the work for you. This requires you to provide a class implementing DefaultInformationControl.IInformationPresenter and DefaultInformationControl.IInformationPresenterExtension.
There is an internal JFace class HTMLTextPresenter which can be used as an example for implementing the information presenter (since this is internal you should not use it directly).
I've created a custom form type in symfony2. This formtype has it's own template and this is working fine.
The form type also needs some javascript on the clientside to work nicely.
I would like to add this javascript to the page using the same template I use to render the widget. It's a bit more of a hassle to do this manually.
I could add the javascript manually on each page, but it would be nice if that just happened automatically.
I can't add the javascript just before or after the element itself, as it has a dependency to jquery which is only loaded at the bottom of the body.
I tried using a block which is defined in the "main template" (it is named block_javascript) to add the custom javascripts to the footer of the page, but it seems the rendering of forms works a little different and the block is not available.
I'm using assetic to prepare and return assets.
Is there a way I can use blocks from the main template being rendered when rendering a form widget?
I don't think yet about all the consequences or if it's doable, but here an idea that can solve your problem: use the event dispatcher.
an event for assets addition
a service that hold a list of assets to use and subscribe to above event
a Twig extension that use above service to make assets accessible in the template
trigger the event in the buildView() function of your form type with right parameters
use the Twig extension in your layout template
It theorically should work.
When you initialize a tinyMCE editor I have noticed two different ways to get called when the editor is created.
One way is using the setup callback that is part of tinyMCE.init:
tinyMCE.init({
...
setup : function(ed) {
// do things with editor ed
}
});
The other way is to hook up to the onAddEditor event:
tinyMCE.onAddEditor.add(function(mgr,ed) {
// do things with editor ed
});
What are the differences between using these two methods?
Is the editor in a different state in one versus the other? For example, are things not yet loaded if I try to access properties on the editor object.
What are reasons to use one over the other?
The difference here is that tinyMCE.onAddEditor adds code to be executed onthe AddEditor event and fires when a new editor instance is added to the tinymce collection
while the setup setting lets you add events to the editor. It gets executed before the editor instances gets rendered.
One other difference is that setup is to be set inside the tinymce initialization call (the configuration setting) while onAddEditor usually gets called inside a tinymce plugin (but you may also set it inside the setup function).
onAddEditor.add gives warning in the latest TinyMCE 4:
Deprecated TinyMCE API call: <target>.onAddEditor.add(..)
.on(nameofevent, function(){...} ) is the proper way to do this in MCE4 if you don't have the backward-compatibility plugin.