I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
Related
my question on the picture. In VSCode i have simple problem, when i write some tags in HTML file i have blur selection in string beggining. I tried to get back default settings, but it couldn't help.
<div class="hh1">
</div>
<div class="hh2">
</div>
<div class="hh3">
</div>
As per the comment, uninstalling the indent-rainbow extension looks like it will remove this
As in the photo above, I would like to get rid of the scroll bar along with the history of all the likes and reblogs which are located once you click on the photo on my blog. Where would I locate this in the custom CSS on tumblr and which code would I use?
I have been looking at this code, but not sure where to go next.
{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=250px/></div>{LinkCloseTag}
<ul class="like_and_reblog_buttons">
Thank you.
OK, so in the template on line 408 I simply wrapped the notes component in html comments so they don't get rendered in the browser.
Simply changing:
{block:PostNotes}
</center></center>
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
To:
<!--
{block:PostNotes}
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
-->
Full html template saved here: https://pastebin.com/yva5npcW
I've also removed the redundant
</center></center> that tag is obsolete:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Nothing is being rendered in those erroneous tags.
Before:
After:
I'm using template plugin for inserting html snippets. For example:
<a class="button" href="#"><span class="button-inner"><span class="button-label">Button Text</span></span></a>
Everything goes fine until editor tries to change button's text and exit its html to add some more text after. The caret doesn't leave the A tag and stops within spans or before closing A tag. So in the end we get something like this:
...Button Text</span> some more </span> text here </a>
It breaks the layout completely.
Is there a way to mark the link as single solid block or spans as non-enterable with some attributes to prevent inserting text within unexpected places?
You use the contenteditable="false" attribute to make a portion of your HTML non-editable. Here is an example:
http://fiddle.tinymce.com/Zxgaab
I changed your link HTML to this:
<a contenteditable="false" class="button" href="#">
<span class="button-inner">
<span class="button-label">
Button Text
</span>
</span>
</a>
It will act like a single character in the editor...
I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.
I would like to have something similar to this.
How can I set it up?
You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/
You will then need to edit the photoset code in your theme to something like this:
{block:Photoset}
<div class="photo">
{block:Photos}
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:Photos}
</div>
{/block:Photoset}
And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.
{block:Photo}
<div class="photo">
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
<div class="caption">
{Caption}
</div>
{/block:Photo}
Add a link to the Pirobox js file in the "head" of your theme.
<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>
Add this before the "head" or preferably in the "body" section near your other scripts.
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.
Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.
Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.
I'm trying to use datepicker from bootstrap (http://eternicode.github.io/bootstrap-datepicker/) and everything works fine except none of the glyphicons are showing up.
I saw that glyphicons are moved to another directory under bootstrap 3 (http://glyphicons.getbootstrap.com/) which is what I'm using, but I wasn't sure how I can integrate it.
Both
<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">
And
<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly/>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Didn't work.
Anyone knows how I can integrate bootstrap 3 with the twitter datepicker?
Download the plugin's source code Javascript and CSS (or less) and replace old class references to new, see: http://www.bootply.com/bootstrap-3-migration-guide.
B.e. as mentioned by PilHA replace icon-* with glyphicon glyphicon-*, input-append with input-group etc.
Do the same for your HTML code. Or use a migrator/updater like: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ or http://code.divshot.com/bootstrap3_upgrader/
Install Glyphicons from http://glyphicons.getbootstrap.com/: download the files and copy over all the font files to a /fonts directory near your CSS. Include the compiled CSS file from the /css in the repository to your local css folder or download the Less file and compile it with your Bootstrap files.
update Glyphicons are back since RC2. Twitter's Bootstrap 3 includes 180 glyphs in font format from the Glyphicon Halflings set.
In addition to changing the class references, I found there to be some layout considerations disallowing a one-to-one swapping of certain classes, such as span2 on the input control. I ended up with the following:
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">My Label</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
CSS changes in datepicker.css on lines 176-177:
.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {
Javascript change in datepicker-bootstrap.js on line 34:
this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;
I also wrote up a blog post going into more detail here: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
download bootstrap3 from here Download
Now unzip it and get font from font folder .
Copy this .ttf , .otf ,.svg and other file and paste # your project root
And You can download glyphoicon.css from here glypho.css
include this css file in index file
Thats done
I wasn't able to change my glyphicons initially and in the F12 dev tools I could see an error trying to load the "glyphicons-halflings-regular.woff2". I was able to fix it by downloading the .woff2 file and adding it to my fonts folder. Then I was able to change to what I wanted.
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2