Make TinyMCE follow anchors within textarea - javascript

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.

Related

Ckeditor plugin functionality not working after using setData("hai");

I'm using the ck-editor(4.4.6). In Ck-editor's textarea I want to update my text, for that I use setData("hai"); that text updating correctly but some plugin functionality not working after use this setData(); (eg. restrict multiple enter if I reload the page it's working correctly).
editorInstance.setData("test text");
Anyway first time and after reload the page it working fine.
ruby on rails with jquery things are I'm using.
How can I solve this?
I don't know about ck-editor(4.4.6) but i can give you a way to solve it. You have to use based on your parent class. First time it works because it was same but after that it did't find the class/your specific term/attribute. So you have to use by calling parent class/id and under your activity.
You will need to call the update element function after setting the data, this will actually set the value in the field.
And, also you will need to specify the id of the textarea as given below.
CKEDITOR.instances.id_of_textarea.setData('hai');
CKEDITOR.instances.id_of_textarea.updateElement();
Finally, I got the answer instead of set data I just add my content to CKEditor text area as link this its working fine:
$('#cke_editor1 iframe').contents().find('body').html("Your text");

Getting specific content from TinyMCE editor

I have a plugin im building for wordpress that injects a shortcode with content inside it after the user selects options for that plugin. What im having trouble with is tinyMCE.get('content').getContent() this is called when a user wants to update those options but using this pulls everything thats in tinymce, I need it limited to the content inside the shortcode open and close tags. For example: after a user selects options of the plugin, a shortcode of [plugin]---HTML OPTIONS---[/plugin] will be created but when tinyMCE.get('content').getContent() is called I need it to grab everything inside of said plugin tags and nothing else like so: [plugin]---GET THIS CODE----[/plugin] any help would be grateful. Let me know if you need clarification on anything.
If I understand what you are attempting then what you are looking for is the
tinymce.dom.Selection class (doc)
More specifically:
// Sets some contents to the current selection in the editor
tinymce.activeEditor.selection.setContent('Some contents');
// Gets the current selection
alert(tinymce.activeEditor.selection.getContent());
You might take a look at code in some of the available plugins. The link plugin in particular works with text selections.

CodeMirror - Linking DOM Element to Code Lines

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?

TinyMCE: validate elements on each keystroke

I'm using TinyMCE as a base for a WYSIWYG editor, and I'd like to only allow a subset of HTML elements to be entered in it, whatever the mean.
There are three different means of entering HTML elements into the editor: buttons (such as a bold button), shortcuts (CTRL+B for bold) and copy-pasting.
I'm using a custom template, so I only have a limited number of buttons that allow for a certain number of elements.
But using shortcuts or copy/pasting, the user can add whatever he wants to the editor.
The valid_elements configuration option allows to filter out elements (it works as a whitelist), but it's only triggered on cleanup, which (AFAIK) is only run when the form is submitted.
This is great, but I don't want things to be added to the editor in the first place if they're not valid elements.
How could I achieve that behavior?
This is great, but I don't want things to be added to the editor in
the first place if they're not valid elements.
This is not that easy because you will need to check each way of which code can get into the editor and check before the insertion if the html code is valid. It might be easier to call the cleanup yourself on those actions:ed.execCommand('mceCleanup');
Otherwise you will have to check for
the insertion using the code plugin
copy/paste using the paste_preprocess setting
the insertion using the code plugin
and the most annoying: pasting using the right click browser menu (this is a pain in the ass to handle)

how to permanenlty remove a div using jQuery

I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation

Categories