I have a requirement to produce mark up like the following for an image within the SDL Tridion Rich text editor:
<div class="imagemasksmall">
<img src="tcm:2-123-16" alt="My amazing image" />
</div>
My initial thought was to use the FormatAreaStyles.css file to add a class like div.imagemasksmall { }, however this only seems to be available if I add the div in the mark up.
Is there a way to allow an editor to produce the above markup without having to write the code manually?
If all you need is a DIV with the "imagemasksmall" class and an image inside, you can do that in 3 steps (as you have already added the style to FormatAreaStyles.css):
Insert the image
Change the Section Type drop-down to "Generic container (div)"
Change the Style drop-down to "imagemasksmall"
If you want to reduce the number of manual steps needed for it, you will probably have to write an extension that does those steps for the user.
Related
Atom is a hackable text editor but I can't find a way to hack it to my needs.
On PC I use Notepad++ and its custom highlighting engine to view very large log files with visual cues to assist me.
I want to be able to highlight individual lines in Atom based on their contents: say the line contains "warning" I want it to be orange or "error" - red.
Atom is build on web technologies, so you can use JavaScript and CSS to alter its behaviour. If, for instance, you type "Warning" into a plain-text document and open the Developer Tools, you will see it is rendered as plain HTML:
<span class="text plain">
<span class="meta paragraph text">Warning</span>
</span>
Unfortunately, there are currently no CSS selectors for the text inside a tag-pair, so you would have to create a plugin, or package, in JavaScript/Coffeescript. How to CSS: select element based on inner HTML) provides a good starting point.
Use JavaScript to detect all instances of “Warning” inside the HTML of the editor view, then add a class. You can then use CSS to highlight the line.
Alternatively, you could probably create custom grammar for your log file.
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
I'm new in web development and this is also my first question here, so I hope I am precise enough.
What im trying to achieve is to have a text editor on a webpage, that of course can insert and edit text but also is able to insert blank guitar tablature, that can be edited by mouse- and keyboard events and save all the html content to a collection (Like create and save guitar notesheets).
The text thing is already working, I can save content to my collections or can show the collections content inside the editor, but I have some problems with the guitar tab inserts.
I'm using Meteor with the following packages:
brentjanderson:kinetic,
fortawesome:fontawesome,
froala:editor,
iron:router,
less,
meteor-platform,
nemo64:bootstrap,
peppelg:bootstrap-3-modal,
twbs:bootstrap
I want to use kineticjs for the guitar tab thing, because it is able to draw the blank tabs easily and access its content (for the editing I want to do).
For test purpose I just started to add a new kinetic stage with 2 layers (one for the guitar tab lines and one for the text) statically to an empty html page and it worked as it should. here is a fiddle:
https://jsfiddle.net/dsrbhayd/
But if I want to use kinetic in conjunction with the froala editor's "insertHTML" function by inserting the kinetic div via custom button inside the editor I have the following issue:
The div and canvas is inserted normally like on the html page above without the editor, but a few seconds later the content of both layers (var "text" and the horizontal lines, see fiddle) disappears. If I insert any text by typing something with the keyboard, right after I inserted the kinetic div, the content disappears immediately.
If I switch to see the HTML code inside the froala editor (with the "show HTML" button in the toolbar) I am still able to see the inserted kinetic div and canvas elements, but it seems the content of the layers is "gone".
Here is another fiddle with the editor issue:
https://jsfiddle.net/un8sbrzd/
I worked on it for days but I cant get it. I tried to change some of the froala editors options (like I mentioned in the comments of the fiddle) but it didn't work.
Is it a kind of a refresh issue of the editor? Does anyone have some experience using kinetic inside a html editor?
It would be awesome if someone can help me.
Greetings
I'm creating a form via Laravel, and I'm running into a little issue with the Form::file() input field.
The out-of-the-box looks like the typical, basic button/file info:
But even if I try to assign it to a class with styling for all input fields, nothing seems to be affecting it. For example...
<p class="text-center">
{{ Form::file('photo', array('class'=>'form-control')) }}
</p>
...will only style the outer container of the input (not the button or text itself, and I can't seem to center it). I'm primarily using Bootstrap for my form's styles.
Am I doing something wrong that is making the file input default to its raw styling? Or is the file input type itself sort of separate from all of the other input types, needing to be customized from scratch?
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.