CKeditor 5 using page styles - ckeditor5

What is the equivalent of https://ckeditor.com/cke4/addon/divarea in CK5? I've used this in CK4 for a previous project but I'm hoping to use CK5 for my new project. Need to inherit the page styles though for the InlineEditor. TY

CKEditor 5's classic editor, despite its name which might indicate that it's the same thing as CKEditor 4's classic editor, is not that classic.
Some of the differences were described in the "Enhanced classic editor" section of the "What's new?" guide. And one of the main difference is that the new classic editor uses an inline editable element. It makes it far lighter and causes less problems (e.g. in CKEditor 4 the iframe which holds the content needs to be resized once you type and this is super tricky).
So, in other words, the new CKEditor 5's classic editor is a bit like CKEditor 4's with the divarea plugin loaded.

Related

Adding custom style in Ckeditor 5

I am trying to find an answer several days but not able to.
How can I add custom styles just like in Ckeditor 4 (For example, using CKEDITOR.stylesSet.add) ?
Thanks
Edit the CkEditor css file in its entirety, that can be found at This guide
From the page:
By default, content styles are loaded by the editor JavaScript which makes them only present
when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
By taking it directly from this guide and saving it as a static resource in your application (e.g. content-styles.css) (recommended).
By generating it using a dedicated script. Learn more in the Development environment guide.
Load the content-styles.css file in your application by adding the following code to the template:

OpenTest support for Dojo toolkit

I'm trying to use OpenTest with web applications created with IBM EGL using the Dojo toolkit. The issue with dojo is that it dynamically generates id's every time so they cannot be used as a locator. In addition many elements do not have an xpath so that can't be used either.
It seems like this is a common issue when I search for "dojo" and "selenium" but I haven't found any solutions yet.
Other testing tools have "explicit" support for specific frameworks (e.g. like dojo) so I assume it's technically feasible.
Here is an excerpt from a website where this same question was asked and OpenTest supports building out macros that do just what this indvidual was able to do with .NET code. Please reference the blockquote below as well as the source
I use Selenium to Test my web application which is built by dojo/dijit
and asp.net MVC, so far it works fine.
I've faced the same issues with yours before. My way is "don't think
about dojo widgets" when writing steps interacting with them. Treat
them as normal complex html elements. You need to browse your dom tree
on the client after dojo parse your widgets, locate the real dom
element which dijit's value node or interactive part corresponding to
and do thing (Click, SendKey or GetId in your case) to it.
It is also good to wrap some common actions to widgets into Helpers
which can be reused in your project.
Below is a simple .NET example I use to test whether a button exist in
a dGrid, I just use css selector to find the cell, hope it helps:
[Then("I can delete it at row '(.*)'")]
public void Then_I_can_delete_it_at_row(int rowIndex)
{
var nthRow = Browser.FindElementsChecked(By.CssSelector(".dgrid-content .dgrid-row-table")).ElementAt(rowIndex - 1);
var deleteBtnsInRow = nthRow.FindElementsChecked(By.XPath(".//span[text() = 'Delete']"));
Assert.AreEqual(1, deleteBtnsInRow.Count);
}

Aurelia popover checkbox checked.bind not reflecting on the view model

We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)

reusable components with bootstrap

Very new to bootstrap and it seems so cool, but as I look around at various templates, I feel I am missing the "template" nature of the code.
How does one build on the sample templates to have, for example, a master index page and reusable components (tabs, sidebars, menus, headers, footers) available to all "rendered" pages? It does not seem efficient to recode sidebar menus into every page but that's what the samples seem to show.
Perhaps there is a way to have a special div where the variable content can be loaded?
Or, perhaps there is a higher level framework I should be looking at and bootstrap is not the answer for what I need?

how to integrate hebo html template into yii framework

how to integrate hebo html template into yii framework
I am new to using yii framework.I download hebo template from
http://www.webapplicationthemes.com/hebo-responsive-html5-theme/
I can installed template hebo but i don´t work with ie.
Don´t work fluid bootstrap.
go to views/layouts/main.php and delete html comment " <- Require the header ->" instead you can add it as php comment. This comment appears before tag and it causes IE doesn´t understand HTML5.
Did you convert the theme to work with Yii?
One of the problems with this kind of theme is that it has multiple page types and this is harder to replicate in Yii. By default, Yii has no concept of page type unless you code this into the controller using layouts ....
At the very simplest level, the conversion could be based on the fullwidth page,, converting the mainContent divs to inject $content. You would then need to change a layout to use single column ...
I've just completed this for another of their templates and it doesn't take too long - though if any one has a better idea for page types I would be very interested ....