I have a problem with the jodit wysiwyg editor (or possibly any other type of plugin editor) working within a Bootstrap tab. If I add an editor to the tab content then when the user selects that tab the content is not displayed correctly (it is only a fraction of the height and is missing a lot of it's toolbar).
I suspect it is being rendered within the hidden tab div which possibly affects the redraw process?
Here is a working fiddle Click on the Editor tab to see the reduced size editor. To see the proper working version, grab the small resizer in the bottom right and drag the area, it should auto resize to the correct display.
To render the editor the only code I've used is
var editor = new Jodit('#editor', {
autofocus: true,
height: "600"
});
I've also tried running the editor.resize() function after it's been created which doesn't work.
The tabs and the content are generated dynamically.
Is there some other editor function that I can call after the content has been applied that will fix the redraw?
It turns out that there is an option called toolbarAdaptive that turns off adaptive mode. This allows the tool to be drawn as expected. Not sure if that is a bug in the Jodit editor itself or desired functionality.
var editor = new Jodit('#editor', {
autofocus: true,
height: "600",
toolbarAdaptive: false
});
Related
How can I hide this three dot option (attached image) in ace editor. This does not show when I open the html in Desktop web browser, but it is showing when I open it on android webview.
Referring this Library (ACE Editor): https://ace.c9.io/#nav=howto
Just found out. Didn't got the actual function to do this but it can be done by modifying ace.js file.
In ace.js file, line 3157 (may be different in your case).
contextMenu.style.display = "";
Make it none:
contextMenu.style.display = "none";
That's it.
So the actual question was how to hide contextmenu of ace editor.
I'm using CKEditor 4, and when I'm in the middle of some long content and switch from the standard editor view over to the Source view (or vice versa), it jumps me back to the top of the content. However, I want to make it so that it stays where I was in the view I just came from.
How can I do this in CKEditor 4? I've tried Googling the answer, but I can't seem to find any relevant hits for either a setting in CKEditor 4 to do this or a snippet of JS that would accomplish the same thing. Thank you.
There's a plugin for this called "Keep TextSelection". Download it here: https://ckeditor.com/cke4/addon/textselection
Extract and upload the textselection folder to the plugins folder. Next add this to the config.js file:
CKEDITOR.editorConfig = function( config ) {
// along with any other config lines add the following
config.extraPlugins = 'textselection';
}
From the WYSIWYG editor press the Source button. Your cursor will be at the same place in the Source view. If you highlight something that same text will be highlighted in Soure view.
Here's a working example:
http://jsfiddle.net/sirtet/TX5bc/
I'm using CKEditor inline feature.
I initiate a new editor instance every time the user hovers over a text area. The problem is that when the user hovers and focuses on a textarea for the first time, the editor toolbar takes a couple of seconds to appear because the editor is loading all the necessary assets.
My question is: How can I pre-load all the necessary CKEditor assets during an onclick event instead of when the user hovers a text area?
I tried adding all the assets in the HTML file and the editor appears instantly, however when I look at the DOM, the file assets are sourced twice. Meaning even when the files are already present, CKEditor still loads them.
You could go ahead and initialize the instances of the editor normally, but set visibility of the toolbar header and footer to hidden and reduce their height to 0. Then on hover you'll set the height to auto, and visibility to visible.
CKE Editor Javascript adds inline styles for height on the toolbar, so you'll need the !important declaration on the height.
https://jsfiddle.net/ucytmjj5/4/
span.cke_top,
span.cke_bottom {
visibility: hidden;
height: 0px !important;
}
div.cke:hover span.cke_top,
div.cke:hover span.cke_bottom {
visibility: visible;
height: auto !important;
}
You can instantiate a dummy editor on page onload or onclick. Keep dummy editor hidden using display: none. When your dummy editor is loaded, it will load all the assets and next time when you display the editor it won't reload the assets. Simple!
You could try showing the text area after CKEDITOR instance has been created. For example.
CKEDITOR.on('instanceCreated', function(evt) {
evt.editor.element.setStyle("display", "block");
});
CKEDITOR.replace('editor1');
#editor1 {
display: none;
}
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<textarea id="editor1"></textarea>
You could reuse the same instance of the editor every time, but replace the editor's text with the value of textarea that the user hovers over. That way the editor will only load once and be reused.
Try using CDN versions of the assets, if it fixes your problem then it may be a server issue.
If you are using assets from a server that doesn't have cache policies or policies that don't let the browser cache, the browser may be downloading these files more than once.
Has anyone created custom self-closing non-html tags with attributes in tinymce?
I have tried the same on the lines of tinymce's pagebreak feature.
I went ahead and unminified the plugin.min.js associated with pagebreak.
I started tweaking the code by adding a pop-up to accept attributes for the custom tag.
I'm inserting my custom tag which is displayed to the user on UI as a logo image.
On clicking 'source code'(<>) from toolbar of tinymce, we must see only :
<mycustom attr1='value1' attr2='value2'/>
To the end user its meaning will only be an image, similar to how page break works.In page break, a tag is inserted in tinymce on viewing src, but actually on UI of tinymce editor we see dotted lines image.
----------------------
----------------------
This is achieved using 'Resolvename' function in pagebreak plugin.min.js
I am able to create the desired tag and pass attributes inside it, however when I click 'source code'(<>) plugin,
I see the tag:
<mycustom attr1='value1' attr2='value2'/>
in code view of tinymce, but on clicking 'OK', everything becomes empty!!
I read in many places that configuration in tinymce plugin using:
extended_valid_elements : "mycustom[*]"
&
closed: /^(mycustom)$/
does the magic, but this did not work for me :(
I am not able to put screenshots because of low reputation:(.
Anybody has solution for this?
Thanks in advance.
I'm trying to use within wymeditor the same styles that are on my website. Unfortunately this editor is barely documented, so I don't really know how to do it.
The documentation implies something like you can use a stylesheet where you define everything in some form, and it will be parsed and used in the editor. I could do this, but only with the classes (second box on the right panel). The documentation gives an example, but only for the classes, not for the containers. There's a link to a full stylesheet, but it's a dead link, and the stylesheet used in the examples only define classes and no containers.
So how would I make for example a red h1 in the editor? Or at least in the preview.
I would be really glad if someone linked or gave a full example of a stylesheet where containers like h1 and p are also formatted and used in editor. If this is not possible, what are other ways to do it?
EDIT:
I could inject CSS to the iframe with postInit:
postInit: function(wym) {
var $head = $(wym._box).find('iframe').contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: costumIframeCss,
type: "text/css"
}));
}
Now the only thing that I need is to do a similar thing to the preview dialog. Maybe with the postInitDialog(wym,wdw). I don't really know how yet. The big problem there is that I need to differentiate the preview dialog from the other dialogs.
Update:
I saw that you have access to dialog window as wdw, when using postInitDialog. Thats cool. The way you did it (looking at your update) the same you you can for Diaolog too
Look at the following image. I debugged the Preview dialog, as it opens.
Look at line no. 41
Following what you did to the editor, the same can be done to the Preview
At line no. 41, you can get the head and append the style in the same way
var $head = $(wdw.document.body);
$head.append($("<link/>", {
rel: "stylesheet",
href: customPreviewCss, // CSS for Preview Dialog
type: "text/css"
}));
Initial Answer:
As I understand, you want the styles to take effect while you are editing. Ideally, for making an h1 red in color while editing (or any such customization), you have only the following options:
Use the proper classes, as explained by the documentation - The very
purpose of an editor is this. Customization should be done on top of
what is there
Edit the default stylesheet which you have linked or
is loaded when editor is active (you can check that using inspect
element) This is explained below
I see that when you are using the editor, it loads in an iframe. An iframe has its own styles. Now, inspect the element. In your case its an h1, but I am using the p tag from the example
See that it loads the styles from another file - wymiframe.css, line no. 51 for a p tag
So if you want to change or add your own styles, go to that file. (If you hover own it, you get the file path, or right click and open in new tab and check from the address bar)
Add or edit the style of h1 there. Done.
Also, you can go to the respective html file in the wymeditor/iframe/default folder. Add your custom link to your own css file. In this file, do all desired customization :)
Hope it helped !
As you see those are just the samples. You can't use that as an editor online. You 'll have to download that and try using it.
http://files.wymeditor.org/wymeditor-0.5/examples/
The above shows the list of examples. In that you have tried with the first link.
To download it go to this link.
http://www.wymeditor.org/download/
Select the recent stable versions for less flaws.
Hope this helps.
And as you have asked it works very well in the preview, when submitting nothing is getting reflected.
To achieve that in the preview, click on the HTML icon that is present at the second last position.
Write your own code, clicking on preview gets your result in a new pop up window.