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?
Related
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
I am using rich text editor ckeditor in my website which works fine but i want this to look something like a text editor used by blogger like shown in the image below. how is it possible?
this is how i want it to be
CKEditor 4.x you have the sharedspace plugin which allows you anchoring editor toolbar in specified element and use it for all editors you have on your web page.
You can find a demo of sharedspace plugin with source code here: https://sdk.ckeditor.com/samples/sharedspace.html
About moving all toolbar items into a single line. Please open standard or full sample and play around with the Toolbar Configurator. If you remove row separators, you will get single line toolbar. Next you just need to copy the toolbar configuration and paste it into config.js (if you want to use it for all editors) or into editor instance configuration (if you want to use it for a single editor).
NOTE: The available space in that sample is too small to fit all the buttons in a single line but of course on your web page the available space may be wider.
You may be able to get something similar to this if you use TinyMCE's inline mode. https://www.tinymce.com/docs/get-started/use-tinymce-inline/
If you use the inline editing option for TinyMCE you can define a fixed location for its toolbar/menubar:
https://www.tinymce.com/docs/configure/editor-appearance/#fixed_toolbar_container
Based on your picture you can place it in a div that is located at the top of the page and it will appear there as opposed to "attached" the editor.
I wrote a plugin for FCKeditor that inserts <div> tags into HTML for later replacement with dynamic data.
I use the fake image approach to insert an image placeholder into the visual part of the FCKeditor window. That image is connected to the <div> as it appears in the source. This approach is also used by the native page break functionality native to FCKeditor.
I want to apply some styles to that image. Specifically, I want to add a icon image to the background. I have been adding the CSS to my custom editorarea CSS file that I specified in my config file. But I'd like to move that code into the plugin directory somehow.
Is there a way to add custom CSS to the editoarea using Javascript in a plugin?
I have written exactly this kind of plug-in myself in the past. Looking at my code, it seems I concluded that it wasn't possible (or at least straightforward) to add custom CSS to the edit document, so I specify everything on the style object of the image placeholder in the plugin script, including a background image that lives in the plugin directory.
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.
I Want That hover on Small Image Views Big Image in same window...
So can anybody help me in dis...
First and foremost, welcome to StackOverflow!
What you're describing is not PHP. Instead, the best technology to use for your problem would be a client-side solution like Javascript. If you don't mind, I'd like to encourage you to consider using a Javascript framework to cut down on development time for various browsers (if you don't know already, they can and will drive you insane if you give them the opportunity).
Causing a thumbnail to display a larger image with Javascript isn't that difficult. Consider the following HTML:
<img src="thumb-kittens.jpg" rel="big-kittens.jpg" class="zoomMe" />
<div class="preview">...previews will be seen here</div>
I'm basically storing the larger files name in the rel tag to quickly access it via our javascript. Using jQuery, a popular javascript library, we can do a preview action rather easily:
$(function(){
// Add some events when we hover our thumbnails
$("img.zoomMe").hover(
function(){
// Add our big image inside the preview box
$(".preview").html( $("<img>").attr("src", $(this).attr("rel")) );
},
function(){
// Empty our preview box
$(".preview").html("");
}
);
});
In this simple example, we're just using the native hover method in jQuery to define two actions. The first when we mouse over any image having the class "zoomMe", and the second when we leave that same image.