Not sure how to set options for the Stylus CSS pre processor. A search of all the files reveals this:
node_modules/broccoli-stylus-single/node_modules/.bin/stylus [98]:
node_modules/broccoli-stylus-single/node_modules/stylus/bin/stylus [98]:
/**
* Include CSS on import.
*/
var includeCSS = false;
Does anyone know the correct/preferred way to set this option to 'true' in Ember-CLI framework / Broccoli build system?
Many thanks!
It appears that this maps to "include css": true in the options map (source):
var Compiler = module.exports = function Compiler(root, options) {
// ...
this.includeCSS = options['include css'];
// ...
};
I've tested this with ember-cli-stylus and it appears to work.
Related
This works fine if I was to implement uploading an image via tinymce etc, which I'm really not interested in doing.
I already have hundreds of images uploaded from another part of the website that I'd like to insert into pages being edited and created with tinymce v5.
But how can I indicate in the Insert/Edit dialog box to show just the contents of one directory on the server?
I had a hack from vers 3 something I think it was that I can't locate, and it being so ancient I'm sure it's pretty useless, it didn't even support Safari, so it had to be 10+ years old.
Can't find anything in tinymce docs about indicating a directory to use with insert image.
Some custom javascript to include somewhere???
My basic starter tinymce code:
<script>
tinymce.init({
selector: '#editor',
plugins: 'image code',
toolbar: 'undo redo | link image | code',
/* enable title field in the Image dialog*/
image_title: true,
/* enable automatic uploads of images represented by blob or data URIs*/
automatic_uploads: true,
/*
URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-
image-upload/#images_upload_url)
images_upload_url: 'postAcceptor.php',
here we add custom filepicker only to Image dialog
*/
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
/*
Note: In modern browsers input[type="file"] is functional without
even adding it to the DOM, but that might not be the case in some older
or quirky browsers like IE, so you might want to add it to the DOM
just in case, and visually hide it. And do not forget do remove it
once you do not need it anymore.
*/
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
/*
Note: Now we need to register the blob in TinyMCEs image blob
registry. In the next release this part hopefully won't be
necessary, as we are looking to handle it internally.
*/
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</strict>
There are several ways to do so:
MoxieManager plugin. Here is the demo. However, it's a premium feature.
Depends on the number of images you have on the server. If there aren't many, you can try to use the image_list option of the Image plugin. It will load the editor with a predefined set of images.
Implement the custom file picker with the file_picker_callback option.
I'd like to write custom control in a new sap.ui.define fashion. I have a problem implementing control renderer in a separate file: it seems one have to put bExport = true, while this is forbidden by SAP.
bExport: whether an export to global names is required - should be used by SAP-owned code only
I haven't found any examples of renderer implementations that doesn't utilize export hack and I have a doubt if such a way ever exists.
I've got some suggestions, but they doesn't fully satisfy me:
Ignore SAP requirement and use bExport = true. Pros: highest reuse of SAP code and generally follow standard logic. Cons: avoiding official recommendations.
Explicitly set my.namespace.control.GreatControlRenderer from within factory function. Pros: simple, doesn't touch bExport. Cons: breaks modular design (as module actually sets global variable).
What is the best or recommended way to resolve this issue?
Technically, an object reference available for public use is created inside framework code with jQuery.sap.setObject method, both in:
sap.ui.core.Control.extend() -- actually within parent class method
sap.ui.base.Metadata.createClass()
sap.ui.define(/* bExport = */ true)
This method creates hierarchy of objects in global scope by object dot.separated.qualified.name as follows:
jQuery.sap.setObject = function(sName, vValue, oContext) {
var oObject = oContext || window,
aNames = (sName || "").split("."),
l = aNames.length,
i;
if (l > 0) {
for (i = 0; oObject && i < l - 1; i++) {
if (!oObject[aNames[i]]) {
oObject[aNames[i]] = {};
}
oObject = oObject[aNames[i]];
}
oObject[aNames[l - 1]] = vValue;
}
};
First, your Renderer is an Object with a render function. It's a static function. Return this Renderer from your module.
sap.ui.define([], function(){
"use strict";
var MyControlRenderer = {};
MyControlRenderer.apiVersion = 2;
MyControlRenderer.render = function(oRm, oControl){
// Render your control
};
return MyControlRenderer;
});
Then in your control, you import your Renderer object and assign it to the renderer property of your control like this:
sap.ui.define([
"sap/ui/core/Control",
"./MyControlRenderer"
], function(Control, MyControlRenderer) {
"use strict";
var MyControl = Control.extend("bla.MyControl", {
metadata: {
// ...
},
renderer: MyControlRenderer
});
return MyControl;
});
In this example the renderer is in the same directory as the control.
I recently started to use CKEditor, i have come across to somewhat a weird problem, i have downloaded two plugins ,the "texttransform" and "autogrow",my config file looks like this ,,,
****CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
CKEDITOR.config.extraPlugins = 'texttransform'
config.extraPlugins = 'autogrow';
};****
The problem is, at one time only one plugin is active and functionality of other plugin disappears, for example,when i added autogrow, the control buttons of texttransform disappears,and they only work when i remove the line "config.extraPlugins = 'autogrow';" from my config file, any thoughts?
You are setting the configuration incorrectly. You must set config.extraPlugins only once, with two plugin names:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'autogrow,texttransform';
};
See also the documentation.
I'm trying to add a CSS property dynamically to a control.
I have a group of RadioButton. On selection of any one of the buttons, I want to make one layout visible.
Below are some of the snippets I tried, none of them seem to work!
Snippet-1
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
fcid.visibility = "hidden";
}
Snippet-2
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').css("visibility","hidden");
}`
Snippet-3
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').hide();
}
You cannot use fcid.visibility = "hidden"; and expect it to behave like a DOM object; it's not, it's a Javascript class with getters, setters, events, aggregations, etc.
Therefore, you should use the control's properties instead: fcid.setVisible(true);
See the API docs for the correct signature of the control/layout properties
You can:
var fcid = ...byId("FC7");
fcid.setVisible(false);
Or
fcid.$().hide(); // or every other jquery method
Or
fcid.addStyleClass("hiddenObject");
Last one with Css-Class:
.hiddenObject { display:none; }
Here is the problem demonstration
You can try it here: http://fiddle.tinymce.com/SLcaab
This is TinyMCE default configuration
less all the plugins
with extended_valid_elements: "span"
1 - Open the Html Source Editor
2 - Paste this html into the Html Source Editor:
<p><span>Hello</span></p>
<p>Google 1</p>
<p>Google 2</p>
3 - Click update in the Html Source Editor to paste the html in the editor
4 - Remember there is a span around 'Hello'.
5 - Place your cursor just before Google 2 and press backspace (the two links should merge inside the same paragraph element).
6 - Look at the resulting html using the Html Source Editor.
Result (problem): No more span in the html document even though we added 'span' to the extended_valid_elements in the TinyMCE settings.
Note: I removed all the plugins to make sure the problem is at the core of TinyMCE.
Edit 1 - I also tried: valid_children : "+p[span]" - still does not work
Edit 2: Only reproduced on WebKit (OK on Firefox and IE)
Insert extended_valid_elements : 'span' into tinymce.init:
tinymce.init({
selector: 'textarea.tinymce',
extended_valid_elements: 'span',
//other options
});
I have the same problem and I find solutions. Tiny MCE deleted SPAN tag without any attribute. Try us span with class or another attribute for example:
<h3><span class="emptyClass">text</span></h3>
In TinyMCE 4+ this method good work.
Tinymce remove span tag without any attribute. We can use span with any attribute so that it is not removed.
e.g <span class="my-class">Mahen</span>
Try this for 3.5.8:
Replace cleanupStylesWhenDeleting in tiny_mce_src.js (line 1121) with this::
function cleanupStylesWhenDeleting() {
function removeMergedFormatSpans(isDelete) {
var rng, blockElm, wrapperElm, bookmark, container, offset, elm;
function isAtStartOrEndOfElm() {
if (container.nodeType == 3) {
if (isDelete && offset == container.length) {
return true;
}
if (!isDelete && offset === 0) {
return true;
}
}
}
rng = selection.getRng();
var tmpRng = [rng.startContainer, rng.startOffset, rng.endContainer, rng.endOffset];
if (!rng.collapsed) {
isDelete = true;
}
container = rng[(isDelete ? 'start' : 'end') + 'Container'];
offset = rng[(isDelete ? 'start' : 'end') + 'Offset'];
if (container.nodeType == 3) {
blockElm = dom.getParent(rng.startContainer, dom.isBlock);
// On delete clone the root span of the next block element
if (isDelete) {
blockElm = dom.getNext(blockElm, dom.isBlock);
}
if (blockElm && (isAtStartOrEndOfElm() || !rng.collapsed)) {
// Wrap children of block in a EM and let WebKit stick is
// runtime styles junk into that EM
wrapperElm = dom.create('em', {'id': '__mceDel'});
each(tinymce.grep(blockElm.childNodes), function(node) {
wrapperElm.appendChild(node);
});
blockElm.appendChild(wrapperElm);
}
}
// Do the backspace/delete action
rng = dom.createRng();
rng.setStart(tmpRng[0], tmpRng[1]);
rng.setEnd(tmpRng[2], tmpRng[3]);
selection.setRng(rng);
editor.getDoc().execCommand(isDelete ? 'ForwardDelete' : 'Delete', false, null);
// Remove temp wrapper element
if (wrapperElm) {
bookmark = selection.getBookmark();
while (elm = dom.get('__mceDel')) {
dom.remove(elm, true);
}
selection.moveToBookmark(bookmark);
}
}
editor.onKeyDown.add(function(editor, e) {
var isDelete;
isDelete = e.keyCode == DELETE;
if (!isDefaultPrevented(e) && (isDelete || e.keyCode == BACKSPACE) && !VK.modifierPressed(e)) {
e.preventDefault();
removeMergedFormatSpans(isDelete);
}
});
editor.addCommand('Delete', function() {removeMergedFormatSpans();});
};
put an external link to tiny_mce_src.js in your html below the tiny_mce.js
It's possible to use the work around by writing it as a JavaScript script which prevents WYSIWIG from stripping empty tags. Here my issue was with including Font Awesome icons which use empty <i> or <span> tags.
<script>document.write('<i class="fa fa-facebook"></i>');</script>
In the Tinymce plugin parameters enable:
Use Joomla Text Filter.
Be sure your user group have set "No filtered" Option in global config > text filters.
Came across this question and was not happy with all the provided answers.
We do need to update wordpress at some point so changing core files is not an option. Adding attributes to elements just to fix a tinyMCE behaviour also doesn't seem to be the right thing.
With the following hook in the functions.php file tinyMCE will no longer remove empty <span></span> tags.
function tinyMCEoptions($options) {
// $options is the existing array of options for TinyMCE
// We simply add a new array element where the name is the name
// of the TinyMCE configuration setting. The value of the array
// object is the value to be used in the TinyMCE config.
$options['extended_valid_elements'] = 'span';
return $options;
}
add_filter('tiny_mce_before_init', 'tinyMCEoptions');
I was having same issue. empty SPAN tags are being removed. The solution i found is
verify_html: false,
Are you running the newest version of TinyMCE? I had the opposite problem - new versions of TinyMCE would add in unwanted span elements. Downgrading to v3.2.7 fixed the issue for me, that might also work for you if you are willing to use an old version.
Similar bugs have been reported, see the following link for bugs filtered on "span" element:
http://www.tinymce.com/develop/bugtracker_bugs.php#!order=desc&column=number&filter=span&status=open,verified&type=bug