I am using Aloha Editor for my website. I am new to Aloha Edior. I want to add Font Size, Font Family & Text Color plugins to my editor. I got the plugins from this link: http://blog.strouseconsulting.com/2012/06/aloha-plugins/
I am not sure how to use these plugins. Please, if anyone is familiar with Aloha Editor, help me in using these plugins.
Thnks in Advance.
NOTE: I placed the plugin files in the 'plugin' folder of the editor. Like this:
aloha->plugins->fontsize (folder name)
aloha->plugins->fontfamily (folder name)
aloha->plugins->colorselector (folder name)
And also wrote the script code this way:
<script type="text/javascript" src="js/aloha/lib/aloha.js"
data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,common/align,common/list,colorselector,fontsize,fontfamily"></script>
I am getting the error in Console Log this way:
Uncaught Error: Script error-
http://requirejs.org/docs/errors.html#scripterror - require.js:1818
If you have added your plugins in the common folder, then your aloha plugin list should read:
<script type="text/javascript" src="js/aloha/lib/aloha.js"
data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,common/align,common/list,common/colorselector,common/fontsize,common/fontfamily">
</script>
Then you will need to do some buttons in your aloha-config.js
For example, here is a sample:
(function(window, undefined) {
var Aloha = window.Aloha || (window.Aloha = {});
Aloha.settings = {
toolbar: {
tabs: [
{
label: 'custom',
showOn: {
scope: 'Aloha.continuoustext'
},
components: [['increase', 'decrease','fontfamily']]
},
Check Aloha for a working example of a config file, then you should be able to work out how to have the above sample: http://www.aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php
Once you have created your aloha-config.js file, make sure to include it on your page.
Related
I'm running into some strange formatting issues with vscode using svelte. Whenever I create an HTML tag, say <p></p>, as soon as I save or click elsewhere, it reformats to this: <p />. I have no idea what's going on. It also doesn't seem to like certain Svelte tags like <slot></slot>. Has anyone else encountered this? If so, what did you do to fix it?
If you are using the official Svelte extension, it only comes with one way of formatting the code: Prettier.
If you want control back, turn off svelte.plugin.svelte.format.enable. You could also create a .prettierrc and see if there are any Prettier options to change this particular behavior.
By the way: Even though something like <div /> would be invalid in HTML, it is not in Svelte because the code gets compiled anyway.
If you have just a div like that in a component, it gets compiled to:
function create_fragment(ctx) {
let div;
return {
c() {
div = element("div");
},
m(target, anchor) {
insert(target, div, anchor);
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
}
};
}
Or with SSR:
const App = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `<div></div>`;
});
If you are using Svelte for VS Code extension, you can enable svelte strict mode in extension settings, or put this in settings.json
"svelte.plugin.svelte.format.config.svelteStrictMode": true
I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'ASP.NET (Core)', value: 'aspnet' },
{ text: 'Apache', value: 'apacheconf' },
{ text: 'Bash', value: 'bash' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' }
]
}
}
]
Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.
So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.
Customizing the webresource archive
PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:
[centos#cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/
After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append
console.log(Object.keys(Prism.languages))
at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?
PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.
As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:
Highlight in the editor, too
I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view
To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive
[centos#cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js
and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor:
How can I disable plugins for a specific CKEditor? I have a CKeditor where you make a post and another one for commenting on that post. What I want help with is to disable plugins on the editor of comments.
For example:
Comment editor has id CKEditor_30 is there a way to disable plugins for only this editor ?
SOLVED:
All I had to do was to create a custom config file custom_config.js and copied contents from config.js.
CKEDITOR.editorConfig = function(config) {
config.mathJaxLib = '//cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML';
config.extraPlugins = 'lineutils,mathjax,widget';
config.toolbar = [
['Styles'],['Bold','Italic','Underline'],
['NumberedList','BulletedList'],
['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor']
];
};
After that I linked editors to that config file:
<textarea name="new_comment" id="CKEditor_<?=$getpost['post_id']?>" placeholder="Write something ..."></textarea>
<script>
CKEDITOR.replace('CKEditor_<?=$getpost['post_id']?>',{
customConfig : '/website/ckeditor/custom_config.js',
});
</script>
I'm trying to allow javascript in rich text editor inputs in my Umbraco setup. I'm using Umbraco 7.2. I've enabled the script tag in tinyMceConfig.config so the editor no longer eats my script tags. The problem now is that my content is cut off.
For example, in my RTE I put:
<p>before</p>
<script>
alert('blam');
</script>
<p>after</p>
This get's transformed by TinyMCE to:
<p>before</p>
<script>// <![CDATA[
alert('blam');
// ]]></script>
<p>after</p>
The problem is the value of Umbraco.Field("myRte") ends up being:
<p>before</p>
<script>// <![CDATA[
alert('blam');
// ]]
It seems related to CDATA. Does anyone else have javascript in RTE working in Umbraco 7?
A possible workaround would be to create a macro that would allow you to insert a script into the RTE. The macro would have a single Textarea parameter where you would paste in your script tag, and you would simply render the parameter value as raw Html. However, it might be a good idea to check that the input is valid html before you attempt to render it on the page.
If you use a razor macro the partial view could look like this:
#inherits Umbraco.Web.Macros.PartialViewMacroPage
#{
var script = Model.MacroParameters["script"].ToString();
}
#if (!script.IsNullOrWhiteSpace())
{
#Html.ValidateHtml(script)
}
Where ValidateHtml is an extension method to the Mvc HtmlHelper:
public static IHtmlString ValidateHtml(this HtmlHelper helper, string input)
{
if (!string.IsNullOrEmpty(input))
{
var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(input);
if (htmlDoc.ParseErrors.Count() == 0)
{
return new MvcHtmlString(input);
}
}
return null;
}
The helper method uses the Html Agility Pack and I got the code from an answer posted to another SO question.
I've tested this on an Umbraco 7.2.1 install and it works fine even if you select the "Render in rich text editor and the grid" option.
My solution is not write direct script in editor, write it in a test.js file after that include
<script src="https:/....test.js></script>
In tiniMceConfig.config file (config folder)
validElements tag, add this
,script[type|src|language]
so it will look like this
<![CDATA[+a[id|style|rel
.....
,bdo,button,script[type|src|language]]]>
Test and work on Umbraco 4.7.x. I'm not test on umbraco 7
I am using Backbone.js and RequireJs for a single page application.
When I run my karma tests, there is no css included. When debugging it is difficult to know what is going on or why something is not working because the html elements are not styled like they are in the production appplication.
Is is possible to inlcude css in the karma tests while debugging using webstorm?
I have already tried including all css in the files array
files: [
{pattern: 'app/css/*.css', included: false},
...
],
This is the css file that is included in index.html of the production application, there is nowhere in the karma configuration that I can find to add something like this.
<link rel="stylesheet" href="css/styles.css" />
I worked it out:
You need to add all your css to your karma.conf 'files' array.
files: [
{pattern: 'app/**/*.css', included: false},
...
],
Create a new module called test_css.js, the location of this file will depend on your folder structure. In here you need to programatically inject all your css files into your the current document.
define(function(require) {
"use strict";
require('jquery');
//Modify to suit your requirements
$('body').append('<link rel="stylesheet" href="/base/app/css/styles.css" />');
});
Include this module as part of the deps array in test-main.js
requirejs.config({
baseUrl: '/base/app/js',
paths: {
...
'test.css' : '../test_utils/test_css'
},
// ask Require.js to load these files (all our tests)
deps: ['test.css'].concat(tests),
// start test run, once Require.js is done
callback: window.__karma__.start
});
jax answer was very helpful.
Additionally, for those not using jQuery but d3.js, your test-css.js can look like this:
define([
'd3'
], function(d3) {
"use strict";
d3.select('body').append('link')
.attr('rel', 'stylesheet')
.attr('href', '/base/app/styles/mystyles.css');
});
I resolved a quite similar issue where my components were not appearing in Karma Test Runner by adding following to files key of karma.conf.js. I wanted Karma to automatically include the file so I set included to true.
.
.
.
files: [
{ pattern: 'node_modules/abc/abc.min.css', included:true, watched: false }
],
Upon doing this, I could then view my components in proper styling which made unit testing a lot faster and easier.