I am implementing a live HTML code editor and am using codemirror.
My issue is, I am not able to link my code lines with the actual HTML page. Functionality that I want to add is, clicking on an element on the page scrolls the code editor to that particular line in the code.
I was able to do this by adding a unique identifier to the element which clicked and then search for that identifier inside the code editor using the search command. Is there a better way to work this around?
Related
I am looking for a way to inject HTML into an already loaded page in response to a user clicking the page.
Precisely, what I need to do is:
Capture a click
Generate a HTML string to be displayed
Inject that HTML string into the page, to be displayed on top of the current markup.
Of these, 1 is done and 2 is partially complete, so now I need to display the HTML string on top of the current markup (like a pop-up box). The injected markup should disappear when the markup behind it is clicked. How can I do this?
This is being developed as a feature of an Angular2 web app, so I'd like to achieve this using only typescript, HTML and CSS for styling, rather than use an existing library.
A few pointers to make things a little clearer:
Generated HTML will be interactive, so it may be clicked on, not just a simple popup or alert.
Generated HTML should be removed from the DOM when an area outside of that HTML is clicked.
I would like to be able to run a html code with javascript inside a text box. Just like they do it at w3schools.com . I'm only using html and javascript no other languages. Thank you
Example: I have two text areas one where we insert html and click a button and run the html and it displays in the other text area.
I found some code that might make this happen but can not get it to work. I'm using chrome if that helps.
Here is the link to the basic code where i went to get this from.
http://forgottengamer.blogspot.com/2013/01/make-html-editor-like-w3schools-try-it.html
Here is a link to my code
https://docs.google.com/document/d/1pT2SVBaUkqeZo5n3ow76HDrG3OzO6zzohUFH6r6RCJY/edit?usp=sharing
To achieve this, you'll need to do the following
Create a textbox where user will enter its HTML content.
On submit, create a dynamic iframe with dynamically inserting the DOM from the HTML of the user entered above.
This should be fairly easy ignoring the security measures. Upto you!
I am using CkEditor to edit content and calling that page via ajax. It is working fine for first page load. But when I load another page, in console I see error that Instance is already exists. So tried to replace all textarea using CKEDITOR.replaceAll(); in everypage. But Again I get same error. When I searched for this error. I came accross other stackoverflow question With answer
if(editor.instance(Instancename) {
CKEDITOR.instances.textarea.destroy();
}
But I have multiple textarea,generated randomly so I can not use that code as I don't know id or name of textarea. Anyone have better suggesation what I should do to replace textarea to ckeditor?
When you are using CKEDITOR.replaceAll()
will create an instance but you are not reloading the page, so it will not destroy.
You have to distroy it manually.
But as you said you have multiple textarea generated randomly, you can use
CKEDITOR.replaceAll('className');
All you have to do is give classes to text-area (same class in onepage) and write this code right after you appending html to div.
And use /ckeditor/adapters/jquery.js
I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});
I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.
I am trying to find a method of making TinyMCE follow anchor links within the textarea. I am trying to make a table of contents, and would like the ability for users to skip the the desired section in the editor. Is this possible?
Thanks.
You will need to write an own plugin for that setting the cursor position using methods from the tinymce class Selection. The newest tinymce version contains the method setCursorLocation which may be used for example.