Here is example of my snippet:
'.source.css':
'CSS Comment':
'prefix': 'comment'
'body': '/* [${1:Comment text}]\n------------------------------------------------------------ */\n${2}'
So, after typing // in *.css files it is not working.
How to fix?
To use the snippet you have to type the value from prefix (in case of the sample you provided it is 'comment') and press the TAB key. You have to replace 'comment' with '//'. There might also be an issue with indentation. This works fine for me:
'.source.css':
'CSS Comment':
'prefix': '//'
'body': '/* [${1:Comment text}]\n------------------------------------------------------------ */\n${2}'
Related
I have mainly worked with cypress previously for e2e automated testing, I have now started working on webdriverIO. So for a cypress command such as
cy.get("[data-testid='nav-bar']").contains("Search Box").click();
What would be the equivalent for this in webdriverIO? I have tried the following approach in a PageObject Model.
class HomePage extends Page {
get navBar() {
return browser.$("[data-testid='nav-bar']");
}
openSearchBox() {
this.navBar().click('//*[text="Search Box"]');
}
}
However, this approach does not seem to work, any help on this would be appreciated.
Leaving Page Objects asside for now, you'd type this in WebdriverIO:
const bar = $('[data-testid='nav-bar']');
expect(bar.getText()).toInclude('Search Box');
bar.click();
You can use chai for the assertion instead of Jest Matchers:
const expectChai = require('chai').expect;
// ...
expectChai(bar.getText()).to.have.string('Search Box');
// ...
The exact analog to
cy.get("[data-testid='nav-bar']").contains("Search Box").click();
can be achieved with xpath selector
$("[data-testid='nav-bar']").$("./*[descendant-or-self::*[contains(text(), 'Search Box')]]").click();
It looks a bit ugly though, consider adding a custom command that would mimic Cypress's contains:
// put this to `before` hook in your wdio.conf.js
browser.addCommand('cyContains', function(text) {
this.waitForExist()
return this.$(`./*[descendant-or-self::*[contains(text(), '${text}')]]`)
}, true)
$("[data-testid='nav-bar']").cyContains("Search Box").click();
P.S.
Check out the selector in the browser console right on this page, paste in the browser console
$x("//span[descendant-or-self::*[contains(text(), 'Search Box')]]")
I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...
My problem is I have a plugin which works fine when there is only 1 CKEditor in the page. You can open and close the custom plugin dialog as many times as you want, and make all your changes.
However, as soon as you open the plugin on any of the other CKEditors on the page, the values from the previous CKEditor instance are still present, and a lot of quirks happen.
I tried using the dialog.destroy() function, which "fixes" the issue - meaning you can now use it fine on all the different CKEditor instances. But it breaks the current instance, meaning if you try to open any you already used again, it doesn't work (since the dialog has been destroyed). I tried using reset() and replace() to no avail.
Maybe it has something to do with the fields themselves... here is a sample from the dialogs/my_plugin.js file:
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: 'icon_with_options',
html: '<div id="selected-icon"></div>',
},
{
type: 'html',
id: 'osu_icon_color',
html: '<div class="osu-colors"><label>Click on a color <input id="osu-icon-color" type="text" value="osu" readonly/></label>' +
'<p class="osu color-active"></p>' +
'<p class="sand"></p>' +
'<p class="stratosphere"></p>' +
'<p class="moondust"></p>' +
'<p class="dark"></p>' +
'<p class="pine-stand"></p>' +
'<p class="luminance"></p>' +
'<p class="reindeer-moss"></p>' +
'</div>',
onLoad: function () {
(function ($) {
var colors = $('.osu-colors p');
colors.click(function (e) {
colors.removeClass('color-active');
var className = e.currentTarget.className;
document.getElementById('osu-icon-color').value = className;
icon_preview();
$(this).addClass('color-active');
});
})(jQuery);
},
},
I wonder if the problem is that most HTML is decoration.
I did samples with the plugin using regular type:text and type:select and these worked fine. But somehow the type:'html' does not clear the same way and is causing issues. Unfortunately all examples online are of simple text elements or other prebuilt elements.
Any help is appreciated. This is a plugin inside a Drupal 7 module, but it should apply regardless.
I am sure there are better ways of doing this, but what I ended up doing was:
Since CKEditor gives unique names to every instance of the editor, I used: CKEDITOR.currentInstance.name as an ID that wraps around all the html in the plugin.
Modified my javascript to target everything based on the CKEDITOR.currentInstance.name and any particular ID or class I needed to make it happen.
Now since each instance is differentiated by that ID, all the CKEditor instances in a page work fine.
i ma using nodejs with express to read the content of a text file using node in the backend.
when i hit the service i get the data on the front end.
Object {data: "s1:- hi thank you for calling my name is oh…↵s1:- no worries your welcome bye mam
↵s2:- bye
↵", status: 200, config: Object, statusText: "OK"}
I am able to get the text but i need to format these text based on some keywords such as s1 and s2 and add line break, bold to it on the fly and display that data using angular
First suggestion is if you have access to the file and you control the content maybe you can use Markdown and then use a directive like: angular-markdown-directive
if you can't change the contents you would have to create your own directive that will effectively find and replace those tags in the content and convert them into HTML. and then you can use ng-bind-html to render the output.
it will look something like:
angular.module('specialParse', [])
.directive('specialParse', function() {
return {
template: '<div ng-bind-html="content"></div>',
link: function(scope, element, attr) {
scope.content = attr.specialParse
.replace(/\r?\n/g, '<br />') // Replace line breaks
.replace('s1', 'something') // Special tag
.replace('s2', 'somethingElse'); // Special tag
// ..... And so on.
}
}
});
And the HTML
<div special-parse="data"></div>
I am trying to add the CKEditor to a page I am currently developing but am having problems getting it to pick up my custom configuration file? I am using CKEditor in Visual Studio.NET 2008. I need to customize the toolbars that are displayed, as Basic is too minimal and Full would give an overwhelming amount of buttons to the user.
I am declaring the editor in the aspx page as follows:
<script type="text/javascript">
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: 'myconfig.js' }
);
</script>
the myconfig.js file itself is in the root of the ckeditor directory (where config.js resides).
However, desipite rendering the CKEditor itself, it seems to be completely ignoring my custom config file. I was wondering if anyone had any suggestions?
Thanks!
The contents of the custom config file are as follows:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'en';
config.defaultLanguage = 'en';
config.uiColor = '#000000';
};
CKEDITOR.config.toolbar_Full = [['Save', '-', 'Preview', '-' 'Print'],
['Undo', 'Redo'], ['Cut', 'Copy', 'Paste', 'PasteFromWord', 'SelectAll'],
['Find', 'Replace'],
'/',
['Bold', 'Italic', 'Unnderline', 'Strike', '-', 'Subscript', 'Superscript']];
Thought I'd post up a solution. The path in the:
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: 'myconfig.js' }
is from the root of the website, not relative to the directory from CKEditor.
So my declaration should have been as follows
<script type="text/javascript">
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: '/ckeditor/myconfig.js' }
);
</script>
Hopefully I might have helped someone else in a similar boat as documentation on CKEditor is a little thin on the ground.