TinyMCE within Electron; hashed anchors don't work - electron

Has anyone tried to use hashed anchor tags within TinyMCE within Electron? When I add the Table of Contents, none of the hyperlinks work.
It should be noted I am using the Quasar framework (Vue 3) as a SPA without using any navigation (due to how the application is built, I cannot use routes). (The built in Quill editor isnt sufficient for my needs)
I should be able to click on the ToC link and have the page scroll down to the appropriate heading within the editor.
I tried both the iframe and inline modes and that still didn't help. I also tried to catch the did-navigate-in-page webContents event in my main script but it doesn't even register it.

Related

Angular JS and jQuery Mobile routing - treatment of hash anchors in the URL

This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.

Preserving jquery mobile styles when meteor js elements/fields update

I'm working on a Meteor project at the moment that utilises Meteor JS & jQuery Mobile. All is going well apart from certain circumstances where Meteor updates an element.
For example, JQM automagically adds a few surrounding divs to a select box for formatting purposes (.ui-select, .ui-btn, .ui-shadow, etc.) but when Meteor updates this element, whether from a remote or local db change, it reverts the element to a standard select box, in effect ruining the UI.
I was just wondering if there is a easy solution to this issue where Meteor calls on jQuery to make changes prior to updating the element?
Dynamically added jQuery Mobile content must be enhanced.
It can be done in few ways, but most common ones are:
In case you want to enhance only content
$('#page-id').trigger('create');
In case you want to enhance full page (content + header + footer)
$('#page-id').trigger('pagecreate');
It is good to know that these method are performance extensive so you can always enhance widgets (buttons, listviews ...) separately. To find out more take a look at my other ARTICLE, to be transparent it is my personal blog, or find it HERE.

What is the purpose of data-role in TriggerIO?

What is the purpose of the div 'data-role' option seen in the TriggerIO template files? Am I to assume that I can ignore this and build my app as if I would build a normal website in HTML5? Or do I need to use different tag options in order to initiate CSS selectors and such? There doesn't seem to be much information about the real differences between your TriggerIO apps and how you would write a normal HTML5 app.
I'm creating a children's story app whereby you can view an image and some text, and swipe for the next page). Should I be using canvas to load the images and text or is it best to use the older school img tags and other markup?
The example app that you get when you create a new app using the TriggerToolkit uses jQuery mobile. The data-role attributes are used by jQuery mobile:
In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
From: http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
You can delete all this and use whatever markup, stylesheets and JavaScript you would usually when making a website. I'd definitely recommend using <img> and regular text rather than doing everything in a <canvas>. My advice would be to "try it and see", treating the development as you would a mobile website, but with assets stored locally and the ability to leverage forge APIs.

Fine control over Joomla URLs

I would like to convert my existing website to Joomla. However, I need finer control over URLs than I seem to be able to control with Joomla. Assuming that Joomla is installed in the base public_html directory of my user, I would like these pages to keep their URLs:
http://dotancohen.com/howto/rtl_right_to_left.html
http://dotancohen.com/eng/genealogy.php
http://dotancohen.com/heb/contact_info.html
I am aware that I could use a 301 redirect via .htaccess however I would prefer to actually configure the canonical URL of the page. Is this possible in Joomla or with an extension?
Unquestionably, the defacto standard extension is At http://extensions.joomla.org/extensions/site-management/sef/10134. It's highly configurable, well supported, and ver well rated.
In Joomla! 2.5 you can use the built-in Redirect component to catch old URLs and send them to the right content without fiddling with the .htaccess.
You can also create menu's and menu items that will match the old paths then all you need is to place the content of your .html files into suitable articles. Remember you can create a menu (and thus a path to the content) but not display the menu anywhere on the site.
The genealogy.php appears to be a separate application so you can approach that by doing two things, first have a /eng/ directory on your new website with the genealogy.php application in it that way it will have the same URL. Then if you want to create a menu item in a Joomla! menu then you can link to it using a menu item of type 'External Link' - you can read more about the menu types by clicking on the help button in the toolbar.
[EDIT]
For external pages if you want to wrap the external application in your template use a menu item type of Iframe Wrapper this will place them in the main component area of the template. With a good Joomla! 2.5 template you can use a template style specific (i.e. layout settings) for that page.

How can I find where actually is the theme file?

I am new to Symfony and I need to work to a large project with many themes to modify them. How can I find where actually is the theme file in which module, just looking at the HTML browser output? Or do I need to look somewhere else, routing for example?
What you want to do is use the Web Debug Toolbar.
Once you have that running on the page, using appname_dev.php, simple click the view link and it will show you which templates have been used. If you need to know which layout to use then use logs link, click none the sfPHPView.

Resources