Load grid row data into CodeMirror - get CodeMirror reference - javascript

I am building a small extjs 5.1 app for personal use, designed to save examples of functions / methods used in my extjs apps.
I've given the most important steps with the help of Navaneeth-Kesavan and Tarabass in this Post
Now I'm struggling to load in CodeMirror editor the grid row data.
After several unsuccessful attempts, I am trying to load the data into a hidden textarea and then get value of this textarea and paste the value (setValue) in CodeMirror.
However, I am not able to get the CodeMirror reference.
I would appreciate suggestions to fix this.
By the way, what better way to do this?
MiFiddle

CodeMirror element can be found as sibling of the textarea element. You can get reference to it by using the following code:
var codeMirrorInstance = textAreaComponent.getEl( ).query('.CodeMirror')[0].CodeMirror;
Please refer below fiddle which I created by editing yours.
https://fiddle.sencha.com/#fiddle/tee

Related

TinyMCE public methods to parse HTML like paste plugin in other editor

I have two editors in my application. One is tinyMCE and other is different one.
Is there any tinyMCE public methods that I can use to filter html tags and css that I can use for other editor.
pasteRetainStyleProperties = ['font-weight', 'font-style', 'font-size'];
pasteValidElements = ['b', 'strong', 'i', 'em'];
This is similar to the tinyMCE 4 feature. However I have to filter HTML string in the similar way. I am trying to build this for other editor. Hence I am wondering instead of building it from scratch is there any tinyMCE methods that I can use outside tinyMCE. Or any other 3rd party library help me achieve the same.
Any help would be greatly appreciated.
Thanks,
Shridhar
I believe, TinyMCE 5 has almost exactly the same options as that you've mentioned in the code block:
paste_retain_style_properties
paste_word_valid_elements
However, all the settings, defined in the tinymce.init() function cannot be changed without reinitialization. Reinitialization can be done very fast. You will need to perform 4 steps:
Save current content somewhere with getContent()
Destroy the TinyMCE instance with destroy()
Reinitialize
Use setContent() to add the content saved on step 1.

Open Javascript code in editor on click

I am trying to create an interactive tutorial for learning an API. I've been googling my options for an entire day now. I came across ace, code mirror etc. but I'm not sure how I can use them in my case.
What I wish to do is that when the user clicks a button, a javascript code linked to it should open up in an editor on the same webpage. This would aid the users to see how the code is working and give them scope to modify and learn.
I know its not a constructive question but any help is appreciated! Thanks!
you can just wantch here how it is done
They made it with knockout MVVM but you can use angular or anything else you like.
I used tags to store my code and displayed it using codemirror's setValue property mentioned by #georg.

onContext change in splunk using javascript

i have a splunk app and now i want to add an oncontext change option with those app. i have 6 forms and each are having separate,pulldowns/dropdowns,
could somebody can help me in creating a javascript*(actually i am confused whether it can be done with javascript)* to update all the dropdowns, if the context of any of the drop down changes, actualy all the dropdowns are populating same input i.e source filename.
please help
Thank you
Sruthy
You don't even need custom javascript to accomplish this in Splunk.
You can do this in a Splunk Advanced XML View.
I would recommend having look at the examples in this app : http://splunk-base.splunk.com/apps/64805/splunk-dashboard-examples
this explains it well. thanks for your assistance. append the javascript specified in t

CKEditor: how to change editor behaviour without changing it's source code?

I mean next thing: I want to add some specific class to table when it's creating in editor area (iframe) for default styling reasons. I now how to do this with changing it's source code of plugin table, but it is bad decision to change that files... And it is impossible to do through configs. Maybe there is some way to redefine table behaviour on the fly...
What will be the best solution in this case?
Thanks in advance!
You can write a plugin to modify the behavior of the table dialog or any other one on the fly. How far you can go with this approach depends on your abilities and which changes do you want. If it becomes too complex to adjust this way then the second approach is to copy the original plugin that you want to modify and create your own version based on that (but outside the CKEditor source folder)
This plugin for example adds a field in the Table and Cell dialogs to pick a background image: http://cksource.com/forums/viewtopic.php?f=18&t=23607
You can learn how to write your plugins by following the CKEditor tutorials.
I think changing the source code for "styling reasons" is a bad idea.
You can easily change the default CSS by changing the default skin (v2 skin I think) or by adding a custom skin to CKEditor.
Documentation
Developers Guide

Use javascript/jquery to modify edit-body field when editing a drupal node

I'm trying to manipulate the edit-body field with javascript just before I save a node in Drupal and can't seem to modify the content with consistent results. I used the following example code:
var oEditor = FCKeditorAPI.GetInstance('edit-body');
htmlstr = "<p>Hello World</p>";
oEditor.SetData(htmlstr);
And sometimes my changes are going through and other times my content is duplicated.
I tried disabling the wysiwyg editor so I can see the raw html code and tried alter the edit-body field with Javascript and that didn't do anything. The edit-body field remained the same.
Can anybody shed any light on this?
Thanks
Steve
You should consider doing this in a validation or submit handler instead. That way you wont be dependent on the user's browser.
You can do this by using hook_form_alter.

Categories