I'm using the version of Quill from the CDN; I have Quill.js and Quill.snow.css defined. I'm adding
var quill = new Quill('#editor', {
modules: {
toolbar: [
['list'..]
]
},
theme: 'snow' // or 'bubble'
});
When it renders it generates this:
<button class="ql-list" type="button"></button>
But I don't see anything although I can click in the space and trigger the action that way.
I looked in the CSS and didn't find the .ql-list CSS class. Obvious why it isn't working but why is the CSS file incomplete?
According to their documentation here - https://quilljs.com/docs/modules/toolbar/ The list should have a value as well. try and pass it as an object like -
{ 'list': 'ordered'}, { 'list': 'bullet' } instead of 'list'
And then the generated code might look like -
<button class="ql-list" type="button" value="ordered"></button>
And maybe in the CSS file you'll find something related to
.ql-list[value="ordered"]{
// Styling for ordered list here
}
And if not in the CSS, it might be an SVG constructed dynamically based on the value. Who knows what people are upto these days!
Related
I try to copy the content from a WYSIWYG-Editor (What you see is what you get), to a textarea and It needs to be structured. I am using Quill https://www.quilljs.com/docs/quickstart
I added a textarea, the content from the Editor is pasted into it, on click at the button Edit HTML.
$("#editHTML").click(function() {
var content = $("#editor .ql-editor").html();
$("#htmlEditForm").html(content);
});
It works, but as you can see it is not structured at all. Everything is in one line:
I need it like this:
<p>FOO</p>
<p>BAR</p>
<p class="ql-align-center"><span style="color: rgb(230, 0, 0);">I am centered</span></p>
I need it to be in a textarea, because I want to use it as HTML editor. Later on I will add another button which pastes the html code back into the WYSIWYG-editor.
The goal is, to give advanced users the possibilty to edit the HTML.
I am not sure how I can do this, I was thinking of replacing any closing tags with this: e.g. </p> -> </p>\n but it just outputs </p>\n in the textarea instead of creating a new line.
Is this even possible?
UPDATE:
I tried to use getContents as suggested:
var toolbarOptions = [
['image'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['blockquote', 'code-block'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'direction': 'rtl' }], // text direction
[{ 'font': [ 'arial', 'Monotype Corsiva', 'fantasy', 'serif' ] }],
['clean'] // remove formatting button
];
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
$("#editHTML").click(function() {
$("#htmlEditForm").html(quill.getContents());
});
But the textarea stays empty.
quill.getContents() does just return an object:
Unfortunately Quill is not meant to do this. Quill uses it's own document model called Parchment. It tracks everything that changes in the editor so that it can understand it's contents and make changes, but it has some limits on what can be added. For example, you can't add an element that doesn't match an existing blot/format.
If someone were to edit the HTML arbitrarily and add a div for example, the editor's document model would no longer match it's contents. When switching back to the wysiwyg view, some functions wouldn't work until it tries to recreate it's document model and messes up the changes made in the HTML view.
Edit
Also, for the original problem of how to format the HTML with new lines and indention, what your seeing is how it's formatted. The editor is not breaking to new lines for each block element or adding indentation for nesting as someone would when they're writing code.
If you want it to be formatted in some way, you'd have to do it manually. Either by parsing the getContents() output or by writing or finding a script that can format HTML.
You can combine your text area with Ace Editor (https://ace.c9.io/) which allows code editing features.
Instead of detecting .click event use the built-in quill mechanism 'text-change' ... also to get the HTML of the rich text editor all in one go use .container.childNodes[0].innerHTML
quill.on('text-change', function (delta, oldDelta, source) {
// your code here e.g.
$("#htmlEditForm").html(quill.container.childNodes[0].innerHTML);
});
Text area is not capable of showing you the formats of rich text editors. A simple solution can be strip all tags if you do not want the tags in text area. Or if you want tags like bold, italic etc you have to use WYSIWYG editor. You can disable all tools of the editor and it would be looking like a textarea.
I am using draft.js, and I have everything I need working except for one thing.
I want to be able to add a custom block option that will apply a span with a custom class (e.g. content) around the selected content in the editor.
Is this possible with draft-js custom blocks?
Any good examples out there? (didn't find anything when googling)
You can do it without wrapping text to the element with a custom class. You can style selected text with method RichUtils.toggleInlineStyle. More details described here.
Look at this working example - https://jsfiddle.net/x2gsp6ju/2/
Define customStyleMap object. Keys of this object should be unique names of your custom styles and values - objects with appropriate styles.
const customStyleMap = {
redBackground: {
backgroundColor: 'red'
},
underlined: {
textDecoration: 'underline',
fontSize: 26
},
};
Pass this object to customStyleMap property of Editor component:
<Editor
placeholder="Type away :)"
editorState={this.state.editorState}
onChange={this._handleChange}
customStyleMap={customStyleMap}
/>
In this example, I apply styles for selected text after click on appropriate buttons, I call this.applyCustomSTyles method and pass style-name as first argument. In this method I generate new editorState with RichUtils.toggleInlineStyles:
applyCustomStyles = (nameOfCustomStyle) => {
this._handleChange(
RichUtils.toggleInlineStyle(
this.state.editorState,
nameOfCustomStyle
)
);
}
how can i add button which adds class in hallo.js editor?
Here is my code, but it dont works, it ony register fuction in wagtai;s edit interface.
In the end I need to add any class to selection or current tag.
Mb I can see it in html in someway and add classes manually?
(function() {
(function(jQuery) {
return jQuery.widget('IKS.center', {
options: {
editable: null,
toolbar: null,
uuid: '',
buttonCssClass: 'center'
},
populateToolbar: function(toolbar) {
var buttonElement, buttonset;
buttonset = jQuery('<span class="' + this.widgetName + '"></span>');
buttonElement = jQuery('<span></span>');
buttonElement.hallobutton({
uuid: this.options.uuid,
editable: this.options.editable,
label: 'Center element',
command: 'addClass("center")',
icon: 'icon-horizontalrule',
cssClass: this.options.buttonCssClass
});
buttonset.append(buttonElement);
buttonset.hallobuttonset();
return toolbar.append(buttonset);
}
});
})(jQuery);
}).call(this);
As mentioned in the Wagtail customisation docs, you need to call registerHalloPlugin. You'll also need to configure the whitelist to allow your <span> element - rich text fields intentionally don't allow inserting arbitrary HTML. (See https://stackoverflow.com/a/38097833/1853523 for more detail.)
However, I would strongly encourage using StreamField for this, rather than extending the rich text editor. The whole purpose of Wagtail is to keep a separation between the information content of pages, and its presentation. A button to say "center this text" is purely presentation - that's a detail that belongs in template code, not in your article content. Instead, you should ask: what is the purpose of this text? Is it a block-quote, a testimonial, an advert? Create block types for that, and then think about how to style them in the template. You'll have much more control over the presentation that way.
(further reading: Rich text fields and faster horses)
Is there a way to define own list styles for ckeditor. I have found the plugin http://ckeditor.com/addon/liststyle but it lets me choose only things like circle or square.
I want to define own css classes for ol or ul in my application that i can use. For example a class to define more space between list elements. the users of the editor should pick the list class via a context menu like in the nice "liststyle" plugin.
Is there a way to do this?
Confirmed the approach mentioned above works, I am using Drupal, Ckeditor List Style (plugin) and the Ckeditor List Style module (Drupal module).
I needed to make a change to the lang > en.js file to add the appropriate Title in instead of the function as the OP.
cute: 'Cute',
Once that was done, inside the liststyle.js file I updated the existing code to this:
Existing code in liststyle.js file:
commit: function(element) {
var value = this.getValue();
if (value)
element.setStyle('list-style-type', value);
else
element.removeStyle('list-style-type');
}
New code:
commit: function(element) {
var value = this.getValue();
if (value) {
if (value == 'cute') {
element.setAttribute("class", 'cute');
element.removeStyle('list-style-type');
} else {
element.setStyle('list-style-type', value);
}
} else {
element.removeStyle('list-style-type');
}
}
I am dealing with CKEditor to add custom list styling to the liststyle plugin.
I added one new style (you can add more if you like) using the CSS class.
Here's how: in liststyle.js (after de-obfuscating) I insert my .logo class:
..........
function e(c,e){
c.lang.liststyle.logo="My bullet"; // BBoyanov - adding 'My bullet' as title in dropdown list (in current language), otherwise it stay "empty" title
var b=c.lang.liststyle;
........
style:"width:150px",
items:[[b.notset,""],[b.circle,"circle"],[b.disc,"disc"],[b.square,"square"],
[b.logo,"logo"]],//BBoyanov - css class 'logo' as Bullet \,[b.logo,"logo"]\
........
commit:function(a){
var b=this.getValue();b?a.setStyle("list-style-type",b):a.removeStyle("list-style-type");
"logo"==b?a.setAttribute("class",'logo'):a.removeAttribute("class");//BBoyanv set 'logo' as CSS class
........
h={a:"lower-alpha",A:"upper-alpha",i:"lower-roman",I:"upper-roman",
1:"decimal", disc:"disc", circle:"circle", square:"square",logo:"logo"};//BBoyanov \,logo:"logo"\
........
You define the CSS class in ckeditor.css (to be visualised in CKEditor) and in your own CSS file.
If you prefer different titles for different languages, you must put translation in the corresponding language .js file of CKEditor.
It worked for me.
However, probably this is injection because it takes over the allowedContent - need tests and confirmation.
I'm trying using jQuery Spinner but, i would like to overrides the HTML result.
Basically change the follow button html structure:
<a class="ui-spinner-button ...>
<span class="ui-button-text">
<span class="ui-icon ui-icon-triangle-1-n">?</span>
</span>
</a>
by:
<button type="button" class="ui-spinner-up" tabindex="-1"></button>
Have any way to do it, without change the original script (jquery.spinner.js)?
Regards,
Giolvani
I know this question has been answered already, but if anyone is interesed you can override the _buttonHtml class (which renders the buttons) using the widget factory now. It's fairly simple to do.
You can do this by using the following syntax:
//Overriding the default buttons with our own classes
$.widget("ui.spinner", $.ui.spinner, {
_buttonHtml: function () {
return "" +
"<button type='button' class='ui-spinner-up' tabindex='-1'></button>";
}
});
//To call it, we simply instantiate like normal:
$("#myElement").spinner();
As always, you could instantiate with any options you would normally pass just fine
$("#myElement").spinner({min: '1', max: '10', numberFormat: 'n0'});
To call a custom namespace, you would use this:
$.widget("custom.myExtension", $.ui.spinner, {
red: function() {
this.element.css( "color", "red" );
}
});
//Instantiate it like so:
$("myElement").myExtension("red");
Easy breezy. In this example, I am overriding the default behavior for the jQuery UI spinner. The first argument is your custom name. The documentation suggests you name it in the custom namespace. So something like "custom.myButton" (whatever you like) would be acceptable here. The second argument is the base widget you are trying to overwrite. In our case, it is the ui.spinner. Then you provide the overridden method; if you look at the source code for the spinner, you can see that this method currently exists within the source, and we are simply overriding the default behavior.
As you can see in the second example, I extended the ui.spinner with my own namespace. Hope this helps anyone in the same boat.
Sources:
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
http://api.jqueryui.com/spinner/#method-_buttonHtml
$("#spin")
.spinner() //init the spinner
.parent() //grab the spinner wrapper
.find(".ui-spinner-button") //grab each button
.empty() //remove their children
.append("<div>Custom HTML</div>"); //add custom html
Or this: http://jsfiddle.net/smwMv/
$("#spin")
.spinner()
.parent()
.find(".ui-spinner-button")
.replaceWith(function(){
return $("<input>", {
type:'button',
'class':this.className, // preserve classNames
tabindex:-1
});
});
I don't exactly follow what HTML changes you want to make, but you can access the spinner's HTML with <spinner>.parent().find(...).
As an example, here's a fiddle that shows changing the up arrow to have an ugly red border: http://jsfiddle.net/W7ayu/
Excerpt:
$("#spin")
.spinner()
.parent()
.find(".ui-spinner-up")
.css("border", "solid 1px red");
It also shows the outputted HTML.