I know that I can add an autocomplete list in ACE editor as below
completions.push({ name:"testing1", value:"testing1", meta: "code1" });
completions.push({ name:"testing2", value:"testing2", meta: "code2" });
My requirement is to add an icon adjacent to "code1" in the autocomplete popup. I tried to use <img> in meta value but it didn't work. I saw the ace's source code but didn't see a way to implement it.
Has anyone done this before?
Update:
I did it myself and added details in the answer below
Using an <img> tag in the meta text won't work because it isn't interpreted as HTML.
If you can include additional information in your autocomplete objects, you could:
completions.push({ name:"testing1", value:"testing1", meta: "code1", icon: "code1.png" });
From there, you could find the code that creates the autocomplete popup and add a conditional if statement that optionally adds an <img> tag.
I found a way to do it through css.
Added className property to the completion object
completions.push({ name:"test", value:"test", meta: "test", className:"iconable"});
And added icon in css:
.ace_iconable:after
{
content: " \f14c"; /* in my case it is font-awesome icon*/
font-family: FontAwesome;
}
Ace.Tern extension supports using an iconClass property in autocomplete extension. See it on github
However this is not something currently in Ace editor. I would say if you need to support just static styles, using className property (see it on github) and using before pseudo class to load them. In my case I need to do some post processing of the items in autocomplete popups, hence I need to listen to the 'afterRender' events like this one so that I can dynamically inject my icons in it.
Related
I'm testing out CKEditor
I'm trying to get the display in the editor, to match my sites css style for displaying the end result.
What I'm trying to do is style the "wrap code" button to match the css of my site, by adding in a class.
I've seen on this page of the manual, that you can do stuff like this:
config.format_pre = { element: 'pre', attributes: { 'class': 'editorCode' } };
However, doing the same for a code block like so:
config.format_code = { element: 'code', attributes: { 'class': 'someclass' } };
Doesn't actually do anything. Anyone got a pointer on what I might be missing?
I've tested it working on other elements, so I know the config file changes are being picked up.
The one important thing is that every tag which is formatted via config.format_tagname should be also included in config.format_tags. However, this two settings (config.format_tagname and config.format_tags) works only form Block-Level elements (as stated in the manual page you referenced ).
As code element is considered as an inline one by CKEditor (see DTD), it is not possible to use this config here.
However, the easiest way to modify the elements added via Style dropdown is to edit styles.js file which is present in CKEditor directory. The dropdown styles are based on this file, so you can easily modify code element there. You can also define your custom stylesSet.
I have tried to add a rich text editor to my application. I'm using nicEdit.
bkLib.onDomLoaded(function() {
nicEditors.editors.push(new nicEditor().panelInstance(document.getElementById('single_answer_description')));
});
I added this part to convert my normal textarea to a richtext editor. It looks fine:
What I want to do now is to only show some of the icons like B, I, U. I don't want all the icons. How can I hide those? I also want to set font family by default inside the rich text editor content.
I tried to search so many links but I couldn't get any proper solution for this issue. Please help me to get out of this issue. Thanks in advance.
As per the documentation
You can add an array of the buttons you want when you instantiate the object.
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor({buttonList:['bold','italic']}).panelInstance(document.getElementById('single_answer_description')));
});
I'm trying to modify (by CSS) the dark gray "Contact Us" button that's at the bottom right side of the following site: coloraddicted.com.
This is a button created by an external app, so the code is inaccessible. I only have the following (external) page to refer to for the possibility of finding the right id: https://icf.improvely.com/icf-button.js?v=1479350309&shop=coloraddicted-com.myshopify.com
How can I find the "id" of the specific element in order to apply the
"overriding" CSS to it?
BTW, I have already tried several versions of the id's I see on the above mentioned external page but still haven't found the right one.
I can't remember all of them, but some I have already tried are:
#icf_button
#icf.click_button
#icf_contact_form button {
#icf_contact_form add_button {
Style Contact button by css has no effect, because right after user hover, js code excuted & override on.
You can put js code at the end of the body, to re-override on the library code (not the good way, but have to), example
let contactButton = document.querySelector('#shop-colorful-products-printed-on-demand-just-for-you > div:nth-child(38)');
contactButton.style.backgroundColor = 'white';
Demo image https://tinker.press/images/change-style-by-js-to-override-2017-01-17_090946.png
If you can't modify the button.js script you linked to, I don't think you can target this (reliably) in CSS. They style everything with that button using inline styles and just append it to body.
You could potentially use :nth-of-type (like https://icf.improvely.com/icf-button.js?v=1479350309&shop=coloraddicted-com.myshopify.com) but that would be super unreliable as I'm assuming you have a bunch of scripts and stuff on the site that dynamically append to the page, creating a variable number of divs as direct descendants of body. FWIW, nth-of-type(13) worked for me.
The element doesn't have an id, so you can't select it that way. But the site appears to be using jQuery, so you could try using :contains() to target the element based on its contents:
$( "div:contains('Contact Us')" ).css( "font-size", "2em" );
But that would target any div containing the text "Contact Us". You can use :filter to select divs that contain only the text "Contact Us":
$("div").filter(function() {
return $.trim($(this).text()) === "Contact Us";
}).css("font-size", "2em");
You could use jQuery to either apply CSS directly, or to give the element an id. This solution is kind of kludgy, but might work in a pinch.
How can I define custom html tags in ckeditor.
When user select a word e.g. Apple.
Then I want to replace this with profileTag Apple /profileTag".
But if the selected word already has a tag then it should append the profile tag.
For example if anchorTag Apple /anchorTag then after user selection it will be profileTag anchorTag Apple /anchorTag /profileTag.
The above thing is working. But when I execute the below code the output is null in case of custom html tag like profile tag.
var current_selected_element = editor.getSelection().getSelectedElement();
console.log(current_selected_element);
The problem is that CKeditor's advanced content filter is filtering out your custom tags ... you're going to have to configure the ACF to accept the custom tags your plugin is creating and inserting into the DOM. There are a couple ways this can be done. The most basic would be to implement config.extraAllowedContent = 'profile' or whatever the name of your custom markup will be. Otherwise you can work with the global CKEditor.filter object. There's more documentation on the CKEDITOR.filter object here.
I'm trying to create a tooltip for a few radio button options on a page. I've got the tooltips displaying the [title] attribute easily enough, but I want to selectively format the tooltip text in a couple elements. I know I can provide content as HTML, and I've created some classes to style the content, but now the tooltips are no longer showing. I think my problem is that I am not specifying the "items" option properly. In fact, I'm not quite sure how to define my html "content" option as an item at all. Halp plays!
JS
$('#tooltip').tooltip({
tooltipClass: "tooltip-class"
items: what do?
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});
HTML selected by JS
Thanks for reading. :)
UPDATE:
Ok! I figured it out... kinda. I was encasing my strings improperly: "<>"bad code"<>" . The solution to my problems with the content option was to put my html inside a variable and set it to content. JQuery seems to have liked that much better. My styles are showing up properly for the tooltip, but for some reason it is only working on one of three items selected for tooltips. There's nothing in the console that indicates it shouldn't work. No syntax errors, I'm selecting the correct id. I'm so confused.
I think I know what you are running into. When you use the content option you still have to include the title attribute on the element OR specify the items option as something different.
I have NO IDEA why the jQuery team decided to do this, as it seems the selector you are applying the tooltip to, would be the same thing used for the items option. Quite duplicative.
Anyway, you can change the content but make sure the element you are applying a tooltip to has the title attribute or you specify the items option with a selector which could simply match the selector you are applying the tooltip to. Odd indeed.
Example:
$('#selector').tooltip({ content: 'your content', items: '#selector' });
when you have problems with quotes, you have many options, like you said:
use another variable as you finally did
escape the "inner" qoutes with backslashes like this:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: "<div class=\"tooltip-header\">header</div><div class=\"tooltip-description\">text</div>"
});
combine single and double quotes:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: '<div class="tooltip-header">header</div><div class="tooltip-description">text</div>'
});
you second problem after UPDATE:
if you have created your link with id and you are applying tooltip with id selector
there can be only one link with same id in one html page! so if you declared more links with the same id, most likely it wont work.
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
This produces a syntax error.
Please do the following:
learn how to use your browser’s JS error console
learn the absolute basics of the JS syntax, and how to operate with strings/text literals