How can I define a layout for Quill content? - javascript

How can you make an editor within editor with Quill? Imagine a scenario: there is some text with formating, then there is an embed (image/video/...) with some formated text on the right. And then there is some text again. So HTML would look like:
<editor>
<regular_quill_stuff></regular_quill_stuff>
<customEmbed> // some CSS flex here
<container contenteditable="false"><image></image></container>
<container><regular_quill_stuff_in></regular_quill_stuff_in></container>
</customEmbed>
<regular_quill_stuff></regular_quill_stuff>
</editor>
NOTES:
in 'regular_quill_stuff_in' user should be able too use the same toolbar but inserting embeds should be disabled.
when you remove embed blot from outside, 'regular_quill_stuff_in' contents should be moved to 'regular_quill_stuff'.
I've tried making some custom blot based on Block, Code and Scroll but I can't really understand how to make it work, and many low level stuff isn't documented very well. Then I tried to create another instance of Quill on a dom node, but it was very buggy becouse main quill was reciving events from within . I was able to fix it with auto-enabling/disabling Quills based on user focusing divs, but it still was buggy, not to mention passing information between two Quills and edit history and deltas were very incoistent.
Surely there has to be a way to make it easier.

Styling and organizing HTML elements on a page is done using CSS stylesheets. Basically, elements get values for their class and id attributes, so that they can be selected to have a desired stylization applied.
This same process is done with any WYSIWYG rich text editor. The buttons on the editor toolbar are responsible for not only adding new content, but also changing what is already present. For some, this involves changing or applying classes to the desired snippet.
We can see this happening in Quill using the alignment format. If you write the following line in Quill:
This is a simple test.
As a result, you will have the following HTML markup in the editor:
<p>This is a simple test.</p>
Selecting a portion of this text and using/applying the alignment format to, for example, center, will cause a class to be applied to the paragraph, and the result will be as follows:
<p class="ql-align-center">This is a simple test.</p>
So what does this mean? This means you can define your own formats to apply classes that are in charge of arranging the layout of Quill content the way you want.
Compared to what you said, the idea is not to add the content to a
container, but to add a CSS class capable of organizing the content.
You can choose to apply attributors, or define new elements for it. But this kind of process requires testing and more testing. I'm not sure how you want to organize things, or what features you want to add. Therefore, for this to be implemented correctly, you will need to test formats and styles for the different HTML elements present as the editor content.
I suggest you start with simple things, such as text, a paragraph. Try to create an attributor that can apply classes to paragraphs. When you can do that, try something else, such as images, videos, the embed elements. You will find varied results, and this will show that you have to test and test until the desired result is found.
As a help, copy the alignment code, but change it to a desired class. More information on this can be found at the following links:
Creating a custom class attributer in QuillJS
Using Quill.js To Build A WYSIWYG Editor For Your
Website
Example for custom class attributor
To learn how to define new formats through blots, see the following links:
Quill-Examples-and-FAQ
Quill GitHub - Parchment
Cloning Medium with
Parchment

Related

How to disable style editor

I am experimenting with grapes js page builder with the webpage plugin.
The issue is that I was not able to find a way to completely disable the style editor they have (I managed to not auto-select the style manager when you click an element) but I want to completely remove the option for the user to edit existing styles.
Basically the user must only be able to drag existing blocks and edit the text inside them and not style them in any way.
You can also acheive this by changing the "appendTo" property of the Style Manager config to a new div that's not in the DOM
const editor = grapesjs.init({
styleManager: {
appendTo: document.createElement('div'),
},
...
})
This way, the style manager simply won't be rendered.
The way I solved the issue was by copy & pasting the node_modules/grapesjs-preset-webpage/src/panels/index.js and simply commenting out the code that was defining the panel I wanted to get rid of.
I also had the copy and paste the node_modules/grapesjs-preset-webpage/src/index.js and editing it to import my panels.js file.
Not the best way of doing this for sure but for now that will do.
PS.
I also thought of simply hiding the panel using CSS but that seemed more of a hack than this.

TinyMCEv4 editor content wrap

I am having some difficulties with setting up WYSIWYG TinyMCE (I'm using v.4.3.3).
I would like editor content to be rendered with my site's CSS. I have already setted up content_css variable to my css file(s), but it is not sufficient. Text that is written in editor is going to be new post body. Beacause of that it is going to be wrapped in few containers (something like <div id="some_ID"><div id="another_ID"><article><section>(WYSIWYG TEXT)</section></article></div></div>), and since in WYSIWYG preview there are no wrappers, it is not rendered properly.
Is there some (simple) way to wrap editor content with suitable wrappers, or would you rather suggest to somehow edit CSS file, so it will render content correctly without wrappers (I don't realy like this idea, but if it will be the only way to do that, I would have to go with that).
EDIT: To be clear, I don't want to submit those added wrappers, I just want them to change the way editor content is being rendered.
I suggest to use
forced_root_block:''
in editing mode, and only in preview add the needed wrappers by using jQuery's append() and prepend()

HTML5 ContentEditable with dynamic content?

I noticed that most TinyMCE plugins give placeholders with a simple image, and perhaps some edit-button-popover functionality. Take the Wordpress gallery and image edit functionality as an example - a simple image with edit/delete buttons. Even NextGen 2 (a few versions ago at least) had Nextgen-gallery slideshow placeholder as a simple image, not rotating image.
I was recently trying to make some more dynamic content within the editor. It's a challenge to insert the jQuery, then import the jQuery-plugins that run certain behavior within a placeholder. It's also challenging to fix the no-drag-into-noneditable-placeholder bug, after enabling the TinyMCE-noneditable plugin.
Even after that, there is a problem where the div with special content (noneditable placeholder) can lose its elements when it is drag-dropped within other text to another part of the editor.
Are things like this the reason most TinyMCE plugins make a styled image, at best? Is TinyMCE and contenteditable in general inherently incompatible with jQuery-plugins running within its editors? Are there any examples of successful live preview functionality in content-editable areas, rather than a static image file?
Update
It looks like this isn't even a TinyMCE problem - as you can see on this demo page, when you add the contenteditable="true" attribute to the id="main" element, then select some text including the rotating banner, cut and paste to another part, it not only stops the slideshow (as you would expect), it also removes several img elements. Is there any way to stop this glitch?

Inserting "placeholders" with an FCKeditor plugin to be later replaced with dynamic content

I'm writing a plugin for FCKeditor that's meant to insert placeholders for dynamic content into the HTML. The interface look like this:
Currently, the plugin inserts the following HTML:
<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar"> </div>
The snippet of Javascript in my plugin that accomplishes the actual insertion of these placeholders is this:
function insertNewDiv() {
var divNode = oEditor.FCK.EditorDocument.createElement('div');
oEditor.FCK.InsertElement(divNode);
oEditor.FCK.Focus();
oEditor.FCK.Events.FireEvent('OnSelectionChange');
return divNode;
}
To make it look nice in the FCKeditor window, I'm applying some CSS to the FCKeditor window, including the following, that writes the title in there:
.dynamicelement:before {
content: attr(title);
}
Anyway, other than the styling, FCKeditor treats these div elements no differently than any other div element in its window. This is not good for me.
I need these placeholders to have the following traits:
Insertion of content into the placeholder is not allowed.
Clicking it should select it as a whole.
Tapping the delete key when it's selected should delete it.
The only way to edit it (apart from deleting it) is to select it, then click the toolbar button to open an edit dialog.
It should always be considered a block-level element
It doesn't matter if the HTML output uses a custom tag name or not (<dynamicelement> instead of <div class="dynamicelement">).
Does the FCKeditor API provide a way to give it command like, "Treat every element that matches the selector 'div.dynamicelement' the following way: ..." ?
Also, is there another FCKeditor plugin that does a similar thing that I can refer to that I might have overlooked in my research?
EDIT: By the way, I already know about CKeditor. I'm using FCKeditor for a couple of reasons: it's working for my CMS, the configuration options I'm using are perfect for my clients (except, obviously, for the placeholder thing), etc..
I solved this by duplicating the code that makes the "Page Break" button work.
While wading through the source code, I learned that FCKeditor has a native method for inserting placeholders.
Create a "fake image" and insert it into the editor DOM. You can style the image however you want.
Using Javascript, connect it to the div in question.
Hide the div (it still appears in the source and in your output though).
While in WYSIWYG mode, you're playing with this fake image, and the changes are being carried over to the div.
There a few bits and pieces that need to be in the plugin to make this work. If you grep for FCK__PageBreak, you will find them all in the source, ready to be copied into your plugin. FCK__PageBreak is the class name of the Page Break's fake image.
You might be able to use ProtectedSource to get what you want:
The editor offers a way to "protect" part of the source to remain untouched while editing or changing views. Just use the "FCKConfig.ProtectedSource.Add" function in the configuration file.
But:
Note that there currently isn't any way to "lock" displayed content in the editor. The content protected with ProtectedSource will actually be invisible during editing. It may be used instead, for example, to protect custom non standard tags or server side scripts. By default, FCKeditor uses it to protect <script> tags from activation during editing.
You might be able to use this together with a placeholder image:
Your plugin adds both the "real" protect tags and the placeholder.
The server strips out the placeholder and does things to the real tag; however, if the placeholder isn't there but the "real" stuff is then delete the "real" stuff.
When editing, the server inserts the placeholder image before sending things off to the browser.
All this seems a little convoluted so you might be better off with a simpler kludge:
Plugin just inserts a placeholder image with a specific class or a fake attribute of your choosing.
Tweak the image plugin to ignore your placeholder.
Replace the placeholder image with the real stuff on the server.
Replace the real stuff with a placeholder image when sending it back to the browser when they're editing the content.
Or, you could use your own custom tag (i.e. <dynamicelement>) and then use ProtectedTags:
In many situations, it is important to be able to switch to the source view in FCKeditor and add a few custom tags, needed for custom processing, or whatever. The problem is that browsers don't know how to handle non standard HTML tags, and usually break the DOM tree when finding them (specially IE).
That combined with some CSS to display <dynamicelement> nicely (say some dimensions and a background image) might do the trick without too much dirty kludging.

Selectively display different parts of a HTML file without SSI/Server side scripting

Is it possible to create a text sprite and selectively display parts of the same HTML file and ignore the rest. The part to be displayed is selected by a menu generated generated using CSS with links within the same page.
(The length of each section is unknown and expected to vary greatly).
Communicating with the server is unfortunately not an option.
And as you might expect i am new to CSS,PHP and JS
you will want to wrap each section with an ID tag, and control the visibility with javascript. There are several methods of controlling visibility in JavaScript.
The CSS elements that control visibility are visibility and display.
Visibility shows or hides text using the attributes in the above reply, and display allows you to actually remove that block from the DOM by using "block" and "none" as the attributes. You'll want to choose whichever element works best for your application.
Javascript libraries such as Prototype/script.aculo.us or J-Query, MooTools, etc are fantastic for this kind of control.
If you want to learn this kind of scripting from scratch, the book "DOM Scripting" by Jeremy Keith is a fantastic book that can be completed in a couple of days.
Sounds like CSS property visibility set to hidden | visible | collapse.
You should use display none to hide things and display block to show them again (or display inline)

Categories