so I have a textarea surrounded by a DIV container:
<div>
<textarea id="code"> some text here </textarea>
</div>
and this textarea is tranformed into a code editor using CodeMirror:
CodeMirror.fromTextArea('code', {
lineNumbers: true,
matchBrackets: true,
mode: 'text/html'
});
the problem is that when the container of the textarea is hidden (some times it is, depending on what the user chooses to display), then after toggling to unhide it the CodeMirror editor doesn't appear like it should. It only shows one line, and you have to actually click inside it to redraw and show properly.
Does anyone know a fix for this?
refresh()
If your code does something to change the size of the editor element (window resizes are already listened for), or unhides it, you should probably follow up by calling this method to ensure CodeMirror is still looking as intended.
from CodeMirror manual (assuming you're using version 2)
Related
I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked
One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.
I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.
I created this fiddle to show what problem I am having.
In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.
I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.
I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:
Fiddle forked
Code:
var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
// copy ace to tinyMCE
tinymce.get('test').setContent(editor.getSession().getValue());
});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");
tinymce.init({
selector: ".test",
relative_urls: false,
apply_source_formatting : true,
setup : function(ed) {
ed.on('change', function(e) {
// copy tinyMCE to textarea
textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));
// copy tinyMCE to ace
editor.getSession().setValue(
tinymce.activeEditor.getContent({format : 'raw'})
);
});
}
});
You should be setting ACE theme and mode this way:
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");
I am using "CLEditor WYSIWYG HTML Editor v1.4.5"
When I open the window containing the TextArea element I'm using with clEditor, the Editor comes up disabled and it appears that the TextArea element is invisible. I have text in the TextArea element but the text is invisible.
If I right click on the body of the TextArea and select "Inspect Element", the debugger window opens and the Editor becomes enabled and the TextArea becomes visible. Then I close the debugger window and everything appears to be functioning correctly.
HTML:
<div id="maintBody">
<textarea id="woEditor" name="woEditor">This is the test data... is this editable?</textarea>
</div>
Javascript
$("#woEditor").cleditor( {height: "400"});
No CSS
If I comment out the Javascript .cleditor() call, then the TextArea element appears and functions correctly. So there is definately some setting in the editor initialization that is setting this state.
You can access this page at: http://test.nds.link then click on the "Props" Tab in the left column
Does anyone know what would cause the clEditor to come up in a disabled state, making the TextArea element invisible?
I had the same error while I using CLEditor inside a DIV which was toggled via jQuery.
The animation-Parameter cause the error! After I removed it, it works like a charm!
wrong way:
$("#cT_new_form").toggle("slide",700);
right way:
$("#cT_new_form").toggle(700);
So don't use "slide" as animation or CLEditor won't focus after slide!!!
The following fixed this issue for me without having to remove the effects:
cleditor problem with jquery ui effect()?
Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.
A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms
You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});
I was wondering if there is a way to protect a piece of html or text inside the jquery inline content editor jwysiwyg?
For example, I have a div that I externally insert to the editor and I do not want the user to modify it.
I could not capture the keypress event inside it (iframe security?) and setting the div to readonly or disabled did not work.
Any ideas?
Thanks!
Just add a click event handler for that div so it throws an alert and disables (graying out) the rest of the page; something like a login dialog (check out jQueryUI dialog - http://jqueryui.com/demos/dialog/)
Try it!
To clear the content in the editor use
$('#wysiwyg').wysiwyg('clear');
If you want to set the content of the editor on the fly you can use
$('#wysiwyg').wysiwyg('setContent' response.message);