Sublime Text 3 Plugin HTML Popup Rendering - sublimetext

I am attempting to create a Sublime Text 3 plugin and want to display a popup that the user can choose options from. It seems like the only option available is view.show_popup which accepts a html string and some parameters.
Unfortunately the html engine is very limited, and doesn't accept pre-tags or allow inline styling of white-space css.

Self answer for others. Some inline styling like color is supported, however "whitespace: pre" is ignored for some reason. To get around this I used manual formatting.
import sublime_plugin
class ExamplePlugin(sublime_plugin.EventListener):
def on_text_command(self, view, command_name, args):
if command_name == "run_macro_file":
text = "some spaced out text\n\nafter newlines".replace(" ", " ").replace("\n","<br>")
view.show_popup(text, max_width=800, flags=0)

Related

Allow copy / paste in a text_area field form but remove formatting

I have a text_area field in a form which allows some text formatting through a very simple WYSIWYG (bold / underline / bullet points). This was aimed at having a consistent formatting in the description profile of the users.
<%= l.text_area :access, value: "#{t('.access_placeholder_html')}" %>
Nevertheless, some users usually filled the text_area by copy / pasting directly from their website. And their specific formatting "hypertext links", font size, etc. is after reflected on my website, which makes it a bit dirty.
How can I solve this problem. Ideally I would love that when saving the form it gets rid of all the HTML code that is not allowed instead of not allowing copy / paste. Is this possible? Was wondering if should use Sanitize but if so how? (Sorry new to code, I guess you would have understood).
You didn't say which version of Rails, but you could use #sanitize from ActionView::Helpers::SanitizeHelper module to strip all the HTML formatting. It scrubs HTML from text with a scrubber. The default scrubber allows optional whitelisting of attributes. You can even build your own custom scrubber to modify the string if you need more control over what is output. The module also contains #strip_tags and #strip_links, which are very simple scrubbers that remove all HTML tags and all HTML link tags (leaving the link text).
Note that you can wind up with malformed text if the user's input wasn't valid HTML.
Quick examples from the docs:
// remove all HTML tags except <strong> <em> <a> and the
// <href> attributes from #text
nomarkup_text = sanitize #text, tags: %w(strong em a), attributes: %w(href)
// remove all HTML markup
strip_tags("<b>Bold</b> no more! <a href='more.html'>See more here</a>...")
returns the string Bold no more! See more here...
// remove just the link markup
strip_links('Please e-mail me at me#email.com.')
returns the string Please e-mail me at me#email.com.
More detail at the API page for SantizeHelper

Why form class is highlighted as red?

Can somebody tell me which the cause of form class that highlighted as red? What's the meaning of this? I can't get rid of it. I already close the form at the end of the line. But when I view the page source this is what look like.
This is your editor trying to be helpful by highlighting the form tag.
As you're writing HTML make sure you're using an editor that supports more than PHP, like Atom or Sublime Text. Or tell your editor that you're editing HTML.

CKEditor format tags and a custom <small> tag

Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?
Editing config.js as follows causes a runtime error:
config.format_tags = 'small;p;h1;h2;h3;pre';
probably because <small> is not block level?
The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.
You have to do two things:
Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
now CKEditor supports the small tag.
This works for me, I hope it works for you too.
If I want to add a custom section tag to format tags, this work for me:
1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };
2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".
If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.
First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
Drag the Styles button to the active toolbar if it isn't already there
Add items to "Styles Dropdown" tab under CKEditor plugin settings
Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.
Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor

working with xml snippets in CKEditor

I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.
Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?
I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';

XUL - textbox problem

I am writing a Firefox extension. When a user highlights and right clicks a selected text on a webpage, the extension captures the text and displays it in a textbox (xul window). The textbox shows the correct formating (like the line breaks, spaces, * for li tags.). But the problem happens when i try to store the textbox value in a variable. The line breaks are gone.
var selText = document.getElementById("txtboxSelectedText").value; //
Can anybody help?
Thanks a lot.
Is this a real textbox or a rich text editor like tinyMCE or open wysiwyg?
In a real textbox there are linebreaks. In the rich text editors, they are really iframes with html content... what looks like a line break is really a <br/> tag.
The reason I suspect this is you can't have li tags (and their associated bullet points) inside a normal textbox

Resources