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.
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 am using angular-schema-form to render some forms dynamically. the forms are rendering mostly as expected, but when i use tabs, only the tab names are getting rendered, but not the content of the tabs. i have tested the json schema and the form on the schemaform.io test page (http://schemaform.io/examples/bootstrap-example.html) where it renders correctly, but the same doesn't render the tab content in my application.
Note 1: it is worthwhile to note that i am using angular-schema-form within a larger application that is based on spring-boot + angularjs (the application itself is generated using JHipster (https://jhipster.github.io)
any pointers on where i need to start looking for debugging this issue? i looked at the google chrome developer tools but did not find anything useful to help debug.
Note 2: i am not using any custom decorators or validators. both the schema and form are generated from a YAML template which is more 'user friendly'
Its been about a month since I started using AngularJS. I used to write my codes in SublimeText2 but i wanted to use WebStorm since it claimed to be more AngularJS friendly. I wrote a simple Hello World app and tried to run it but i couldn't get any hint of how to do it. I also don't have any knowledge about Node.js.Do i need Node.js to run app on WebStorm? Is Node.js a server? I tried going through tutorials on WebStorm page and also read few articles on Node.js but couldn't understand it. Can anyone explain it in a simple and understandable way?
You can open your HTML+JS application in the selected browser in WebStorm by clicking on the browser icon on the top right corner of the editor tab with index.html file opened (or any other html file you'd like to open in browser).
The same action could be done from the file context menu: Open in - Browser.
WebStorm will automatically start built-in web server for your convenience.
Note that you still can go to your project folder and execute your particular HTML file from there, the same way you would do it with the text editor.
Read more on working with AngularJS in WebStorm in this blog post.
If you have back-end in Node.js for your app, then you, of course, need Node.js installed. To run your node web app you need to create Node.js run configuration. More on it here.
I'm using using Extjs 4.0.7 version.
Html editor icon images, grid refresh and paging button images are not displaying.
I checked another working setup, there i found x-tbar-loading class for grid refresh icon
but in the setup i'm using on my system, the above calss is not found. But the css and js files are same as the working setup.
Check to make sure you included the resources shipped with the distribution.
Also there is really no need to hang back to 4.0.7 - lots of issues have been fixed in 4.1.1
I was having the same issue using Ext JS 4.2.1. My application skeleton was created using Sencha CMD. In order to get things working again, I need to rebuild the application using the following commands. It seemed to need both:
sencha app build
sencha app refresh
Not sure of the exact order, but after doing that, I was able to get things working properly.
You need add
Ext.tip.QuickTipManager.init();
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