Does anyone have a confirmed/tested working way of setting up a rich WYSIWYG (like CKEditor or TinyMCE) with support for syntax highlighting (for pasting and sharing java/php/etc.) in Drupal 7.10?
I have now tried a variety of combinations, and I have struggled to get any of them to work in Drupal 7.10. Here is what I have tried:
CKEditor (3.6.2) using CKEditor module (7.x-1.6) with Syntax Highlighter library and
Syntax Highlighter Module (7x-1.1). I followed betuts.com/guide-install-syntax-highlighter-ckeditorckeditor-syntax-highlighter-plugin-drupal-7.
Problem: I could not get a code button into my CKEditor. I just would not appear no matter what I did - perhaps it has something to do with the new drag-and-drop
method of adding buttons that has replaced the old text-based one.
CKEditor (3.6.2)with CKEditor module (7.x-1.6) GeSHi Filter (7x-1.0) module and GeSHi libarary following this guide peterpetrik.com/blog/ckeditor-and-geshi-filter.
Problem: Same as above, I cannot seem to get the code button to appear in my CKEditor.
WYSIWYG module with CKEditor and Google Code Prettifier module + library.
Problem: Although this solution is simple and works beautifully with no editor, I simply cannot find a good way of getting CKEditor (or any of the other RTEs) to stop HTML-escaping code inside <pre> tags.
I appreciate your help (this is my first post :-)!
After some more work I got the following combination to work. I also did a more elaborated guide here.
Using WYSIWYG module with CKEditor library. I can insert my code into pre tags (using the Formatted style), and this should also be possible with most other RTEs you can use with the WYSIWYG module.
For the markup itself I installed the Prettify module with the Google Code Prettify library. This will syntax highlight any code within pre or code tags. BUT if you also enable the prettify filter, you will get unwanted html-escapes inside your tags. This is what caused me to think it was CKEditor who did the escapes as described in scenario 3 above.
So this is verified to work with Drupal 7.10, WYSIWYG 7-2.1, and Prettify 7-1.x-dev.
Lars,
We ran into similar issue on our site when posting to our own site and had to modify CKEditor plugin.
Modified plugin code is posted on https://github.com/dbrain/ckeditor-syntaxhighlight/tree/ckeditor-4
Related
I was trying to integrate CKEditor5 in my MERN Stack Application. Its a kind of blog site which requires a fully functioned rich text editor. I integrated the editor and all other things are working fine except the file upload button.
I am using the predefined Classic Editor, which has all the basic functions. But when I click on the Image button to upload an image from local storage, it shows the error :
filerepository-no-upload-adapter
I tried to add Base64UploadAdapter plugin but then it shows the error :
Uncaught CKEditorError: ckeditor-duplicated-modules
Because of this error, I had to remove that plugin, but I still do not have the file upload function.
I also need some other buttons on my text editor, but I am always getting some kind of errors.
I also tried the CKEditor Custom build editor, but when I imported it to my page, it again gives me ckeditor-duplicated-modules error. I used the following code for importing:
import { CKEditor } from '#ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
And yes, I also added the custom builder's folder to my package.json before importing this.
I want all the features that I added in my Custom builder, but that's not working in my case. Can anyone please help me with this? Or else, if that is not possible, please give me a solution for file upload which I need for sure, even if I don't get other buttons except the predefined Classic Editor buttons.
But, if there is any way to fix this ckeditor-duplicated-modules error and use the Custom build only, that would be the best solution for me..!
Thanks in advance.
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
Basically I want to build an angular app with a text editor which supports syntax highlighting for a Dockerfile.
I'm fairly new to Angular, I downloaded a custom highlight.js to serve my purpose.
I'm not sure if and how to add it to an editor (say CKEditor) to support the syntax highlighting part. And how to further add this editor to my angular app.
I have no idea how to work with it, nor could I find any reasonable tutorials.
I am using PaxWeb Http Whiteboard service in Apache Karaf; while everything works, I am unable to get certain CSS styles rendered properly -
for example,
arrow-dropup-circle {
content: "\f364";
}
This is supposed to display a drop up circle but when hosted in PaxWeb, though the css is loaded; it does not render the content. While it displays square boxes in chrome, in firefox; it just shows the number f364 in a square box.
Please note that this works when I host my website in NodeJS.
My blueprint is same as the one given here.
Can someone shed some light into why am not getting css rendered properly?
Thanks
Venkatesh Laguduva
I had a same issue. In my case, font files (like .ttf, .woff) were failed to decode while loading the page. Maven was corrupting that. It is filtering files with those extensions. To exclude files from filtering based on the extension, we can use "nonFilteredFileExtensions" tag in pom. This solved my decoding issue.
I have been trying to figure how to set this up properly, but no luck. Screen looks blank and no errors on browser console.
Sample Github demo:
https://github.com/oocoder/onsenui-wp-demo
Has anybody tried to set this up?
Thanks. I was able to resolve the issue by assigning ons to the global window object and waiting for Angular on ready event to run the onsenui bindings.
Use: onsenui#2.0.0-beta.7
Sample: https://github.com/oocoder/onsenui-wp-demo
I am unfamiliar with webpack, but adding Onsen to a project is really nothing more than adding some additional files to a standard html project. Some installer options are listed here: https://onsen.io/guide/getting_started.html
Also, to get started with browserify, see the docs here: https://onsen.io/2/
var onsen = require('onsenui/js/onsenui');
onsen.ready(function() {
onsen.notification.alert({message: 'Onsen UI works with browserify!'});
});
So, if that is not working, I often recommend for people to get started by going here: https://monaca.io/cloud.html
Sign up for their free account which is to access their awesome cloud IDE. From there, just create a project and select the Onsen 2.0 Quickstart. After that you can export the project and import it into your favorite IDE. You are now setup to develop Onsen apps.
On a side note, I really recommend their cloud IDE. It has so many amazing features and it makes development a breeze.