Are there any free online HTML editors which preserve custom attributes in the code when you're editing the text field? The ones I've tested remove them beyond W3C standards (list below, will add to post based on suggestions).
EDIT: The idea is to have the changes I make to the output be reflected in the text fields of each HTML tag, then copy the changed HTML back out again. More advanced playgrounds like Codepen/JSFiddle unfortunately don't allow editing of the output, just the code.
https://htmlg.com/html-editor
https://html5-editor.net
https://wordtohtml.net
Example code - post in the HTML field of editor then change the text field:
<a id="id" class="class" first="FIRST" last="LAST">
This link has information outside of the conventional attributes.
</a>
Try these:
- https://jsfiddle.net/
- https://codepen.io
Is it what you want?
Related
I created multiple buttons, for each created button I want to save some information in an attribute so that I can use it when the button is clicked.
Is there any attribute in HTML button that I can store information to use it at some point?
You can create your own using the new data-* custom data attributes (see w3c specs). What comes at the * is up to you (as long as it is valid HTML of course):
<button id="x123"
data-some-attr="I like this"
data-what-about-this="I like it too"
/>
See the data-attributes, for example here you can find more info.
Example from linked page:
<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon">...</li>
HTML5 introduced the data- attribute just for this. So if you were to store a button number, you would call it data-callNum or something similar.
You can read more up on it here: http://www.w3schools.com/tags/att_global_data.asp
As a warning with JS, you can't just use the usual . to access the member, due to the - which will be interpreted as a minus operation. So instead of button.data-attr you have to do button.getAttribute('data-attr').
I have created but now when user add html formating in that text area with html codes like
<b>the codes are working </b>
they are showing up same as written, instead of "the codes are working "
so how do i enable that in simple HTML form.
Textarea cannot display any html structure. You should use <pre> tag, but if you want to edit in the same time, use contenteditable attribute.
<pre contenteditable="true"><b>the codes are working</b></pre>
I think that you are trying some editor. You can use CKEditor. Quirksmode.org also can be useful.
I've created a search box with a drop down that displays a certain tag of file type. The fiddle is here :
http://jsfiddle.net/Newtt/dKCQ5/
The ul contains the file tags that need to be searched.
My next step is to create a search by tag option where I'll be clicking on the file type and it'll appear as a search tag similar to the feature on the Evernote web app. More than help in code, are there certain resources that I can use to go forward with this?
Thanks!
You can have a look at this jQuery-Tags-Input library:
https://github.com/xoxco/jQuery-Tags-Input
There is a demo on their website:
http://xoxco.com/projects/code/tagsinput/
The markup is pretty easy too:
<input id="tags" value="dogs,cats" />
$('#tags').tagsInput();
Check out my JSFiddle.
I came across with an issue where RTF field in TRidion 2011 is removing HTML5 tags while saving component.
Issue:
Source snippet
<div>
<a class="arrow button" data-role="button" data-inline="true" href="www.google.com">Information</a>
</div>
Tridion is saving above snippet
<div>
<a class="arrow button" href="www.google.com">Information</a>
</div>
In short Tridion is removing HTML5 attribute while saving the component.
Please give some hint to resolve above issue.
For this you can extend the RTF field to allow HTML5 tags for this you have to specify these tags in a file TcmXhtml.Config at the path
[Tridion]\web\WebUI\Core\Controls\FormatArea\TcmXhtml .
Tridion uses XHTML to store rich text fields. Since the attributes you specified are not valid XHTML, Tridion removed them.
You can modify the list of attributes and elements allowed in the Rich Text Area (see Ram's answer) but keep in mind that you are now allowing these attributes to be used in all Rich Text Fields, and you have to consider the impact of this change to your whole environment. If you're doing this as a quick work-around a design limitation (which is what it sounds like) remember that EDITORS will have to do the same. Structure data shouldn't necessarily be in a RTF, and perhaps certain elements of your output should be handled by a template and not by an editor.
In the \Tridion\web\WebUI\Core\Controls\FormatArea\TcmXhtml\TcmXHTML.config file, update the tag "drop-proprietary-attributes" to be "false":
From: drop-proprietary-attributes: true
To: drop-proprietary-attributes: false
Restart the COM+ and clear the browser cache.
To answer my question, take a look at the following entry in our Knowledge Base:
http://tridion.kb.sdl.com/kb/?ArticleId=4065&source=Article&c=12&cid=19#tab:homeTab:crumb:7:artId:4504
Additionally, you can add other HTML 5 tags in the configuration file mentioned in the article above.
For example, if you wanted to stop the following tags from being removed, add:
new-blocklevel-tags: article aside canvas details figcaption figure footer header hgroup nav output progress section video
new-inline-tags: audio datalist mark meter summary time
new-empty-tags: command source track
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>