I use TinyMCE (with react-tinymce moudle on npm). I need to customize the HTML code editor, so that it looks like the one on Wordpress. I think it should be possible as Wordpress use TinyMCE.
What makes the editor on Wordpress comfortable is we don't need to enter <br> or <p> on code editor. But when we switch to visual mode, it will add <br> or <p> automatically. That makes the text looks much cleaner and easier to read.
Another question is how to make the code editor not displayed in a popup. The main problem with the popup is it will be closed when we accidentally press esc or the cancel button. In addition, the Wordpress code editor also has a toolbar, while the default TinyMCE code editor is just a textarea on a popup.
The code plugin that comes with TinyMCE places the HTML code is a separate window - there in no configuration option that will allow the code to appear directly in the editor's main window.
If you'd like to submit this as a feature request, TinyMCE has a place for that:
https://community.tinymce.com/communityIdeasHome
Related
I would like to add my custom WYSIWYG-editor with my plugin over Grav build-in editor without removing the last.
I append my editor as a divider with contenteditable="true" to .CodeMirror-lines > div as the container where is also build-in .CodeMirror-code editor divider. And my editor is above as layer (z-index is higher).
But when I click the area, the build-in editor is focused and not mine.
I've viewed the codes of both user/plugins/admin/themes/grav/js/admin.min.js and user/plugins/admin/themes/grav/js/vendor.min.js to find the row(s) which is(are) responsible for such focusing, but I can't.
Could someone help to cancel this focusing?
Ok, to resolve the problem it's enough to append my editor not to .CodeMirror-lines > div, but to .grav-editor-content divider
CodeSandbox editor used to auto generate the corresponding close tag for the current tag.
For example:
<div> // THEN IT WOULD AUTO GENERATE THE </div> TAG
But don't know exactly when, it stopped doing that, and I have to write it manually. Is there a way to enable this autocomplete again?
In the codesandbox.io go to:
File -> Preferences -> Settings
In the Search Settings box type Javascript Autoclosing Tags.
Enable that feature by checking the Checkbox.
Just posting an updated answer since the UI has changed for codesandbox. I believe this answer is now slightly better:
Press cmd+, (ctrl+, on a windows) with the editor focused (this opens the vscode settings)
You should see a settings page like so:
In the Search Settings box type Javascript Autoclosing Tags
Toggle the checkbox on
In my case the auto completion works if a change the extension of the file to .jsx and if I start typing the tag without the <.
I am working on a website that a script is loading a big chunk of style in the HTML. my problem is the chrome dev tools don't let me view the full script. it's also not available in the resource tab and all chrome is doing is putting three dots while trimming the content. is there any way to view it in the dev tool? even if I copy the style content, it's trimmed version.
the same content in the firefox doesn't even load as something readable.
and I have to copy the content and reformat to see the result. wonder if there is any better way to do this?
In Firefox use Style Editor tab in dev tools. from the official documentation:
The Style Editor enables you to:
View and edit all the stylesheets associated with a page.
Create new stylesheets from scratch and apply them to the page.
Import existing stylesheets and apply them to the page.
You have (at least) 2 options to see this tab:
Hit F12, it will open up the Dev tools for you, then click on Style Editor tab.
Hit Shift + F7, it will open up the Dev tools and active Style Editor tab for you.
After opening the tab, you should be able to see all the stylesheets associated with a page in left pane (The style sheet pane), the name of inline stylesheets normally is something like <inline style sheet #1>, click on it, the content/css will show up in right pane (The editor pane).
After switching to Emacs for editing purposes, I have started missing the way Notepad++ does tag highlighting.
When I move the caret/cursor to an HTML tag, the opposite end of the tag should be highlighted.
The Emacs plugin called hl-tags-mode does this, but how can I change it so that
the highlighting happens only when cursor is at an
HTML tag. Right now the plugin highlights even when cursor
is inside some plain text inside a parent tag.
Only the opposite end should be highlighted.
So if I'm at a <div> tag, only the matching </div>
should be highlighted. And vice versa.
show-paren-mode would probably be the right mode for that, but it currently doesn't do it for HTML tags. Try M-x report-emacs-bug asking for that new feature.
i am having some problems with the TinyMCE (V3.4.7) and JqueryUI (V1.8.14) Dialog
the following Fiddler link shows my example purfectly here
What i am trying to do is open a JqueryUI Dialog box with a TinyMCE WYSIWYG Editor in it.
the first time it displays properly. but if you click close and then reopen the box it will not show the Editor but just the TextArea.
Any help would be good. Thanks
Update
I did find out a solution that works for me, i have put up the working code here
What i am doing is check to see if the dialog has been opened before and if so just open it, then in the Open Function i test to see if the box contains an element with id_parent
if it does then this will be the editor (so do nothing) otherwise just init as usual.
it seems there is a problem with the JQuery Plug in as it does not remove the elements when you call tinyMCE.execCommand('mceRemoveControl',false,'editor_id') and when you re-add the editor it attaches to the first box available.
Problem here is that you need to shut down tinymce correctly in order to open an editor with the same id.
Use:
ed.execCommand('mceRemoveControl', false, 'editor_id');// editor_id equals the id of your textarea