I'm trying to inject the rangy javascript core and serializer code base (https://code.google.com/p/rangy/) into an html page. However when I inject it, the rangy object isn't created properly. The modules are added at rangy.modules.* however the functions created within the module are not added to the rangy object. Also the modules all have the following variables 'initialized' and 'supported' as false. Has anyone been able to inject the Rangy code base into their web page properly or can provide any assistance?
To inject - open up Chrome javascript console and insert code as minified (very important or it will not work - http://jscompress.com/):
javascript: insert code here
You can call rangy.init() to initialize Rangy after the page has loaded.
Related
I am trying to integrate a TinyMCE editor into my Vue application. From the Developer Tools Console I am able to access the tinymce object and manipulate it. For example:
tinymce.activeEditor.selection.setContent('I am a replacement')
The above code will replace the selected text within the TinyMCE editor. I want to work with the tinymce object from within Vue (in multiple components) but I am not sure how to access it. The exact error I get when I enter the above code into a function is: error 'tinymce' is not defined no-undef.
Any help would be much appreciated. Thank you.
Without seeing any code at all it is hard to say exactly why this is happening. Documenting how you are instantiating TinyMCE would help.
Based on the error message I would assume that you are using the TinyMCE Vue component/wrapper to inject TinyMCE into your Vue component. By default that does not actually load the core TinyMCE editor until run-time - and at that time it loads thing via the TinyMCE Cloud server.
The error you are seeing is your linting tool (eslint?) complaining that you are trying to call a variable tinymce but that variable is not defined anywhere.
There are a few ways you could choose to "fix" eslint complaining:
1 - Access tinymce through the global window object:
window.tinymce
2 - Wrap your code with a directive for eslint to not check for undefined variables:
/*eslint-disable no-undef*/
...
/*eslint-enable no-undef*/
https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
3 - Define a global in your .eslintrc file
{
"globals": {
"tinymce": true
}
}
https://eslint.org/docs/user-guide/configuring#specifying-globals
I'm using Nuxt to build a component library for use with the various CMSs that my company uses. Basically, I want to use the generated HTML to create reusable widgets for the CMS. The CMSs in question can't use Vue components directly because the client's admin area doesn't play well with Vue (for example, the inline editor in Kentico 12 does not work at all with Vue and our clients require this functionality).
Using Nuxt to build the component library works great as long as the components don't DO anything. However, if I want to create an accordion that has an #click event, it doesn't work when loaded into the CMS. I narrowed down the issue:
A) http://example.com/Accordions/
B) http://example.com/Accordions/index.html
Case A works fine. With Case B, the page loads but none of the scripts work. The events do not fire at all, and I'm getting the following error:
"DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."
The Accordions component doesn't work on any page that is not http://example.com/Accordions/.
Nuxt is generating the Accordions/index.html page so I'm assuming it's connecting the route with the functionality in the JS, but I'm not sure exactly what the problem is, what to search for or how to fix it. I've been searching for hours. Can anyone help me with this?
I'm trying to understand the usage and limitations of server side rendering with vuejs when using aspnet core.
I used this starter kit for aspnet core and vuejs to setup a simple vue site, which is running based on the code here: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/master
I then modified the project to update the aspnet-prerendering and added vue-server-renderer, compiling a hodgepodge of sources to cobble together this update: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr
If I run this project, the site appears to load fine, and if I turn off the javascript in the browser, I can see that it does appear that the server-side rendering executed and populated the html result:
however, because JavaScript is disabled, the content isn't moved into the dom as it looks like it is trying to...
My understanding of server-side rendering is that it would populate the html entirely and serve a completed page to the user, so that even if JS was disabled, they'd at least be able to see the page (specifically for SEO purposes). Am I incorrect?
Now I believe modern search engines will execute simple scripts like this to get the content, but I still don't want a blank page rendered if js is disabled...
Is this a limitation of server-side rendering, or perhaps specifically ssr with vue and/or aspnet core?
or am I just missing a step somewhere?
Edit: more information
I looked at the source code for what I believe is the method that prerenders the section here: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs
The line
output.Content.SetHtmlContent(result.Html);
has a null value for result.Html. However, when I manually edit this value to put a test value, it also doesn't render to the output html, and the app div tag is still empty...
If I'm doing something wrong to populate the result.Html value with the expected output, that's one thing, and I would appreciate some help in doing that, especially since the output html appears to be found, since it's in the script that immediately follows...
However, even if I were to populate it, it appears it's being skipped, as evidenced by me manually changing the value. is this a bug in the code or am I doing somethigng wrong, or perhaps both?
As you correctly noticed, for your project, result.Html inside the tag helper is null. So that line cannot be the location where the output is being generated. Since the HTML output from your prerendering script also does not include a script tag, it is clear that something has to generate that. The only other line that could possible do this is the following from the PrerenderTagHelper:
output.PostElement.SetHtmlContent($"<script>{globalsScript}</script>");
That would fit the observed output, so we should figure out where the globalsScript comes from.
If you look at the PrerenderTagHelper implementation, you can see that it will call Prerenderer.RenderToString which returns a RenderToStringResult. This result object is deserialized from JSON after calling your Node script.
So there are two properties of interest here: Html, and Globals. The former is responsible for containing the HTML output that finally gets rendered inside the tag helper. The latter is a JSON object containing additional global variables that should be set for the client side. These are what will be rendered inside that script tag.
If you look at the rendered HTML from your project, you can see that there are two globals: window.html and window.__INITIAL_STATE__. So these two are set somewhere in your code, although html shouldn’t be a global.
The culprit is the renderOnServer.js file:
vue_renderer.renderToString(context, (err, _html) => {
if (err) { reject(err.message) }
resolve({
globals: {
html: _html,
__INITIAL_STATE__: context.state
}
})
})
As you can see, this will resolve the result containing just a globals object with both html and __INITIAL_STATE__ properties. That’s what gets rendered inside of the script tag.
But what you want to do instead is have html not as part of globals but on the layer above, so that it gets deserialized into the RenderToStringResult.Html property:
resolve({
html: _html,
globals: {
__INITIAL_STATE__: context.state
}
})
If you do it like that, your project will properly perform server-side rendering, without requiring JavaScript for the initial view.
I want to configure a lazy load of some features with both js and html elements.
If I do aurelia.use.feature('js+html-custom-element') in configure() of main.ts everything works as expected.
But when I postpone loading like
return new FrameworkConfiguration(aurelia)
.feature('js+html-custom-element')
.apply();
then browser loads both js and html files but html is not rendered!? No errors in a console window.
In case with 'js-only-custom-element' lazy load works as expected.
Is this expected behaviour, bug or am I missing something?
aurelia-framework 1.1.5 jspm +type script solution.
Aurelia uses strong file naming convention.
For component, if the file defines class JsHtmlCustomElement, Aurelia expects the file name is js-html-custom-element.js.
For value converter (or binding behaviour, custom attribute), it can
either use naming convention foo-bar.js for class
FooBarValueConverter.
or with help of annotation foo-bar.js for
#valueConverter('fooBar') export class FooBar.
I'm developing a custom Dojo widget which in fact acts as a wrapper for Timeline JS library (http://www.simile-widgets.org/timeline/).
Is there a possibility to include the required JS code for Timeline in the custom dojo widget or must I include manually in my "index.html"??
Thanks in advance.
Do you have control over the Timeline source code, that is, are you hosting it yourself?
If this is the case you could turn the dependency into a dojo module by inserting an appropriate dojo.provide call on the top or you could just straight up copy-and-paste everything inside your MyWidget.js source file.
If this is all ends up too compicated for you to consider it worth it, adding the script tag by hand on the index.html is not that bad (given how base Javascript actually doesn't have a real module system you could use instead)