in ckeditor5 by cdn to include ckeditor.js
I would like to change entermode that instead of ?
is it possible?
Thanks
If you wnat to use <BR> as change line code in CKeditor 5, then just use "Shift+Enter" can make it happen.
Here is the code if you still want to make <P> display likes <BR> one's:
p {
margin: 0;
}
Seriously, I got same problem like your's......then I found Shift+Enter.
You could handle the enter event and make it trigger shiftEnter instead.
editor.editing.view.document.on(
'enter',
( evt, data ) => {
editor.execute('shiftEnter');
//Cancel existing event
data.preventDefault();
evt.stop();
}, {priority: 'high' });
source: https://github.com/ckeditor/ckeditor5/issues/1141#issuecomment-403403526
What I did in PHP is the following:
$replaceClosingTag = str_replace('</p>', '<br>', $_POST['message']);
$emailMessageText = str_replace('<p>', '', $replaceClosingTag);
I replaced the closing tag with a <br> and the opening tag with an empty space.
It is dirty but it worked for me. Probally with javascript you can do something similar.
And for the editor margin style I used this:
.ck.ck-editor__editable_inline p {
margin-bottom: 0;
}
Because I use a CDN and this overrides that class.
The question is 2 years old but hopefully this helps for someone in the future.
For anyone using Vue looking to achieve this, adding Ramast's solution as a plugin to editorConfig worked for me (following the instructions here: https://github.com/ckeditor/ckeditor5-vue/issues/58)
Related
I just want to keep the drag event of seekbar, and I don't want users to click on it to adjust the video schedule.
I've tried to do this:
this.player.controlBar.progressControl.seekBar.disable()
this.player.controlBar.progressControl.seekBar.handleClick = () => {}
But none of this is helpful.
Please help me. I've tried my best.
Using only CSS, putting these 3 lines in your html seems to solve it:
<style>
.video-js .vjs-progress-holder .vjs-play-progress { display: none; }
</style>
myPlayer.controlBar.progressControl.disable();
this worked for me.
In my AngularApp i will show the User the current Workflow, by using the REST API.
No Problem so far, usnig:
GET /process-definition/{id}/xml
and the
bpmn.io Viewer.
But it's possible to highlight the current Task or get the special Instance of the Workflow, with highlight the current Task?
Thank you for your help.
1. Get actual the task
The call http://localhost:8080/engine-rest/task/?processInstanceId=<processInstanceId> return a json with the taskDefinitionKey.
https://docs.camunda.org/manual/latest/reference/rest/task/get-query/
2. Style the task
You can add a style class and so highlight a task.
viewer.importXML(diagramXML, function() {
var canvas = viewer.get('canvas');
canvas.addMarker('<<TaskId>>', 'highlight');
});
CSS for the color:
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: green !important; /* color elements as green */
}
The example is from https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors#adding-colors
thanks for helping me out. To make it work as you described, you have to change the ViewEncapsulation to ViewEncapsulation.None in the Angular.ts file.
I'm using RDiscount to convert Markdown to html in my application. Actually when I add some code in my markdown it generates code and pre tags but I want to add a class to the code tag how can I do this ? I need to parse generated HTML with Nokogiri or something like this ?
Rdiscount does not seem able to do this on its own. Parsing the result (with Nokogiri or whatever) might do the trick, but could be expensive. If you can, switch to another lib, like Redcarpet for example. This one lookes like it can be extended quite easily to fit your needs
One thing is sure, you can't tell Rdiscount to do it, it has no option for it. I looked at Rdiscount source code and this is what I end up in the file generate.c:
static void
printcode(Line *t, MMIOT *f)
{
int blanks;
Qstring("<pre><code>", f);
for ( blanks = 0; t ; t = t->next ) {
if ( S(t->text) > t->dle ) {
while ( blanks ) {
Qchar('\n', f);
--blanks;
}
code(f, T(t->text), S(t->text));
Qchar('\n', f);
}
else blanks++;
}
Qstring("</code></pre>", f);
}
No option to add any class to code and pre.
If you need to add a class to format the markup, maybe you can try a workaround and generate a div with a class before the
<div class="myclass">
<pre><code>
Is it feasible for you?
I tried to do a layout using dijit in dojo (1.7.2), but the result did not looks like the way I intended.
My first attempted is trying a declarative style from some example (here http://pastebin.com/Uy0pFmn3), which worked fine. Then I tried to convert it to programatic style (here http://pastebin.com/qRWUQsQN ), but it only showed the layout that created last.
Did I do misunderstanding how the dijit's layout works or just some minimal overlook here ?
thanks
You must add CSS styles:
html, body {
height: 100%;
width: 100%;
}
and for BorderContainer:
style="height:100%; width:100%"
EDIT: ok I got it. I guess I cannot use new ContentPane but instead, new dijit.layout.ContentPane (So here the finalize version http://pastebin.com/eYfeQUd8). The weird, "show only last layout" cause by my weird CSS stuff.
One thing that puzzled me is that why new ContentPane did not work ? As far as I recall, some example did like this
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer) {new BorderContainer //STUFF//}
I see the problem here..
In your pastebin code you are missing do declare the function paramter like the below example...
Your modified code:
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer, TabContainer, ContentPane ) {
var appLayout = new BorderContainer({"design": "headline"}, 'appLayout');
Also the order of the require paramters should match inside the function parameters also ..
Waseem Ahmed V
I want to add dijit.Editor after clicking on element.
dojo.ready( function() {
var handle = dojo.connect(dojo.byId("k"),"onclick",
function(){
dojo.byId("k").innerHTML +=
"<div data-dojo-type=\"dijit.Editor\" id=\"editor\" style=\"width:400px;min-height:100px;background-color:white;border-style:solid;border-width:1px\" > </div>";
dojo.disconnect(handle);
}
);
});
In general this code works but dijit.Editor is malformed, one cannot write in it and there are no default plugins. How can I fix this?
Is this for inline editing ? Because if so, you should follow the examples on this page.
Othewise, you should do something like this rather than creating html in javascript.
I believe inlineEditBox is better fit to your need.
Also more generally, you add declarative code, in an onClick, after dojo.ready.
Basically it means that the html is "probably" parsed, then you get dojo.ready, do your connect, when the onClick happens, you add declarative markup in your html code, but you are not calling the parser.
I would recommand using programmatic approach for these kind of cases and keep declarative for templated widgets, or html string you will "parse" calling the parser.
Hope this also helps a little ;)
<script>function(ready, Editor, AlwaysShowToolbar, dom, query){
this.createEditor = function(){
new Editor({
height: '40px',},dom.byId('programmatic2'));autosave:false,
query('#create2').orphan();
}
});
</script>
try this.. u might get a solution..