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
Related
I'm trying to do a simple wysiwyg editor and I am trying to edit this page.
I inserted that code into my editor and included the original css file from the website, yet it seems like ckeditor is putting its own tags around the overall content which breaks the original design. Is there a simple way to overcome this?
Thanks
Inline editing is what you want to do there. Simply render the website (component) in your admin panel, using your default, frontend styles and create inline editors for all editable fields. Finally serialize contents of editors.
CKEditor uses CSS from ckeditor/contents.css - you have to add your CSS there.
Your file is visible at http://makehugeprofit.com/editor/ckeditor/contents.css?t=E0LB and as you can see, it doesn't contain much. How did do "included the original css file from the website"? Merge it with contents.css and you'll have greater luck.
The editable area is an iframe and thus not in the same CSS space as your surrounding site.
When I am adjusting content, I click on the source I want the html to be in an uglified state, so it is easier to naivagte, without having to copy and paste the html into HTMLLint, then into Sublime Text (at least once for editing, but definitely in ST2 if I plan on doing several iterations of edits), and then back into the RTF body area.
How do you get it to show the source in an indented view like this:
Maybe also how do you just edit the content in HTML format only? Any Module?
How do you get it to show the source in an indented view
Well, you can't unless it is built into the Rich Text Editor module that you have installed. CK Editor, for example, does indent the HTML nicely.
how do you just edit the content in HTML format only? Any Module?
If you want to edit the content without the Rich Text Editor, you may
disable that particular module admin/config/modules
or make plain text your default by going to admin/config/content/formats and dragging 'Plain Text' to the top of the list.
I am using the collective.kuputabs module and have added the collective.tabr add-on so that I can create a page with multiple tabs. It works fine. However, I see bullets beside the tabs and I want to delete them. Here is a snap shot of how it looks:
Where will the code for this be stored?. Tabs is a library in Kupu Visual Editor.
Use Firebug to explore the CSS, then override it in ploneCustom.css (ZMI>portal_skins>custom) or your own custom theme product.
I have a page with many links. and Have a button to print, clicking on that will be print.css included. In print preview version of the page remain all the links intact.
Is there a way to disable all the link in print preview? i.e. they are no more clickable.
I know this isn't disabling the links, but this is along the lines of print preview and links. Here's an option that you can add to your css so links will print much nicer: http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
I wouldn't disable the links as much as style them the same way as regular text, since the intent of clicking on Print Preview is to prepare to print the page, where the links won't work anyway.
If you're still set on disabling links, you can try this query code. Assume that your body has a class called print on it:
$("body.print a").each(function(a) { $(a).html(a.innertext); });
The above is pseduocode and was off the top of my head at 8:30 AM. I would just save yourself the trouble and make links look like surrounding text.
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.