I have created a simple website, now when I dubble click on my text on the website I want to show a 'tinymce box' that's able to edit my current text. Is that possible and how can I do that with javascript/jquery?
Check out TinyMCE's own documentation page, which is full of resources.
For example if you want to show a TinyMCE on button click, you need something like this:
http://tinymce.moxiecode.com/tryit/load_on_demand.php
First you might want to turn you div or whatever into a textarea, and then call the appropriate TinyMCE method.
Sorry for the not too detailed answer, but the question was not too detailed either...
Another easier solution might be to use functionylity that is there already. Seems like you are looking for the code plugin. On Click a box opens and the user can edit the html source of the editor content.
One of the optional buttons has 'html' written on it and can be used to go into HTML editing mode. You can see it in this full featured example - 6 places left of the top-right corner. In order to enable it on your own website you will need to add "code" to the list of plugins and "code" to the list of buttons.
Related
I have a noob question about the Sources panel in dev tools: when in the Elements tab I see my CSS to the right. I click on a CSS file and am brought to the Sources tab where I can make live edits.
I can bring up the JS and do the same, but...
If I bring up the HTML file, I am unable to make any edits to the HTML. Why is this? Is this by design? What am I missing?
Once the DOM is loaded, the browser doesn't use the original source, since the DOM can be modified on the fly by Javascript. If you want to make live edits to the DOM, you can do it in the Elements tab. Right click on an element or attribute, and there are options to edit it.
If I understood you correctly, you are trying to edit the left side of source. Try to double click on position when you want to edit code or get right click mouse and click on "Edit as HTML".
In this case, you can click on three horizontal dots which will appear on the left side of the same line where you will click once( just single click and enjoy ). A single click on the line to edit and then single click on three dots which will appe
I had the same issue and a search got me to here.
For me what fixed it was to open the navagator bar, then click "filesystem", then click "add folder to workspace" , then click the folder location of whatever file you are wanting to edit. Once done, I was able to edit the html freely.
I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.
Here is script in my website's footer that will check that specific font installed or not in computer. If installed or not it will prompt alert box. I want to customize:
Design of that alert box
Replace the 'OK' button with 'Download' button that also have download link.
Write some RTL words in new paragraph. For Example Urdu words like آپ کے کمپیوٹر میں۔۔۔۔
Just accept that it's not going to be an alert() box, but rather it's just going to be normal HTML+CSS. So you will just position the box wherever you want it with whatever buttons you want and whatever way you want it to look. Or if so you'd whish their are plugins which already do this for you (though they limit your options quite a bit of course). You might want to look at jQuery UI if you're using jquery for example (specifically the dialog component of jQuery UI).
you have to use jquery dialog box for this type of customization. Use this link
I use Sweetalert for designing the Alert box. its easy, simple and efficient.
here is the link to download SweetAlert and example codes worked out at Here
Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer.com)?
(see video at 0:15)
http://www.youtube.com/watch?v=oy89HnIJsE4&feature=plcp
Basically, what I wish is to be able to:
take a copy of a web page, (that part is ok),
somehow enable edit mode (as would be done in any text editor),
click on the element I wish to edit, and be able to modify the selected element
Edit: sorry I wasn't clear enough: my end goal is to enable my users to do live editing online (as done by visualwebsiteoptimizer.com) in a visual way.
You could use designMode=on on the document, or contentEditable=true on specific elements. See for a small demo http://html5demos.com/contenteditable/. In addition, you could also catch mouseclicks and keydowns with jQuery and check the target element as to show options like CSS etc..!
1 - use google chrome.
2 - hit ctrl + shift + i
3 - go to elements tab
4 - right click on the html you want to edit and select "edit as html" or double click in the text you want to change in that tab
You can try using Jelliphy. Jelliphy is a tool that allows any users to edit any text of a web page, to move and resize elements in the page, to draw on the page, to edit the images and much more.
Jelliphy Lite and Jelliphy Extended are bookmarklets that you can use with any browser for free: just go to the page to change and click the Jelliphy link from your favorites.
Here is what you need, enjoy: http://myedit.io
I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?