I am attempting to insert HTML into quill editor. The HTML can contain custom styles in style tags.
Quill is replacing all style tags with span tags in the HTML, for example a test in this jsfiddle : http://jsfiddle.net/f1L4z2py/
var testStr = "";
testStr += "<html><head><style type=\"text/css\">.testcss { background-color: black; }</style></head><body class=\"testcss\">test</body></html>"
quill.setHTML(testStr);
Does Quill support custom styles in its' editor HTML?
I looked at the Quill documentation : http://quilljs.com/docs/api/ , however I saw nothing about support for custom styles in the HTML except for maybe SetContents, however I would like to avoid extracting the style from the given HTML if I can avoid it.
Is the switching out of style tags for span tags a bug with Quill? Is the only way to support custom styling for setting HTML in Quill to manually extract the styles from given HTML first and then applying the HTML into Quill editor?
Thanks
No Quill does not support arbitrary HTML. Anything it does not recognize will be converted (strong tag to b tag) when possible or removed when not possible.
Related
I am working on an online editor using javascript. For formatting I am using spans and classes(see example below).My problem is after using the editor for some times, the browser adds some unwanted tags to the html content, like <b> tags or nested spans. How should I prevent browser from adding tags other than <br>?
Question1 How should I prevent browser from creating b, span, font and other tags when typing?
In the scenario of example below, typing in bold is the desired behavior but using <b> instead of a span with bold class is causing me trouble!
Question2 Is there any way to override this behavior? Is there any api to what browser uses to know that it should insert a <b> tag?
Example:
1- adding style with my editor creates this div and looks like:
2- after deleting the word2:
3- After retyping word2:
.g1_bold{
font-weight: bold;
}
.color_blue{
color: blue;
}
It looks like when you remove all the text from a <span> inside a contenteditable div it removes itself from the dom and is not re-added when you type new text. A <b> however will be re-added, I would suggest using <b> instead of <span class="bold"> and then replacing this css
.bold {
// styling
}
with
b {
// styling
}
I am using Ace to display some JavaScript code, and loading it as per the embedding guide:
editor = ace.edit("jsField");
editor.getSession().setMode("ace/mode/javascript");
editor.getSession().setUseWrapMode(true);
The div and its contents are as follows:
<div id="jsField">
<span class="hl">var x = 0;</span>
var y = 10;
</div>
Currently, the Ace editor will display both the HTML and the JavaScript together as plain text. Is there a simple way to render the HTML such that only the JavaScript text is displayed, and the span is styled according to CSS? For example:
I should note that the span is usually added dynamically by calling editor.setValue().
I have been looking into creating custom modes/syntax highlighters for Ace, but it seems like overkill for such a simple task. I am curious if there is another way.
There isn't built in support for this. You can do something similar to https://github.com/ajaxorg/ace/blob/v1.1.5/lib/ace/ext/static_highlight.js#L53 to detect ranges and add markers to the editor.
Hey Stackoverflow comunity,
There is a method str.bold() to wrap a text in <b></b> tags. This is just perfect for a tiny WYSIWYG editor (I know some will say I should take one of hundrets open source solutions, but this is for learning purposes too).
The problem is how to unbold the text.
Here is my try http://jsfiddle.net/Kxmaf/178/
I know there is editor.execCommand('bold', false, ''); but this is producing different HTML results on each browser. I need to have only <b></b>, <i></i>, <u></u>
Any help is much appreciated :)
what about looping over a selected string with javascript when pushing the specific style-button. you just could save the several tags like , , .... inside an array, and than loop through the specific string you have selected. so you even can change the style of the style-buttons when any of the tags has been found, to let the user know which style is just used. After deselecting the style just loop again through and delete the tags from string.
You need to consider the case where the user's selection spans paragraphs. For example (selection boundaries indicated with pipes):
<p>One <b>t|wo</b></p>
<p>Thr|ee</p>
To handle this, you need to wrap and all the text nodes and partial text nodes within the user's selection in <b> tags while also detecting which text nodes are already bold and leaving them alone. This is non-trivial, and document.execCommand() handles it all for you, as do the big WYSIWYG editors.
Most browsers allow switching between style modes, allowing you to choose between styling using elements such as <b> and <i> or styling using <span> elements with style attributes. You can do this using the the "StyleWithCSS" command, falling back to "UseCSS" in older browsers. The following switches commands to use the non-CSS version:
try {
if (!document.execCommand("StyleWithCSS", false, useCss)) {
// The value required by UseCSS is the inverse of what you'd expect
document.execCommand("UseCSS", false, !useCss);
}
} catch (ex) {
// IE doesn't recognise these commands and throws.
}
Finally, if you switched to using CSS classes instead of <b> etc., you could use the CSS class applier module of my Rangy library.
I am using jquery richtext editor, Is there a way to remove all the inline style that richtext editor add, as some users are adding there own style and its breaking the layout.
is there a way using jquery or C#
I found this code:
private string CleanHtml(string html)
{
// start by completely removing all unwanted tags
html = Regex.Replace(html, #"<[/]?(font|span|xml|del|ins|[ovwxp]:\w+)[^>]*?>", "", RegexOptions.IgnoreCase);
// then run another pass over the html (twice), removing unwanted attributes
html = Regex.Replace(html, #"<([^>]*)(?:class|lang|style|size|face|[ovwxp]:\w+)=(?:'[^']*'|""[^""]*""|[^>]+)([^>]*)>","<$1$2>", RegexOptions.IgnoreCase);
html = Regex.Replace(html, #"<([^>]*)(?:class|lang|style|size|face|[ovwxp]:\w+)=(?:'[^']*'|""[^""]*""|[^>]+)([^>]*)>","<$1$2>", RegexOptions.IgnoreCase);
return html;
}
from here:
Remove Microsoft Class and Style attributes
HTH
I ran into this problem myself and couldn't find a solution that didn't remove ALL tags and formatting. There were over 100 entries riddled with all kinds of styling that needed to be uniform. I ended up "resetting" them using CSS:
span{font-family: Arial, Geneva, Helvetica, Verdana !important;font-size: 12px !important;color: #474844 !important;}
Note: This didn't help with certain special characters, but it did make all the styling uniform. Hope this helps!
I'm using TinyMce and even though the danger of a script attack, I need to enable all html tags with the editor.
Currently, I'm use like:
valid_elements: "#[class],p[style],h3,h4,h5,h6,a[href|target],strong/b,"
+ "div[align],br,table,tbody,thead,tr,td,ul,ol,li,img[src]"
But always need to add something, I want to enable ALL HTML tags with all attributes. Is there such switch that Disables the HTML filtering?
You can set
valid_elements : '*[*]',
to allow all html tags.
To keep style tags, use valid_children : "+body[style]"