$('.code').each(function() {
var $this = $(this),
$code = $this.html();
$this.empty();
var myCodeMirror = CodeMirror(this, {
value: $code,
mode: 'htmlmixed',
lineNumbers: false,
readOnly: true,
lineWrapping: true
});
});
I'm using codemirror to create code snippets. I'm having two issues. The first is that javascript isn't being colored properly. I've included all the dependencies (xml, css and js). The second is that when I hover over the , scrolling causes the snippet to move slightly up or down. It isn't quite scrolling, just wiggling. See image for more details.
All help would be greatly appreciated.
$('.code).each(function() {
var $this = $(this),
$code = $this.html(),
$unescaped = $('<div/>').html($code).text();
$this.empty();
CodeMirror(this, {
value: $unescaped,
lineNumbers: true,
theme: "neo",
readOnly: "nocursor"
});
});
This was working fine for me
Related
I'm trying to add <style>// custom css here</style> into the tiny mce editor but currently it deletes the style tags and anything in between them on save.
I am trying to set valid_elements: "style" and/or custom_elements: "sabioStyle", and/or extended_valid_elements: "style". I've also tried: "[]" according to tiny's docs but it seems to have no effect on anything. I see that the init function:
piranha.editor.addInline = function (id, toolbarId) {
tinymce.init({
selector: "#" + id,
browser_spellcheck: true,
fixed_toolbar_container: "#" + toolbarId,
menubar: false,
branding: false,
statusbar: false,
inline: true,
convert_urls: false,
plugins: [
piranha.editorconfig.plugins
],
width: "100%",
autoresize_min_height: 0,
toolbar: piranha.editorconfig.toolbar,
extended_valid_elements: piranha.editorconfig.extended_valid_elements,
block_formats: piranha.editorconfig.block_formats,
style_formats: piranha.editorconfig.style_formats,
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { text: data.filename });
}, null);
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { alt: "" });
}, "image");
}
}
});
$("#" + id).parent().append("<a class='tiny-brand' href='https://www.tiny.cloud' target='tiny'>Powered by Tiny</a>");
};
Piranha uses sets extended_valid_elements: piranha.editorconfig.extended_valid_elements but my dev tools are not showing the value that I type in editorconfig.json...
editorconfig.json
devTools
I've tried everything their docs say, I have a question open on github with Piranha as well.. Any suggestions would be great! Thanks
See the complete answer here: https://github.com/PiranhaCMS/piranha.core/issues/1663
I'm having some trouble getting codemirror to apply the correct autoindentation to inner modes in a mixed mode.
You can see a live version of the mode (and how it's not working) here:
https://extremely-alpha.iodide.io/notebooks/216/ but in short the idea is to be able to use matlab style block delimiters to switch between languages like this:
%% js
[1,2,3].forEach(i => {
console.log(i)
})
%% py
for i in range(5):
for j in range(10):
print i+j
%% css
div#foo {
border: 1px solid pink
}
As you can see from my example link, the syntax highlighting works ok, but you'll also notice that the indentation is not working as desired.
The code for this codemirror mode is here on github. It is very much based on codemirror's html mixed mode.
I tried adding copyState to my code, again following the html mixed mode --
copyState: state => {
let local;
if (state.localState) {
console.log("state.localState copied");
local = CodeMirror.copyState(state.localMode, state.localState);
}
return {
token: state.token,
localMode: state.localMode,
localState: local
};
},
-- but this results in a different kind of weird indentation behavior, and doesn't end up working.
I've been banging my head against this for quite some time, and I haven't been able to piece it together via google, api docs and forums, so any help would be greatly appreciated! Thank you!
in case anyone comes across this problem in the future: it turns out codemirror modes do not typically come with sensible defaults built in, or at least they are not loaded by default when you use CodeMirror.getMode(...). In my case, I had to change from
const innerModes = {
js: CodeMirror.getMode({}, { name: "javascript" }),
py: CodeMirror.getMode({}, { name: "python" }),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({}, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
to:
const innerModes = {
js: CodeMirror.getMode(
{ indentUnit: 2, statementIndent: 2 },
{ name: "javascript" }
),
py: CodeMirror.getMode(
{ indentUnit: 4, hangingIndent: 4 },
{ name: "python" }
),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({ indentUnit: 2 }, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
This prevented NaNs from getting passed out of the indent function of the sub-modes.
I'm copying instagram embed code in tinymce source code and i can see the block of instagram but couldn't able to see the image. Please help me fix this issue
The problem is that when you add the embed code to tinymce. The code gets rendered in an iframe and the source code does not execute. The best approach in this case is to add a popup to take the embed code, extract the src from it and append it to the head of the iframe. This way the source code will execute and you will get a rendered html.
var editor_id = "";
tinymce.PluginManager.add('instagram', function(editor, url) {
// Add a button that opens a window
editor.addButton('instagram', {
text: 'Instagram',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Instagram Embed',
body: [
{ type: 'textbox',
size: 40,
height: '100px',
name: 'instagram',
label: 'instagram'
}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
var embedCode = e.data.instagram;
var script = embedCode.match(/<script.*<\/script>/)[0];
var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
var sc = document.createElement("script");
sc.setAttribute("src", scriptSrc);
sc.setAttribute("type", "text/javascript");
var iframe = document.getElementById(editor_id + "_ifr");
var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
tinyMCE.activeEditor.insertContent(e.data.instagram);
iframeHead.appendChild(sc);
// editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
tinymce.init({
selector:'textarea',
toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
plugins: "wordcount fullscreen link image code preview media instagram",
menubar: "",
extended_valid_elements : "script[language|type|async|src|charset]",
setup: function (editor) {
console.log(editor);
editor.on('init', function (args) {
editor_id = args.target.id;
});
}
});
Refer the JSFiddle - https://jsfiddle.net/z3o2odhx/1/
You can add the embed html from the Instagram toolbar button and get the rendered html, but this also messes the source code. Hope this is helpful.
Alternatively, if you have the option of adjusting the html of the page, you can just add <script async defer src="//www.instagram.com/embed.js"></script> somewhere on that page, since it looks like TinyMCE is stripping the js include.
If you want to selectively include it, you can also use something like this in that page's js:
if($(".instagram-media").length) {
var tag = document.createElement('script');
tag.src = "//www.instagram.com/embed.js";
tag.defer = true;
tag.async = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
TinyMCE changed a bit in the last version (v5) - here is updated version of working Ananth Pais' solution:
tinymce.PluginManager.add('instagram', function(editor, url) {
editor.ui.registry.addButton('instagram', {
text: 'Instagram',
onAction: function() {
editor.windowManager.open({
title: 'Instagram Embed',
body: {
type: 'panel',
items: [
{
type: 'textarea',
height: '300px',
name: 'instagram',
label: 'Instagram embed code',
}
],
},
buttons: [
{
type: 'submit',
name: 'submitButton',
text: 'Embed',
disabled: false,
primary: true,
align: 'start',
}
],
onSubmit: function(e) {
var data = e.getData();
var embedCode = data.instagram;
var script = embedCode.match(/<script.*<\/script>/)[0];
var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
var sc = document.createElement("script");
sc.setAttribute("src", scriptSrc);
sc.setAttribute("type", "text/javascript");
var iframe = document.getElementById(editor_id + "_ifr");
var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
tinyMCE.activeEditor.insertContent(data.instagram);
iframeHead.appendChild(sc);
e.close();
}
});
}
});
});
tinymce.init({
selector:'textarea',
toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
plugins: "wordcount fullscreen link image code preview media instagram",
menubar: "",
extended_valid_elements : "script[language|type|async|src|charset]",
setup: function (editor) {
console.log(editor);
editor.on('init', function (args) {
editor_id = args.target.id;
});
}
});
https://www.tiny.cloud/docs/configure/content-filtering/#usingextended_valid_elementstoallowscriptelements
by default tinmye prevent script codes.
enable them on tinymce options
extended_valid_elements : 'script[src|async|defer|type|charset]'
I have little problem with Media Uploader in new WordPress 3.5. I created own plugin which is upload the picture. I'm using this code JS:
<script type="text/javascript">
var file_frame;
jQuery('.button-secondary').live('click', function( event ){
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
jQuery('#IMGsrc').val(attachment.url);
});
file_frame.open();
});
</script>
The code works fine, but unfortunately forms appears incomplete. When I select any picture doesn't show me 'Attachment Display Settings' on right side. I don't know why. I try add options to media:
displaySettings: true,
displayUserSettings: true
But it also doesn't work.
Does the page have the <script type="text/html" id="tmpl-attachment-details">... template in the source? If not, you'll need to call wp_print_media_templates(), to write the styles from wp-includes/media-template.php
This is the code I use. Source: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/ It seems to work pretty well, but the sidebar on the left is missing. (Intentional, but I don't want it anyways).
<?php wp_enqueue_media(); ?>
<script>
function showAddPhotos() {
// Uploading files
var file_frame;
// event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
}
</script>
I would like to build bxslider with pagination in the format of getCurrentSlide / getSlideCount. Something like here.
my html code:
<ul class="bxslider">
<li>...</li>
...
</ul>
<div class="counter">1 / 10</div>
JS code:
jQuery('.bxslider').bxSlider({
pager: true,
auto: false,
controls: true
});
I assume, i need to use getCurrentSlide / getSlideCount, but i didn't find any examples.
Any help, would be appreciate. Thank you!
bxSlider has short pager ;)
$('.bxslider').bxSlider({
pager: true,
pagerType: 'short'
});
you can do it like this;
slider = $('.bxslider').bxSlider({
nextSelector: '.next-slide',
nextText: '>',
prevSelector: '.prev-slide',
prevText: '<',
mode: 'fade',
captions: false,
auto: true,
autoControls: false,
onSlideAfter: function(){
$('.slide-number').text((slider.getCurrentSlide()+1)+'/'+slider.getSlideCount());
}
});
Append this code within your header
<script>
(function ($) {
//bxslider
function insertCount(slide_curr, slide_count) {
$('#slide-counter').html('<strong>' + (slide_curr + 1) + '</strong>/' + slide_count);
};
var slider = $('.bxslider').bxSlider({
auto: true,
pager: false,
captions:true,
onSliderLoad: function () {
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr, slide_count);
},
onSlideNext: function () {
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr, slide_count);
},
onSlidePrev: function () {
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr, slide_count);
}
});
})(jQuery);
</script>
add just after the close ul().You are done and should display the total and current index hope this helps.
solution Instruction and Demo can be found here