Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm currently working to build a CMS for a client where the editing page looks exactly like the rendered page.
Hence I don't want an iframe based WYSIWYG, I am looking for something of a wrapper for contenteditable which irons out the differences between Firefox and Webkit.
For instance an Enter key press in Firefox results in a <br/> tag while the same event in Webkit results in it being enclosed in a <div> tag.
If you don't have suggestions for an editor, then can you help me solve this problem? The way I fixed it first was to check the onkeyup event and then use the execCommand "undo" and then insertHtml <br/>.
That works fine, but the problem is if the user is in a list, and they press enter they expect to have a next list element created but end up with a line break. How do I detect what's the location of the caret when the enter key is being fired so that I can skip the <br/> insertion behavior ?
Ideally I wouldn't even want a <br/> rather the text block to be encapsulated in a <p> tag for SEO purposes, but I wasn't able to solve that as well.
Any help would be greatly appreciated !
Aloha editor is nice. Google it.
There are lots of niggly little differences between the browsers when it comes to content editing. I don't know of any library that irons out all the differences and I suspect that anyone writing such a library would simply write a browser-based WYSIWYG editor. That being the case, your best bet is probably to look at how the big open source editors such as TinyMCE and CKEditor do it.
There is a configuration property called 'content_editable' in the source code of TinyMCE v3.5.2. This flag prevents an iframe from getting rendered. The published documentation doesn't say anything about this flag. I presume it is because the flag might not have been deeply tested.
I invoked TinyMCE on a contenteditable div and disabled all TinyMCE UI. Basic functionality seems to be working fine.
Init Options:
$('#editor').tinymce({
script_url: '/tinymcecustom/tiny_mce_jquery.js',
content_editable: true,
theme: "simple"
});
Html MarkUp:
<div id="editor" contenteditable="true" style="height: 900px"></div>
EditorTemplate.js (inside the theme folder):
(function () {
tinymce.create('tinymce.themes.SimpleTheme', {
init: function (ed, url) {
this.editor = ed;
},
renderUI: function (o) {
return {
editorContainer: this.editor.id
};
}
});
tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme); })();
This is a complex area which you will struggle with to get right. Also if you are allowing users to Paste content then using an iFrame is the best way to ensure valid results and not mess up the page.
Aloha editor, TinyMCE etc. are rather big and bloated. I suggest you have a look at WYSIHTML5 https://github.com/xing/wysihtml5, http:www.createjs.org or for something simpler https://github.com/mquan/freshereditor however I don't recommend this simplistic approach.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm very new to the HTML markup language. I have an html table (that I actually generate dynamically using echo statements from a PHP file), and I want to apply some CSS and JS to it so I can have such niceties as row+col mouseover highlighting and fixed table header for scrolling. I have a few questions,
(More of a general inquiry than a specific question) Where could I find good examples of JS or how could I achieve the desired effects that I mentioned above?
Where do I place the <script> and <link> tags to import JS and CSS files so that they take effect on my table? Up until now, I place the tags in the <head> of my HTML body. I've been messing around with various examples I've come across and tried copying the JS code into a file and then telling HTML where to look using the tags but I never seem to be able to have the CSS or JS files execute
This is a very broad question as there are many ways to do this, but I would recommend checking out examples that are somewhat industry standards nowadays such as Bootstrap. They have classes like table-hover that will do atleast your row highlighting. This is a good basis to build off of.
You will want to store the css documents in the head of the page, but your scripts can be loaded in the head of the page or the end of the body. I suspect that the reason your JS documents may not be executing as you would like is because you have code that requires DOM elements (the elements on the page) to be present for event handlers and such to execute upon. You need to wait to execute the code until the DOM elements are done rendering, or atleast those that you are needing to modify.
I know Codecademy's free courses provide decent examples and practices, but other than that I'm not sure.
Most of the time CSS will be linked in the <head> and is what you'll want to do. The most agreed upon location to link you're JS is at the bottom of the page just before the </body> tag.
With your table styles, just browse around looking for some frameworks, these look great.
Where you place your <script> tags doesn't matter, they can go in your <head> or your <body>. Your <link> tags can go in your head only though.
For the effects you seek, I'm not convinced you need JS, CSS alone should probably be able to do it in itself - although styling tables isn't something I've done in recent years.
Linking to your css and js file can be done from the <head>.
If you have trouble getting it to succeed:
"inspect" your page in your browser (depends on the browser how to start it)
look for errors both on the server and/or the console of the browser
I'd expect something to be wrong with the path: if it's a relative path (not starting with http(s):// nor with "/"): it's relative to the path the html is on. If it's an absolute path well then that's from the doc root in the server.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 5 years ago.
Improve this question
I believe I have found a bug in HTML / JavaScript, but I have no idea where to post this bug. Any information on where to post such bugs is appreciated.
The bug can be recreated as follows:
Go to W3Schools Tryit Editor
Make sure you have some other tab open in the same window
Click on the input field to focus it
Click on a different tab in your browser
Depending on your browser, different effects will occur (all unwanted)
This has been tested in Chrome (it will give an infinitely repeating alert), on Firefox (it will give the alert, but not switch tabs when clicking the alert away), and on Edge (it will show that the new tab is selected in the tabs bar, but the rest of the page doesn't switchenter link description here).
Since this bug occurs in multiple browsers, and also since the bug occurs with sample code from w3schools, I believe that this bug is related to HTML / JavaScript more than to a specific browser.
W3Schools isn't affiliated with W3C, the organisation who maintain the HTML specification. Nor are they affiliated with Ecma International, the organisation who maintain the JavaScript specification. Nor, for that matter, are they affiliated with any browser.
The code they've supplied here is their own code. It's not official by any stretch of the imagination: it's code that you or I could have written.
However that said, it looks like you have discovered a bug which affects multiple browsers. This is something you an report on the various browser channels if you so desire. Potorr has already linked you to a couple of these, which can be found by simply searching for something like "{browser name} bug tracker" with a search engine.
However you may consider instead posting directly on W3Schools' forum, as, after all, this is their code: http://w3schools.invisionzone.com/index.php?/forum/45-general.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have content that has taken me a long time to create. From what I understand there is no way to stop a person getting at the content and copying it if they access the source. However is there a way to stop the users from doing a simple copy from the screen? A non jQuery way. Thanks
Rules of the web 101: if it is on their screen, they can have it. That's because in order for the user to see content on your site, your site must first enter the realms of their territory, their turf, their house. In order for people to see your website, the stuff that is on your website must travel along the power lines that eventually leads in to their home. Once that information is in their home, it's just a matter of keeping it there. It's just the way emissions work.
You can use tricks to make it harder such as converting your text to an image so the user has to type it out again, but OCR can work around that, and it'll take up more precious space on your site. You can disable right click, but this is easy to work around. Not only do browser extensions exist to re-enable right clicking, Javascript could easily be turned off in any browser, breaking that protection. You could use Flash to protect your text, pretty much the same case scenario as an image. No matter what you do, the user can in some way record or recreate your content. If it is copyrighted, the only way is to use the legal system to ensure there are no unauthorized copies, but once again, the rules of the web state if it is on their screen, they can have it.
Some answers will probably suggest these tricks to make it harder, and you can implement them, but they are never foolproof and they might scare away what was otherwise a potential fan or customer. Since I know all this, if I see a site that disables right click I feel like the site owner doesn't know how useless it is what they're doing, and by extension don't know what they're doing at all.
anybody who even know how to access the developer tools of the browser will tear down the page and get the content needed anyway...so if you ask me it is not really worth the effort and plus it just gets annoying to users and a bad UI design .
but even if you disregard the above paragraph then here is a link you can refer.. http://www.hypergurl.com/norightclick.html
here is another way you can slow down people from copying images..
<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by GreenLava (BloggerSentral.com)
Version 1.0
You are free to copy and share this code but please do not remove this credit notice.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
alert(alertMsg);
return false;
}
}
var alertMsg = "Image context menu is disabled";
document.oncontextmenu = nocontext;
//]]>
</script>
Now this diables right click on images that was defined with "img" tag....you can extend this to other tags as well.
But for usability sake dont do it as it is not worth it and also wont achieve anything.
DO NOT DO THIS
...As if you are gonna listen to me. One of the most straightforward ways is to use the built-in event copy. The event is trigerred when someone copies anything from the element to which the event is attached.
document.getElementById('myContent').oncopy = function() {
/*alert("do something if you want to here")*/
return false;
};
input {
width: 400px;
}
<span id="myContent">Your content which you don't wanna be copied!</span>
<br/>
<input placeholder="try copying and pasting the above here to test" />
See the above for a simple test. You can attach the event to the html element to add the effect to all the elements.
DO NOT DO THIS
P.S. Check browser support for the copy event.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Because of business rules and requirements, I need an element that is tab-able (without the use of tabindex), looks like a link, only has javascript functionality (it needs to make an ajax call to a web service for instance) and it cannot contain any special character such as '#' because the url will have that at the end and that will be blocked by our firewall which is set very strict due to external regulations.
Also the href cannot be empty because of our web site resides inside Sharepoint and keeping it empty means that you are redirected to the default landing page.
I've come across various questions which all contain some truth and arguments to use one element over the other, but none of those questions contained a satisfying answer, if it even had a marked answer. E.g.:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Is an empty href valid?
those two examples are not completely satisfying because for the first one, eventhough one answer has a high amount of votes but I'm not sure if that answer meets the above requirements. the second one for the same reason really.
In summary, which of the below options is preferred, keeping the restrictions and requirements in mind as well as known best practices for semantics and javascript?
OR
OR
OR
<button class="action"></button>
OR
<span class="action"></span>
WITH (example) ajax call:
<script>
$('.action').click(function() {
$.ajax({
url: "test.html",
context: document.body
})
.done(function() {
$(this).addClass("done");
});
});
});
</script>
As mentioned the restrictions cannot be changed. Period.
I remember once a teacher told me that the best was to use a <a> tag ahd the href should point to a page that probably does the exact same thing as the javascript event. So if for any reason the javascript is desactivated on the browser, the user could still use the website as any normal website... but well that works fine on papers... but it would be hard to implement.
If you add javascript code on the href or onclick your user wont be able to open the link on a new tab (by using the middle button or with the context menu)... I personally hate that on a website... links should be used to "link" pages.. not to make javascript changes on the current page, so a <button> seems more semantic to me...
You should also consider SEO (maybe) because robots will try to follow your links to index pages, but they wont follow buttons. Seo is a gray area, but i'd not be surprised if the robots have a max limit of links to follow.. and if your page has lots of links that are used only for js, maybe the robots are not able to correctly index your site
Finally, I rather have unobtrusive Js, so I really try to separate behavior from presentation. I find it ugly when i see html and js together
So i'd go with:
<button class="action"></button>
with an event listener on JS... hey.. but that's just me :)
Hope this helps
Personally, I like to use <a href="javascript:void(null);"> for my JavaScript-powered links. I know it's overkill, I know that javascript:; would be just as sufficient, but it's a habit I picked up.
That said, if the JavaScript has a non-JavaScript alternative (such as a link that might take you to a form, that has JavaScript to pop up the form in a dialog), I would use that as the href and make sure to prevent the default action in the event handler.
<button> is not a good idea unless you specifically want it to look like a button - depending on your site, this may be a good or bad thing, but you get a lot more freedom by using <a> and CSS.
'a' tag with any href you want + event.preventDefault() on onclick function can help you, I think. Why 'a', becouse it good for styling you tabs headers, for example
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Are there any iPad compatible wysiwyg HTML editors?
Edit: What I'm looking for is something that would work on a web app, not a native iPad app.
I think that the GDocs editor might work, but keep in mind that there's almost no editor like that, they are managing everything by themselves.
The rest of editors try to use contentEditable, and Apple itself warns against using it with the iPad: http://developer.apple.com/library/ios/technotes/tn2010/tn2262/#//apple_ref/doc/uid/DTS40009577-CH1-DontLinkElementID_7
I would advise you to use NicEditor which has an option of using content editable divs rather than iframe(has some issues in ipad)
I don't know but think that what you are after is something to edit the code of a web app. If it is then since the web app is essentially a web page you could use any text editor, I personally like Gusto for the iPad- http://itunes.apple.com/us/app/gusto/id364906873?mt=8.
Either that or you are looking for a HTML editor which is a web app itself. In that case, sorry I don't know of any.
I am sure there may be a few that exist. I have not had any experience with either but take a look at the below links:
iPad HTML Editor - http://itunes.apple.com/us/app/kytekhtmleditor/id349354394?mt=8
SquareSpace for iPad - http://mashable.com/2010/12/21/squarespace-ipad/
Check out the following Web (html) Wysiwyg Editors.:
Dreamweaver
Flux (Mac only)
Creative Suite
Expression Web/Studio
There are a quite few available WYSIWYG editors and some are even free. However, 'free' is not always best as the code compilation may not be optimal and important features are lacking.
Hope that helps!
I was also looking for this too and couldn't find it so I coded it myself.
iPad web based Code Editor (with extra symbols keyboard)
It is a web-based code editor that allows you to type in all the symbols and characters used when programming (brackets, equal sign, tab, quotes...). It is currently in a very early stage so you will need to copy/paste the code, edit, copy/paste again somewhere else (Dropbox, FTP client).
You may also want to check out CodeAnywhere, they have a native app AND also a web-app.
I've experienced a similar issue in a web app I've developed that does not allow wysiwyg editing when run on an IPad/IPhone. The wysiwyg component I use is Telerik's RadEditor (a terrific product, btw), and Telerik has posted a KB page regarding this issue at http://www.telerik.com/support/kb/aspnet-ajax/editor/support-for-iphone-ipad-browser.aspx. It seems, at this point, that Apple has chosen to lock down Safari on the IPad/IPhone in such a way that these rich text editors do not work. I haven't yet seen an alternative solution to this (other than allowing IPad/IPhone users to enter their content in a plain ol' textbox) but am keeping my ear to the ground.