I am using IdeaVim on pycharm with Vim surround plugin. The issue i am having is that when i try to surround a visually selected text inside html tag that has class as well, it adds the class attribute to the end tag as well. Here is the example code
<p>Hello</p>
So I want to wrap this line inside a div tag so I select the line visually and then hit `S and the result i see is as below
<div class="container"><p>Hello</p>
</div class="container">
This does not happen with normal vim surround plugin installed on my vim and here is the output from normal vim.
<div class="container">
<p>Hello txt</p>
</div>
So is it issue with Ideavim emulated plugin or am i missing something here ?
It's a bug in the vim-surround emulation in IdeaVim. Feel free to report it to the bug tracker.
You might also be interested in other issues related to the vim-surround emulation. See this query in the bug tracker.
Related
It is possible in the setting or via a plugin the make a file (html, css or php) automatically add whitespace (auto-indentation) on opening? I know that I can alter the setting to automatically remove whitespace on save, but I think I will loss the visual when editing.
I saw #rioV8 was not clear where I want the whitespace be added. So basically before each line of code (just like when auto-indent when hit enter). But apply to a single line of code.
example:
<html><head>some code</head><body><div></div><div><div><div></div></div></div><div></div><div></div><div></div></body></html>
being converted to this when the file opens:
<html>
<head>some code</head>
<body>
<div></div>
<div>
<div>
<div></div>
</div>
</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
NB: I’m using the latest stable build of VS code.
I use Composite C1 CMS, but the custom TinyMCE in it is so crazy. Simple issue: we'd like to use Font Awesome icons. Source code editing is OK.
If we add the following:
<i class="fa fa-bus"></i>
This is removed. OK then, add a space:
<i class="fa fa-bus"> </i>
i is converted to em.
If I change valid_elements in config in the file visualeditor.js, nothing happens, still the same problem.
Are there any solution for this issue? Anyway it would be nice to add a button to the toolbar 'add icon'.
TinyMCE will remove empty elements by default, so you add a between your tags to tell the TinyMCE it's not empty. Also <i> used to be Italic in older versions of HTML so it's trying to convert an old italic tag into a preferred <em> Emphasis tag. Really though, you can use any tag with Font Awesome so to fix this issue, just change your <i> to a <span>:
<span class="fa fa-bus"> </span>
The accepted answer uses , but this will create a gap next to your icon causing it to be slightly offset. A better alternative is to use a comment:
<i class="fa fa-bus"><!-- icon --></i>
Now TinyMCE won't cleanup the "empty" element and you won't have a gap, but it will still convert your <i> to <em>. To prevent this, add the following to your TinyMCE init:
tinymce.init({
// ...
extended_valid_elements: 'i[class]'
});
TinyMCE Icon Fonts Plugin
The icon font dilemma has been a problem for years, so I finally wrote a plugin to solve it with minimal effort. The plugin:
Prevents TinyMCE from converting icons into elements
Prevents TinyMCE from removing empty icons
Makes icons selectable so you can copy/paste/delete them easier
Let's you configure the CSS selector used to identify icons font elements
If you don't want to use the plugin, feel free to dive into the source to see exactly what's going on under the hood.
Cheers!
I know it's an old question but I want to add my two cents here.
As we all know, TinyMce strips out <i></i> so we have to find a way to bypass this problem.
A fast way I use in such cases is to replace <i></i> with <span></span> as Howdy_McGee mentioned before me.
So, to summarize, in your example instead of using:
<i class="fa fa-bus"></i>
you can just use:
<span class="fa fa-bus"> </span>.
I use a php script that inserts data into the jos_content table in order to create an article. In the article content is a textarea with the attribute required.
<textarea name="comment" required></textarea>
But, when I open my article manager and find this created article, there is no required attribute anymore -- everything else is fine. The same thing happens with maxlength.
I use JCE, so I am assuming that it is responsible for killing these attributes somehow.
How can I prevent these attributes from being stripped from my textarea element within my articles?
Have you tried to change the settings of JCE editor. Go to the Editor Global Configuration > Cleanup and Output and set the HTML Validation to NO.
This will affect your code, but it will keep the attributes of textareas in the articles. Of course, you have to set the attribute to have value: required="required".
Or, just use another editor: Tiny etc...
I faced to the same issue. The problem is that JCE will remove all element which do not have any content inside.
In other words, this will be removed:
<textarea name="comment" required></textarea>
And this will not:
<textarea name="comment" required> </textarea>
I have made a usercontrol which I use as a content macro in umbraco. All works fine on the development server but when I have deployed it to the staging server, the macro doesn't work.
For some reason the macro is having it's contents deleted by the wysiwyg - on the development server the macro html looks like this:
<div umb_buttontext="Download the case study >" umb_linkdocument="1581" umb_buttonimage="1585" umb_macroalias="DownloadButton" ismacro="true" onresizestart="return false;" umbversionid="573dbd37-24e3-4d67-80b6-84d915c38409" umbpageid="1215" title="This is rendered content from macro" class="umbMacroHolder">
<!-- startUmbMacro -->
<p class="downloadButton"><a id="DownloadButton_1_lnkButton" style="padding-left: 77px;" href="http://www.fmg.co.uk/results/highways-agency/highways-agency-download/" class="button">Download the case study ><span class="image" style="background-image: url('/media/38897/highwaysagency.png'); width: 57px; height: 69px;"> </span></a></p>
<!-- endUmbMacro -->
</div>
but on the staging server the part between the comments is deleted, even if I delete the macro and try to insert it from scratch:
<div umb_buttontext="Download the case study >" umb_linkdocument="1581" umb_buttonimage="1585" umb_macroalias="DownloadButton" ismacro="true" onresizestart="return false;" umbversionid="573dbd37-24e3-4d67-80b6-84d915c38409" umbpageid="1215" title="This is rendered content from macro" class="umbMacroHolder">
<!-- startUmbMacro -->
<!-- endUmbMacro -->
</div>
I have also tried copying and pasting the macro directly into the html of the wysiwyg and this works until I save and then the bit inside the comments is removed again.
Does anyone know why this happens as I have tried searching for an answer but could not find anything. Any help would be greatly appreciated
As it turns out, when I published the site, the dll didn't get updated properly and so the usercontrol for the macro was referencing something undefined or null causing the macro to break.
I think that whenever a macro is broken, it will clear the content in the wysiwyg area as described above. Once I fixed the usercontrol, the macro worked properly again. This also happened on a couple of other macros too but instead of trying to edit the page I fixed the usercontrol behind the macro and it seemed to solve those problems too.
I need to allow add a div with a class attribute in tinyMCE in Umbraco. I can add a div, but all content in the div is just text. I need that text has a paragraph, and finally add a class attribute for the div.
It's a little hard to understand what you are asking, but I think this should help.
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
You can basically associate a stylesheet with the tinyMCE and then add styles to it that will appear in the style dropdown
You may use
tinymce.activeEditor.execCommand('insertHTML', false, '<div class="section'></div>');
This will insert the specified html into the editor at the local caret position.
Be aware that your valid_elements and valid_children configuration settings won't strip out anything from the html that you insert.
If you can paste your template code then we can be more of a help to you.
What you want to do is wrap your <umbraco:Item field="aliasOfYourRTE" runat="server" />
with the div you want so in your case your code will look like this:
<div class="YOURCLASSNAMEHERE">
<umbraco:Item field="bodyText" runat="server" />
</div>
The umbraco RTE automatically spits out <p> </p> tags when content is inserted. Also, make sure you are publishing your node so that your content is viewable on the front end.
Hope this helps.
Go to Settings - Styles.
Open the stylesheet with the styles for the Format dropdown of TinyMCE in Data Type Richtexteditor.
Add a style with the Alias div.class, e.g. div.alert alert-danger.
If you then click in TinyMCE on a paragraph and then choose in the Format dropdown this style the paragraph is formatted as follows:
<div class="alert alert-danger"> ... </div>
Is this what you wished to do?