I'm using the following config:
formats : {alignleft : {selector : 'img', classes : 'float-left'},
alignright : {selector : 'img', classes : 'float-right'},
},
to make tiny use my custom classes for image alignment (which just set a css float of left or right) rather than applying them inline in styles.
Now, this works when I save the content and preview it, but in the tiny editor the image just stays where it is and won't float.
Inspecting the image code in Safari web inspector shows the class being correctly applied to the img element, it just doesn't.. float!
The page with the editor has access to the main stylesheet with the float-left and float-right classes too.
I'm new to tiny so perhaps I'm missing something here?
In order to see the class changes within the editor itself, you need to set a stylesheet during initialization.
tinyMCE.init({
content_css : "/editor-style.css" // http://domain.com/editor-style.css
});
That should pull in the stylesheet for your editor. Once the stylesheet is being pulled in you will have to add your styles to the stylesheet in order to see them display appropriately.
Related
Could you give an example of usage of CSS Custom Properties
--ion-grid-padding
--ion-grid-padding-lg
with Angular.
Specifically, I do not see a thin difference between size-sm and --ion-grid-padding-lg?
I do not understand where and in what file I should use custom CSS properties (also, how to use them properly).
You can define your custom css properties in the file variable.css, for example:
--my-custom-opacity: 0.8;
In the css file associated with your page, or in global.css, you can access this property using:
.my-css-class {
opacity: var(--my-custom-opacity);
}
Your html elements will be attributed an opacity of 0.8.
If you need to update this property to change on a single page (and stay the same elsewhere), you can update it using the host tag:
:host {
--my-custom-opacity: 0.6;
}
In that case, your elements will be attributed an opacity of 0.6 on this page only.
This is an easy way to apply css values at multiple places in your code and update when necessary.
Hope that helps!
I use TinyMCE 4.1.10 and have a problem with tags inside <a>-tags:
I need to insert code in the following markup inside the code viewer:
<a><h3>something</h3></a>
Generally I want every tag to be possible inside the <a>-tag (besides another <a>-tag).
But TinyMCE does a ridiculous cleanup:
<p><a></a></p>
<h3><a>something</a></h3>
<p></p>
I've already made following modifications in the setup:
extended_valid_elements : "a[*]",//allow empty <a>-tag
valid_children : "+a[div|h1|h2|h3|h4|h5|h6|p|#text]",//allow some children in the <a>-tag
verify_html: false,
It doesn't make any sense at all what TinyMCE is doing here.
The TinyMCE-website is telling me it uses html5-specification by default:
The schema option enables you to switch between the HTML4 and HTML5
schema. This controls the valid elements and attributes that can be
placed in the HTML. This value can either be the default html5, html4
or html5-strict.
And in the HTML5-Specifiations you can read:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
And now I don't get anything despite HTML5 valid markup AND extra valid-children setting in TinyMCE.
How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?
What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.
The output should look like this
<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >
<img src="http://domain.com/imageGen.ashx?
image=%2fmedia%2f2813%2fDSC_2615.JPG&width=420" alt="DSC_2615" title="DSC_2615"
class="alignright">
</a>
I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue
Default umbraco tinymce add image interface is
<plugin loadOnFrontend="false">umbracoimg</plugin>
I was able to modify it to show additional field in the image selection interface, then render markup I want.
I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
Then if you are adding custom attributes, you might want to add them to \config\umbracoSettings.config
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
and \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.
There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.
I am using TinyMCE to create a WYSIWYG editor in my webapp. I need to configure it in advanced mode for some textarea's and in simple mode for some. I am configuring TinyMCE like this.
<head>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "simple"
});
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>
</head>
This configuration works and shows me TinyMCE in simple or advanced mode, based on the class of the textarea.
However, the problem happens when I submit a form. The server gets a blank for the textarea. (this problem does not occur when I use only one configuration for TinyMCE)
I did some searching and came across a suggestion which said I should explicitly ask TinyMCE to save the content before doing a submit. I tried adding this code to my form.
$('#postFeedback').click( function(){
tinyMCE.triggerSave(true,true);
alert("TextArea val - " + $('input[name=email]').val() + "- " + $('textarea.simple').val());
$('form').submit();
});
The form does get submitted, but I have the same problem. The value in the textarea is blank. I also put an alert (as shown above) to check the value of the textarea, and it is indeed blank.
Some questions to start with:
TinyMCE works perfectly well, when I have just one configuration (init). However, it gets messed up the momnent I have two? Any clue why this might happen?
Is it necassary to explicitly ask TinyMCE to save the textarea contents?
How do I begin debugging this problem?
You should initialize your editors using mode: "exact", in your inits. Then you are able to initialize a single tinymce instance using
tinyMCE.execCommand('mceAddControl', false, editorid); //editorid should be the id of the textarea
and the configurations of your inits will be aplied (I somehow got the feeling there is something pretty bad using two inits for all the tinymce editors (because it looks they get both called for all of them)).
EDIT: In order to be able to use different inits you should call mceAddControl using an initialization_object instead of an editor id only. Example:
var config_tinymce_xy = {
mode: 'exact',
theme: "advanced",
content_css : "my.css",
plugins: "code,...",
theme_advanced_buttons1 : "code,...",
theme_advanced_buttons2 : "...",
...
};
var config_tinymce_xy2 = {
mode: 'exact',
theme: "simple",
content_css : "my.css",
...
};
init_obj = {element_id:'my_editor_id', window: window};
$.extend(true, init_obj, config_tinymce_xy);
tinyMCE.execCommand('mceAddFrameControl',false, init_obj);
I am implementing ForeColor in TinyMCE Rich Text Editor.
it uses style to apply forecolor to selected text as like this
<span style="color: rgb(255, 0, 0);" mce_style="color: #ff0000;">Hello</span>.
i want to apply css class instead of "style" here.. how to apply css class here? These Css Classes contain ColorCodes.
Example:
<span class="colorRed">Hello</span>
My CSS Class
.colorRed
{
color: #ff0000;
}
thank you
Because you want your css to be applied to tinymces editor content you will need to add your class to the class your editor content gets styled with.
If you are not using a user-defined content_css file when initializing tinymce (init-function) a content_css file will be used depending on the theme you have set in the init function (file used is to be found in a subfolder of folder themes).
I suggest you create an own content.css which you load using content_css setting in the init function. See this link for the tinymce documentation for this. For a first step you could copy one of the content.css from the themes directory and modify it.
Search on content_css attribute an add your CSS file relative path(i.e:myLibFolder/myCss.css) after adding ","
$('textarea.tinymce').tinymce({
//
//
//....
,
content_css: "css/content.css,myLibFolder/myCss.css"
,
//
});