How to load image in ckeditor by relative path - javascript

I am using CKeditor to preview an HTML template at some location outside the web application, say C:/editor/template and the images used by this html template at C:/editor/template/images.
when I open this template in ckeditor, the html template loads but without images. However if I open this html directly in browser I can see those images. How can we load these images in CKeditor?

Perhaps it is related to the Advanced content filtering.
Look for what attributes are in your img tag and explicitly allow those.
Or allow all attributes in the img tag with this config:
var myCkeditor = CKEDITOR.replace(editorId, {
extraAllowedContent: 'img(*){*}[*];'
}

Related

How do you hide titleBar in Electron when NOT using index.html

so almost all the answers on the web dealing with hiding title bar assume that you're loading a local HTML file onto your app. But what if you're using mainWindow.loadURL("https://google.com") instead of loading a local index.html file? I'm not sure where you'd add the -webkit-app-region: drag property in this case. Does anyone know how to hide title bar while keeping it draggable when loading an external url in the browser window instead of loading an html file?

Get all HTML, CSS and Media content from a loaded web page

I'm writing a Chrome Extension and I would like to get all HTML, CSS and images/media content from the currently loaded web page.
If I use document.documentElement.innerHTML it gives me all of the HTML code as expected but has links to the CSS and image files.
Is it possible to get the entire loaded web page contents or would this only be possible using a scraper?

CKEditor display formatted(with CKEditor CSS) HTML from database

This is my first post so I would like to say it's nice to join this community and I will do my best to help others but I'm the one that needs help right now.
--Problem
I've got problem with displaying proper styling of text retrieved from CKE with .getData(), saved into DB and displayed in article.
--When it works?
When I include this CSS:
<link rel="stylesheet" href="\js\ckeditor\contents.css">
in my base.html.twig <head> tag,this changes the css of the site.
--What do I need to do?
What I need to do to avoid conflict? or is there any method to render text without making it editable? Something like CKEDITOR.render(tagId)
--Some images:
With Regards
Wiktor
Please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
If you are using classic CKEditor then its contents are held inside an iframe with a separate document. In order to style that internal document CKEditor attaches contents.css to it. Since internal styles in separate CSS files are not being saved together with HTML or merged into HTML it is important that you use same styles inside contents.css as you would like to see on your target page (where saved content will be used).
This is not CKEditor bug but simply a different approach you need to apply inside your application.
If you are creating content for different pages you can either create one large contents.css file or, in case of any styles conflicts multiple CSS files which you can load dynamically based on some logic (it will require writing some code to handle that) using contentsCss setting. Please note that in case of dynamic CSS switching you do not want to use contentsCss inside config.js file but directly in instance configuration on HTML page where you can use server-side tags to "spit out" correct configuration for CKEditor instance e.g.
var editor = CKEDITOR.replace( 'editor1',{
language : 'en',
// other configuration settings
// ...
contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ]
}
You can use server-side tag which will return whole editor configuration or simply only this part contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ] or even correct file paths when HTML is being rendered.

Add javascript to iframe and execute it

I'm trying to do the following. Say I have html file and it contains blank iframe within it
<iframe id="preview"></iframe>
Now I need to write a script to update content of that iframe
var preview=document.getElementById("preview");
preview.src = 'data:text/html;charset=utf-8,' + HTML_CODE_HERE;
Problem occurs when that code contains external CSS or javascript files, they just appear to not parse / execute.
How can I make iframe reload and re-run HTML parser for it's content?
Two things.
1.Why is the src of your iframe, an entire HTML page?Shouldn't you be creating an HTML page, say page1.html, and referring to that in your src?
2.You might be facing problems with external paths and CSS because the path that is given when the iframe is displayed.
3.For reloading an iframe, check this StackOverflow link.

CKeditor with a url-prefix for image tags

I am using CKeditor to allow users to add images to their textboxes in a CMS.
A possible scenario is this: I develop a new site for a customer at http://developer.com/customer/a. The base url is "/customer/a". But when I ship the finished site to their domain www.customer-a.com, base url is changed to "/" and all image links are broken.
I would like to CKEditor to save something like {base_url}/media/my-image.jpg, but still keep all the WYSIWYG-features of CKeditor. Is there a hook or event in CKeditor where I could replace for e g {base_url} before the html i viewed?
I would appreciate any hints.
The hard way would be to use CKEditor's html parser and traverse whole html text when its loaded into editor and check/correct url of img tags.
Second option, although im not sure if it can be applied on your case, would be to make all images dependant on CKEDITOR.basePath and determine just that when CKEDITOR is initializing.
Or just develop on http://developer.com/customer/a, but let images be placed on www.customer-a.com even for development :)

Categories

Resources