I'm trying to upgrade from an old TinyMCE 4.9 installation to the current version 6.3. It looks like somewhere between those versions, TinyMCE started writing line break tags as <br> instead of <br />. But I have 12 years of user data that uses <br /> and a large, multi-platform system that relies on that format for parsing. Is there a way to revert to the previous format?
A common answer to questions like this is to do my own post-processing to change any TinyMCE formatting I don't like, but one reason I'm upgrading is to reduce the number of hacks like this that I'm already using. This one would be especially confusing because <br> would be used in several editing functions on the web platform while <br /> is used everywhere else.
This seems like it would be a breaking change for a lot of users, so I'd be surprised if there isn't some built-in way to adjust it. But I've searched the web, the TinyMCE docs and the source code with no luck. I can't even find a mention of it being changed in the change log.
I did find references to a closed configuration option that might be what I want, but only in 8+ year old posts, and this option no longer appears in the documentation. I took a guess and tried adding closed : "br" to my configuration, but it didn't make a difference.
Oh, while searching the GitHub issues I found a solution! The element_format configuration option with a value of "xhtml" restores the previous formatting of singleton tags:
element_format: 'xhtml'
The change log shows that the default value for this option was changed to "html" in TinyMCE 6.0.
I apologize in advance for the question with syntactic and semantic errors, English is not my native language.
I recently started learning web development, I'm currently learning bootstrap 5 and I've come across some incomprehensible moments:
what are the sane snippets or templates for writing elementary constructions, for example, if I want to make an elementary container construction
<div class="container">
</div>
when I try to enter cont or .cont and then press "ctrl + space" then this is not offered automatically
emmet is set, and when you type .cont a block with the class "cont" is created, which is naturally not what I need
Let's also assume that the i have file bootstrap.css file is connected to the project, and there are a lot of default classes in it, it happens that when I'm already in the tag, I want to register a class, and I start to enter a class, VScode behaves differently, sometimes it will show the options in the drop-down the menu, but sometimes it doesn’t show anything, what these glitches are connected with, can someone tell me how to get rid of different behavior? The IntelliSense for CSS class names in HTML extension is installed, but it doubles up in the dropdown list that VScode gives by default, and it's not clear how to disable the default behavior of VScode.
being in the tag or in the tag (link) you need to enter the data-bs-toggle attribute, the attribute is visible in the drop-down menu, and you can quickly select it, but when I get into quotes, the attribute value can be system will offer or maybe not offer, also with what it can be connected? Example data-bs-toggle="pill" , the value "pill" is not always displayed in the drop down menu and has to be searched for or entered manually.
for example, I am in the tag and start typing "cla" in one case, until I press ctrl + space, the class will not be offered, in the other case, literally further in the "a" tag, when typing "cla", almost immediately it is proposed to automatically make a class ="" (empty), again in this case VScode again behaves differently, all other things being equal, at these moments there are no reinstallation of extensions or other settings
Windows 10, projects and the system are all on a good ssd nvme, there should be no problems with loading a text file. All these questions came to me while studying Bootstrap 5.
I would be grateful for advice from experienced people, with the organization of the process of automating code entry. Maybe there are good extensions that I don’t know about yet, maybe the code editor chose the wrong one, maybe there are editors where you don’t need to install any extensions and everything works out of the box, intuitively?
I want some way to make an autoreplace instance in Sublime Text 3, so, when i write a specific character or string, Sublime automatically changes it to another string (predefined by me)
I'm not looking for a snipplet where you have to press tab or similar, i want something that changes it automatically.
Is it possible via some keybind or plugin?
Thanks in advance!
Take a look at SublimeCodeIntel which provide similar functionality to IntelliSense
https://github.com/SublimeCodeIntel/SublimeCodeIntel
But there are a great many other plugins which can assist with source editing - its very subjective and dependent on the language used.
Good luck
So I have a few hundred pages that need their navigation bars updated. I've looked in sublime text, aptana, notepad++ and used the search here but wasn't able to find a simple solution.
All I wish to do is add to the following code so it says
Home
Help
Other
Rather than
Home
Help
I'm using Windows if this makes a difference. I'm aware of the built in find and replace features of aptana and sublime etc but it seems unable add new code to those 100 pages which would be preferred over using any tricks or browser hacks, but I will be willing use those tricks if absolutely necessary.
Due to certain requirements, I'm not able to use php includes ,javascript or jquery and similar . Thanks for any suggestions in advance.
With Sublime Text you have the option to find in all files:
You can then choose a folder to search in, what text to search for and what to replace the found text with.
All files in the chosen folder will be searched.
Please point me to some guides on how to master (X)HTML, CSS with Vim. I preffer to create web pages by hands and I decided to go with Vim.
Any useful plugins, tips & tricks, tutorials, how-tos, books, articles?
Thanks!
You'll "master (X)HTML, CSS with Vim" the same way you'd do with any other text editor or language: by working hard, reading books, watching screencasts and keeping up with the news. The editor you choose is totally irrelevant.
That said, here are a few native features and plugins that helped me a lot:
Omnicompletion is Vim's own autocompletion-like feature, except that it's not automatic.
Hit ctrlp or ctrln to complete with a word contained elsewhere in your document.
Hit ctrlxctrlo to display a list of possible completions based on the language.
BEGIN EDIT
Another very very useful feature is "file-path completion", start typing the path to a file and hit <C-x><C-f> to display a menu with possible completions.
Also, the aforementioned features can be automated with plugins, the one I use is AutoComplPop.
END EDIT
Objects allow you to move, select and perform actions on your code in crazy cool ways.
Say you have <div>word</div> with the cursor on o, dit will delete word, cit will delete word and place the cursor between the tags for further editing and so on…
If you know what d, c or v mean, that i roughly means inside and a roughly means around and that t means tag you already have a very powerful tool, there. Vim has other objects very useful for code editing: ", ', (, [, { etc, type :help objects for more.
For me, this feature alone was enough to justify scraping TextMate.
Blockwise Selection does what it says. :help blockwise-visual for more info.
:normalize or :norm is also very useful to prepend or append something to a group of lines.
SnipMate is a plugin inspired by TextMate's snippets system. You type form then hit tab to expand to a complete boilerplate <form> element in which you can move by further hitting tab to edit values and attributes.
Surround takes the objects business to another level by making it possible to add tag pairs around your selection, deleting them or changing them.
If you take the example above, hit cst<p> to change it in a more correct <p>word</p>. To add a pair of tags to word, select it with v then hit S and type the tag you want.
Sparkup is a pretty awesome plugin. Besides that, I normally use both snipMate and delimitMate, though those are useful for coding in any language.
I do it that way. I haven't found that much support for it, so I wrote a little of my own. I keep it on Google code hosting. I also use a version of Vim with Python embedded, and use some Python to extend some functionality. That's in the pycopia.vimlib package.
There is only a little, but hopefully useful stuff. You can start from there.
Install CSS3 syntax plugin.
Install HTML5 syntax plugin.
Install Syntastic syntax checker plugin.
You'll also have to install CSS Lint's CLI tool, since the syntax checker uses it.
There are a lot more plugins related to general development, which you can find in several questions scattered around this website, but the ones above a specifically related to help writing better CSS & HTML.
Emmet. Which was called zencoding a long time ago, is a nice plugin for several editors (including vim) with many features that enables you to code html and css very rapidly.
For example, you can type div.some span.other<ctrl+y> ans you'll get:
<div class="some>
<span class="other>
(cursor here)
</span>
</div>
tl;dr; install this vim setup https://github.com/jameslai/jvim
James Lai wrote an amazing article on Frontend Vim which was 404'ing when I answered this. It has helped me switch from ST2 to VIM so I'm posting it here.
Why I Use VIM as My Editor of Choice for Front End Development
by James Lai
I’ve been using VIM for years, and I just can’t get away from it. While many people like to use Sublime Text 2, and I can’t help but absolutely encourage that, if you’d like to use an editor that can scale with your knowledge, VIM should be your editor of choice.
Easily edit content within tags
As FED’s, we’re constantly editing content within tags. VIM makes this easy with its “tag” text object - t. Here’s a common scenario, you have source code that looks like:
<div>Some content within here</div>
In VIM, to replace the content within that tag, you merely need to press cit. This will change the inner tag and you’ll be left with this:
<div></div>
Easily replace HTML attributes
Similar to the above, we deal with content within quotes all the time, often as attributes within our HTML. You may have something that looks like:
<aside class="one-third author box">
In this scenario, just hit ci". Perhaps the neatest part about this trick, if this was the only content on that line, you don’t even need your cursor anywhere near the quote itself! VIM is intelligent enough to simply empty out the content of the quote regardless of its position in the line, and you’ll be left with:
<aside class="">
Jump back and fourth between where you’ve edited
As FEDs, we are constantly jumping back and fourth between places we’ve previously edited. VIM maintains a “jump list” which is easily navigated by Ctr+O (jumping to previous locations) and Ctr+I (forward). This makes our routine of editing many files simultaneously incredibly painless.
More information on jumps
On a mac? In VIM, you’ve got a proper delete key again
Mac keyboards don’t come with a normal “delete” key - we essentially have a backspace key but it’s labelled delete. Sure, you could reach for funcdelete, but that function key is sure out the the way. Instead, hit x!
Move CSS like a master
Often I’ll need to refactor some CSS and move properties between selectors. With VIM, I can move content from various lines to my cursor position with a simple:
:<linenumber>,<linenumber>m
Common operations like these are made laughably easy with VIM.
Jump to the end or beginning of a line
This is unusually common in my workflow - needing to jump to the end of a line. Perhaps I forgot a semicolon at the end of a CSS property or line of Javascript. To jump to the end of the line, simply hit A and you’re in insert mode at the end of the line. Need to edit at the beginning (not counting tabbing)? Use I.
Edit at the speed of thought
One of the staple concepts of VIM is to prevent needing to reach for your mouse. When I’m in my flow, I never reach for the mouse unless its to interact with a web page I’m working on. Getting good at VIM means your ability to edit and manipulate text nearly approaches how fast you can think of the problem. Because of the concept of text objects, thinking “I want to delete this line” becomes a trivial dd, or deleting a word with daw. As you think about the problem, you more often then not have a easy command to describe to the editor. The ability to get into your flow with VIM is, in my opinion, higher than most other editors.
Easy split windows
Something that completely changed how I developed was learning how to really leverage split windows in VIM. Yes, VIM has split windows, and they’re amazing! Some editors come with this functionality, but it can be cumbersome to use, or difficult to remember to use.
Spits are powerful because we’re often addressing the same item in a number of places. If you’re addressing an element, you’ll often want the HTML file up. If you’re applying styling to it, you’ll want the CSS up, and if you’re applying behaviors, you’ll want the Javascript up as well. Seeing them all at the same time has saved me literally countless headaches in editing. The flow feels very “natural”, not to mention just how awesome your editor will look. Often I’ll have at least 4 splits going at any one time.
A great way to get started is by typing :Vex. This opens a Vertical exploration window. From here you can browse to whatever file you want to, and that file will appear in the split. There’s also the always salacious :Sex command, which will open a horizontal split explorer window.
Vertical Split Windows
More information on splits
More information on the file explorer
Your setup, anywhere
Perhaps one of the most compelling features is the ability to have your customized setup very quickly. I keep my VIM configuration in a GitHub repo, meaning regardless of what machine I’m on, I’m about 2 commands away from having my complete setup ready to go.
…even on remote machines
Front end developers will inevitably work on a remote server at some point. Heck, many of us have local linux boxes in a VM replicating our server environments. You’re going to need an editor, and rather than either fumble around in VIM due to not knowing how to actually make it dance, or using a basic and underpowered editor like nano, getting good at VIM client-side means you’re going to be a master server-side.
Final thoughts
VIM is an amazing editor, and although you may think it’s old, it’s actually more than up to the task for today’s editing. No matter what new editor hits the market, I may try them out to see what innovations are out there, but in the end, I always come back to VIM for all my editing, and I love it.
I use a lot zencoding, so, if you're used with zen-coding try the zenCoding plugin for Vim find it here
If you want to learn more about zen-coding you could read: zen coding vim tutorial