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()
Related
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.
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you
There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.
You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.
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.