I am trying to add Font Awesome support to Ckeditor5-inline and it just removes the "i" tags from HTML when I go in Edit mode.
First download font awesome if you haven't already then
1. Extract the downloaded file (fontawesome.zip) Copy the "fontawesome"
2. folder to "ckeditor/plugins/" folder Open the file
3. "ckeditor/config.js"
configure that like this and clear your browser's cache
config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;
In your HTML's section add this code:
<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
after that you can Use toolbargroupname: "FontAwesome" in your toolbar like this
config.toolbar = [
{ name: 'insert', items: [ 'FontAwesome', 'Source' ] }
];
as you commented your are using Django Integration in Django CMS
Django CMS enables adding text-based content to a site using CKEditor which is integrated through the module called djangocms_text_ckeditor. In that module is a static folder and settings.py file, which are setup in a manner that enables fully customizing CKEditor.
you can check here for Django Integration
Related
My main goal is to inject a tag into my index.html only in production (it's a New Relic monitoring code snippet).
My Vue.js is built and served as a static resource, so using {% %} tags to surround the script block with a condition doesn't seem to work in this use case.
So I tried to add the New Relic code snippet on my Vue.js app using html-webpack-plugin, since I found a simple Webpack plugin using on html-webpack-plugin. It's a pretty simple plugin, it just create the node and pushes it in the page body : https://github.com/robrap/html-webpack-new-relic-plugin/blob/master/src/index.js#L25
I register the plugin by setting my vue.config.js this way (I first tried to add the script no matter the environment) :
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackNewRelicPlugin = require('#yodatech/html-webpack-new-relic-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackNewRelicPlugin({the plugin options})
]
}
}
The plugin actually does its job well (the code snippet is injected), but its execution messes up with Vue CLI default configuration.
Some stylesheets and scripts aren't referenced anymore in the final index.html file, the <div id=app></div> is not there anymore, the app is broken.
I don't know if using HtmlWebpackPlugin is a dead end, but I currently don't know any other way to reach my goal.
Has anyone an idea on how I could make this work ?
Thanks a lot to anyone passing by.
EDIT : The plugin I was trying to use seemed to be flawed, I had to modify it to make it work with Vue CLI. My main problem has been solved by the selected answer.
vue.config.js option configureWebpack just merges the options you provide to a webpack config provided by Vue CLI. So by using your code, you are running 2 distinct HtmlWebpackPlugins (one from your config and one default from Vue CLI)
Try this instead:
var HtmlWebpackNewRelicPlugin = require('#yodatech/html-webpack-new-relic-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackNewRelicPlugin({the plugin options})
]
}
}
I have defined wdio.conf.js file (main file) and environment specific dev-chrome.conf.js file.
I can't get get cucumber to recognize my step definitions folder.
This is my structure:
And this is what I have in dev-chrome.config.js file:
const wdioConfig = require('../../../../../wdio.conf.js');
const commands = require('../../../../../src/commands/commands');
wdioConfig.config.cucumberOpts = [{
// other stuff here
require:
[
'./src/step_definitions/**/*.js',
// Or search a (sub)folder for JS files with a wildcard
// works since version 1.1 of the wdio-cucumber-framework
//'./src/**/*.js',
],
// other stuff here
}];
exports.config = wdioConfig.config;
I am getting an error:
"Step "When I add the product to a cart" is not defined. You can ignore this error by setting cucumberOpts.ignoreUndefinedDefinitions as true."
When I have same path for step definitions defined on main wdio.conf.js file then it works.
My main wdio.conf.js file is located in the root folder of the project.
Do you know how could I make it work in the environment specific conf.js file?
I am using #wdio/cucumber-framework": "^5.13.2"
As per the below example config, the cucumberopts should be an object and I think you are trying to set it as an array.
https://github.com/amiya-pattnaik/webdriverIO-with-cucumberBDD/blob/master/test/config/suite.cucumber.conf.js#L156
Maybe you should follow this example which will help to understand config setup.
Cheers!
I have a problem, I have already generated OpenApi Swagger files (swagger.json and swagger.yaml) Is it possible somehow in Ktor (kotlin) import this files and start swagger-ui server on specific route ?
I have visited ktor-swagger project but could get how just to add json file to display swagger-ui.
Any suggestions ?
Make you json file accessible from static routing
Create "files" directory in resources dir
Use next code to routing static files from "files" dir
routing {
static("/static") {
resources("files")
}
//...
}
Lets name json file "test.json", then put you it in "files" folder
so now you run the app and see this file by http://localhost:8080/static/test.json
Then we need to install and configure OpenApiGen
Add OpenApiGen dependencies you can find how to do this here https://github.com/papsign/Ktor-OpenAPI-Generator
Then use the following code
install(OpenAPIGen) {
serveSwaggerUi = true
swaggerUiPath = "/swagger-ui"
}
now you can use http://localhost:8080/swagger-ui/index.html?url=/static/test.json URL to see your file through the swagger UI
Also, you can provide your own route to using redirection
get("/api") {
call.respondRedirect("/swagger-ui/index.html?url=/static/test.json", true)
}
this will allow you to use just http://localhost:8080/api
I have a audit table and audit_report field.Field type is text .I saved pdf files into folder and saved name to database.I tried to display the pdf on view page. but the box with image sign only getting. I could display jpeg and png files nicely.How to display PDF on view page of yii2 framework.
This would work,
return Yii::$app->response->sendFile($completePath, $filename, ['inline'=>true]);
Input the function with third param as array of value 'inline'=>true to open the file within the browser window.
See the documentation here sendFile()
You could add a button that opens the file in a new tab, but make it link to an action in your controller that returns the file instead of the direct path to the file:
In your view:
<?= Html::a('PDF', [
'controller/pdf',
'id' => $model->id,
], [
'class' => 'btn btn-primary',
'target' => '_blank',
]); ?>
In your controller:
public function actionPdf($id) {
$model = ModelClass::findOne($id);
// This will need to be the path relative to the root of your app.
$filePath = '/your/file/path';
// Might need to change '#app' for another alias
$completePath = Yii::getAlias('#app'.$filePath.'/'.$model->fileName);
return Yii::$app->response->sendFile($completePath, $model->fileName);
}
Aliases - Key Concepts - The Definitive Guide to Yii 2.0
Although the question has been answered there is one thing that needs to be addressed if you have the file content/stream instead of the file path, like for instance you are using Dropbox API and you receive a stream from the API and want to display that file instead of forcing the browser to download.
For this case you can use the sendContentAsFile when attempting to display the PDF file in the browser you will need to specify the mimeType option too along with the "inline"=>true because the default mimeType value is set to application/octet-stream which is used to download a file and to display inline in browser you need to change it to application/pdf.
return Yii::$app->response->sendContentAsFile(
$fileContent,
$filename,
['inline' => true, 'mimeType' => 'application/pdf']
);
In one of my views I would like to display a PDF, which is accesible via URL. This should be done without opening an extra tab in the browser, and without downloading the PDF (to view it outside the browser). It should be visible embedded within the Ember application.
What I have in mind is:
Use the URL to get the PDF and make it accessible to the ember application.
Use a special "PDF view" to display the PDF.
Is this possible? What options do I have to display an embedded PDF in an Ember application?
Displaying a PDF is not really related to ember, because to view a PDF you need a PDF plugin installed in your browser (which is mostly installed by default depending by the browser).
That said, a possible solution I could imagine could be to create a custom ember view with the tagName iframe on which you set the src attribute to the link referring to the PDF.
Example:
App.PDFView = Ember.View.extend({
tagName: 'iframe',
attributeBindings: ['src', 'width', 'height', 'frameborder'],
src: 'pdffile.pdf',
width: 800,
height: 600,
frameborder: 0
});
I've also used width, height and frameborder only for convenience so you can control some of the iframe's attributes easily from within ember. Here a working demo.
You can also go with something more elaborated and use a js lib like http://pdfobject.com/ which you then initialize in your view's didInsertElement hook:
App.PDFView = Ember.View.extend({
src: 'pdffile.pdf',
width: 800,
height: 600,
didInsertElement: function() {
new PDFObject({
url: this.get('src'),
width: this.get('width'),
height: this.get('height')}
).embed(this.get('elementId'));
}
});
(haven't tested the latter, but you get the point)
And then use this App.PDFView like a normal ember view in your templates.
{{view App.PDFView}}
Or your can set the src, width & height directly from within your template like
{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}
Hope it helps.
You can certainly leverage the Ember PDFJS Addon by doing:
ember install ember-pdfjs
The README on GitHub describes the installation and use cases.
In short, the addon provides your Ember project with a component, pdf-document, which you can use in your HTMLBars template like so:
{{pdf-document src=[model.src]}}
... there are other permutations of what src can be (including a string file path, resource URI, or Uint8Array buffer).
If you don't see a feature that you need, please suggest in the Issues.