CKEditor -- Use Custom Style Sheet with Editor - ckeditor

I have been trying to work out how to get my own website's custom stylesheet to be recognized by CKEditor. The fontsize on my site is 19px, and for CKEditor it's much smaller. I would like the software to recognize my styles. I don't need (at the moment) custom styles added to dropdowns (and I see information in the docs on how to do that). It just seems odd that if my whole site uses a specific font, font size, font color, and so on that the editor doesn't seem to recognize them. This may be basic, and I've just looked past it or misunderstood something, but I can't figure it out. Thanks!

You may want to look at the contents.css (file is inside CKEditor folder), that is the stylesheet used for content inside the CKEditor. You will need to change the contents.css according to your need, in this case you want to change the font styling so it match with your current site.

Related

Joomla 3.8: how to configure standard spacing properties?

I´m rookie in Joomla. I'd like to do a fine-adjustment in the presentation of a bunch of icons in a toolbar that I've created using logo/image components in the layout editor for a certain theme. These icons are being presented with a too wide spacement between one another, and it seems that the cause is the property flex in the css file nucleus.css (.size-5 element, according to inspections in Firefox).
I'd like to know how to resolve this spacement issue, perhaps changing paramenter's values in this css file, if there is no other way. Thanks for any help.

Work in 'source mode' but enable toolbar buttons

I am building a simple forum on my website using CKEditor as a BBCode editor. I managed to make CKEditor output BBCode just fine by following the example.
However, I do not want to use the 'WYSIWYG' interface. I just want a plain "bbcode source" editor. The WYSIWYG output is not exactly the same as how the output will look on my forum (because I translate the bbcode to html myself and then apply some additional styling) and I don't really like the difference. More importantly, I have a couple "custom bbcode" tags that make no sense outside of my forum and obviously CKEditor doesn't know what to do with them, so I get a mix of bbcode and WYSIWYG output which looks odd.
I can force the CKEditor into 'source mode' by setting the startupMode and removing the source button, but when I do that it disables the entire toolbar!
I want to work in source mode, but still use the various buttons like B, I, etc. When such a button is pressed I just want it to insert the [b] [/b] tags for example around the selected text.
This is pretty much how every forum I've ever seen works, but I can't figure out how to configure CKEditor to do this.
Unfortunately it's impossible. Most of the plugins require WYSIWYG mode and don't work without it.
However you could try to control the output of the editor and change it according to your needs by adjusting editor's filter or implementing custom data processor.

Making TextBox text theme aware

I created a page.i want to change the background of Textbox when theme of emulator is changed to light.The letters cant be visible while changing the themes.is there any solution?
If you use the default TextBox control inside Visual Studio it is fully theme aware. If you have set the colours yourself then you need to perform the theme aware changes in code behind.
For more information, please see the following :-
http://www.developer.nokia.com/Community/Wiki/ThemeawareWindowsPhoneapplication
I assume you are referring to TextBlock rather than TextBox (as the latter automatically has style support).
You should never declare a TextBlock without a Style attribute, such as Style={StaticResource PhoneTextNormalStyle}. A full list of available styles can be found on MSDN: Theme Resources for Windows Phone
Also of relevance is: How to: Apply Theme Resources for Windows Phone
NB: Due to the way Mango was designed, backing into your application after changing themes will not apply the new theme. You will need to restart the application to see the changed theme.
Update
Based on your screenshots, you have two choices:
Reskin ("Edit Template" in Blend) each of the controls that you use to redefine a style in which the various colour-related properties are hardcoded
Use an alternate, lighter, background image when in the white theme in order to improve the contrast. I've blogged about how you can define theme-aware resources (and also mentioned it on other SO questions).
Put simply, you can either submit to the theme or force it to remain the way you want it.
We can set a theme as default to our application.When we log in our application the phone theme will be changed to its suitable theme and when we log out change back to original
here s the link .

Webpage hosted HTML editor that graphically shows tag nesting in WYSIWYG view

I once found a webpage hosted HTML editor that optionally included the tags, as highlighted colour coded elements with the tag type, in the (almost) WYSIWYG view, but now cannot find the project anywhere.
I thought it an excellent compromise between WYSIWYG ease of use an markup flexibility.
Does anyone know which editor this was? Or maybe there is more then one editor with this feature?
Here is one that looks promising.
http://koivi.com/WYSIWYG-Editor/
This appears to match your request.
I found one such, and only one. Unfortunately it isn't the one I had seen before and so I'm still looking. They are called What You See Is What You Mean editors - WYSIWYM.
WYMeditor
Also see - http://en.wikipedia.org/wiki/WYSIWYM

CKEditor plugin rendering different in WYSIWYG and source mode

I'm starting to develop a plugin for CKEditor that needs to be used to insert some HTML snippets in a web page. This is done. Nonetheless I also need to include some special items when switching to WYSIWYG mode (e.g. something more or less similar to Show Blocks plugin, but not just using styles since I need some elements included in there). So my question is :
How could I include extra items or styles (e.g. to hide parts of the contents in WYSIWYG mode) in WYSIWYG view without altering HTML output ?
If someone could provide some information about a working (maybe simple) example, I'd also appreciate your help.
PS: If you need to know further details please ask, but for instance assume inserted raw HTML code is
<div class="xxx">Hello world !</div>
... but in WYSIWYG mode need to display a link on top of it that pops up an alert and toggles dotted border.
About injecting CSS classes in WYSIWYG mode, use addCss function.
About creating fake elements in WYSIWYG mode ... I think I can solve the problem using context menu instead.

Resources