I tried some plugins but wasn't able to follow along.
Basically I want an iframe to add and preview podcasts and other things.
Is there any iframe block like youtube block which comes with grapesjs ?
To my knowledge, there is not a good grapesjs iframe plugin that already exists.
If your use-case is simple, you can just create your own iframe block that has the information you need:
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
blockManager.add('iframe', {
label: 'iframe',
content: '<iframe src="<your iframe src here>"></iframe>',
});
If you'd like an iframe component with a customisable src trait, for example, you'd do it like this:
var editor = grapesjs.init({...});
editor.DomComponents.addType("iframe", {
isComponent: el => el.tagName === "IFRAME",
model: {
defaults: {
type: "iframe",
traits: [
{
type: "text",
label: "src",
name: "src"
}
]
}
}
});
editor.BlockManager.add("iframe", {
label: "iframe",
type: "iframe",
content: "<iframe> </iframe>",
selectable: true
});
Here's a working codesandbox: https://codesandbox.io/s/grapesjs-o9hxu
If you need more customization options, you can learn how to create custom blocks and components using the docs:
https://grapesjs.com/docs/modules/Blocks
https://grapesjs.com/docs/modules/Components
https://grapesjs.com/docs/modules/Traits
Related
I'm tying to add code into a tinymce textarea and I'm planning to hightlight it using highlight.js
In order to to so, I just need to wrap the code between the tags <pre></pre> and highlight.js will do the rest.
I tried using the code plugin in tinymce, which opens a popup where the user can paste the code. But to my surprise it does actually nothing with that text. It only allows you to see the HTML code for it, which will basically just show the text between </p> tags.
I would prefer not to use codesample plugin because I just want to add the pre tag and do not apply any codesample styles to it. I do not want either to have a list of languages to select from or to treat the whole code text as a block that has to be removed in a whole.
Any ideas of how to do this?
If I understand your question you want a dialog where someone can paste in some HTML and you will wrap that in <pre> and </pre> tags as you insert the content into the editor.
There is not a plugin in TinyMCE that does precisely what you want. You are correct that the codesample plugin is more complex than that (it uses something called Prism.js to handle syntax coloring and highlighting).
You can do one of two things:
Look at how plugins like codesample and template create their dialogs (they use windowManager) and then you could make your own plugin that takes the user's input and wraps it in <pre> and </pre> tags as its inserted into the editor.
Add a toolbar button or menu item via the TinyMCE init and have that code open a dialog (via windowManager) and insert the content into the editor.
If you prefer the first option, using one of TinyMCE's existing templates as a starting point will save you a bit of coding time and show you a good example of how to use windowManager.
Here is an overly simply example of how you might use windowManager in the init:
tinymce.init({
...
setup: function (editor) {
editor.addButton('insertusername', {
text: 'Insert User Name',
icon: false,
onclick: function () {
var person = {
firstname: '',
lastname: ''
};
editor.windowManager.open({
title: 'Insert User Name - Custom Dialog',
body: [
{
type: 'textbox',
name: 'firstname',
label: 'First Name:',
value: '',
minWidth: 800,
value: person.firstname,
oninput: function() {
person.firstname = this.value();
}
},
{
type: 'textbox',
name: 'lastname',
label: 'Last Name',
value: '',
minWidth: 800,
value: person.lastname,
oninput: function() {
person.lastname = this.value();
}
}
],
onsubmit: function(e) {
// console.log('onSubmit called');
editor.insertContent('<span class="abc">'+ person.firstname + ' ' + person.lastname + '</span> ');
}
});
}
}
}
...
});
The upload tab of image2 plugin looks like this -
{
id: 'Upload',
hidden: false,
filebrowser: 'uploadButton',
label: lang.uploadTab,
elements: [
{
type: 'file',
id: 'upload',
label: lang.btnUpload,
style: 'height:40px',
onChange: function(evt){
alert('file uploaded');
}
},
{
type: 'fileButton',
id: 'uploadButton',
filebrowser: 'info:src',
label: lang.btnUpload,
'for': [ 'Upload', 'upload' ]
}
]
}
Here in the 'tab' details there is filebrowser field which is equal to 'uploadButton' and filebrowser field is also in UI element object where it is equal to 'info:src'.
I am not implementing Browse Server functionality, only upload functionality. I have implemented it but I want to understand how filebrowser plugin and filebrowser fields are facilitating it?
Can anyone here explain here a little bit in detail as CKEditor documentation does not tell much?
The ck_config.js file has settings which determine the URL of the file browser for various purposes:
config.filebrowserBrowseUrl = '';
config.filebrowserImageBrowseUrl = '';
config.filebrowserFlashBrowseUrl = '';
config.filebrowserUploadUrl = '';
config.filebrowserImageUploadUrl = '';
config.filebrowserFlashUploadUrl = '';
Basically this will be a webpage which appears in a roughly 600px-wide popup.
One of the GET parameters of this URL (automatically added) will be CKEditorFuncNum which determines the callback function for sending the results back to CK.
On selection of a file/path, you would typically do:
window.opener.CKEDITOR.tools.callFunction(ck_callback,pathrel2page);
where ck_callback is the CKEditorFuncNum value and pathrel2page is the selected file.
HTH.
I have a problem using the fancybox plugin with an iframe. My current setup is:
Load news articles in a bootstrap modal, which contains an iframe from another domain (from the news system) - so for example: i am on page.domain.com and load content from news.domain.com, where every news article is provided. So everything works great, but i have problem when ill try to open a fancybox gallery.
When i use the fancybox like this:
$('a.lightbox').fancybox({
openEffect: "none",
closeEffect: "none",
titleShow: 'true',
titlePosition: 'inside',
helpers: {
title : {
type: 'inside'
},
thumbs : {
width: 90,
height: 60
}
},
beforeLoad: function() {
this.title = $(this.element).find('img').attr('alt');
}
});
The fancybox opens on every item with class lightbox, and everything looks fine. But in the iframe, it get opened inside the iframe. But i want to open the gallery outside, in the parent window.
So normally i use:
parent.$.fancybox({
But now, i am loosing the 'a.lightbox' selector. So i would need to manually push the items like this:
beforeLoad: function () {
// here i need to read out all images in the same group, and push it modally
this.group.push(
{ href: "... image1", type: "image", title: "Picture 01", isDom: true },
{ href: "... image2", type: "image", title: "Picture 02", isDom: true }
);
}
But i dont think that is a good option for me.
Is there an better way how to open a fancybox in the parent window, using the standard $('a.lightbox').... selector?
I have been working on developing a custom extjs console to enable author drop an asset using html5smartfile component. But somehow, the html5smartfile component is not working the way it should. The Area where an author can drop an asset is not displaying. The same is working fine if I am creating a CQ5 dialog. But in my case where i have created a window it's not working.
I have declared my smartfile component like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false
};
But this is rendering like this:
After a lot of work, I found out that the CQ5 dialog updates the view for the component but in case of my window, I have to update it myself. Thus, with a slight manipulation, i just succeeded in displaying the drag area by tweaking the declaration like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false,
listeners: {
afterlayout: function () {
this.updateView();
}
}
}
So now the panel looks like:
But still the Drag and Drop is not working. My Window declaration is like this:
win = new CQ.Ext.Window({
height : 750,
width : 700,
layout : 'anchor',
// animateTarget : btn.el,
closeAction : 'close', // Prevent destruction on Close
id : 'manageLinkWindow',
title : '<b>Multi Link Widget Dialog</b>',
frame : true,
draggable : false,
modal : false, //Mask entire page
constrain : true,
buttonAlign : 'center',
items : [assetLinkDropField]
});
}
I think you should not use
ddAccept: 'video/.*',
This allows only videos from the content finder to be dragged and dropped. It should be "image/".
Verify your other extjs properties / configs for html5smartfile if the above doesn't resolves your problem.
I have an iframe within one of my webpages. It points to another page on the same domain. I've been trying to make the elements draggable within it and I'm having trouble. I got it working last night but make some changes before saving that version and now can't figure out how I had it before so I know it can be done. I have the iframe highlighting elements right now but when I put the code to drag and drop in as I had it before, it doesn't work. The code in the main page is:
function init() {
var $head = $("#myframe").contents().find("head");
$head.append($("<link/>", { rel: "stylesheet", href: "http://ajax.googleapis.com /ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css", type: "text/css" }));
$head.append($("<link/>", { rel: "javascript", href: "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js", type: "text/javascript" }));
$head.append($("<link/>", { rel: "javascript", href: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js", type: "text/javascript" }));
$head.append($("<link/>", { rel: "stylesheet", href: "my_styles.css", type: "text/css" }));
}
function iframeLoad() {
$head.append($("<link/>", { rel: "javascript", href: "my_js.js", type: "text/javascript" }));
}
My code for the jquery to drag and drop is:
$(document).ready(function() {
$("p").draggable();
});
$(document).ready(function() {
$("h1").draggable();
});
$(document).ready(function() {
$("div").draggable();
});
The url is: http://johnverber.com/Opti/url.html in case you want to see it.
Not a full answer to your question but can't do code examples in comments clearly. You can clean up that last bit, you don't need to check if the DOM has loaded 3 times. Combine it into one:
$(document).ready(function () {
$("p,h1,div").draggable();
});
Looks like you are creating 'link' tags for your js files when it should be 'script' tags.