Trumbowyg | A lightweight and amazing WYSIWYG JavaScript editor | Editor library

by Alex-D JavaScript Version: 2.28.0 License: MIT

X-Ray Key Features Code Snippets(1)Community Discussions(8)Vulnerabilities Install Support

kandi X-RAY | Trumbowyg Summary

Trumbowyg is a JavaScript library typically used in Editor, React applications. Trumbowyg has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i trumbowyg-https-prefix' or download it from GitHub, npm.

Trumbowyg is a simple and lightweight WYSIWYG editor, weight only 20kB minifed (8kB gzip) for faster page loading. Visit presentation page:

Support

Quality

Security

License

Reuse

Support

Trumbowyg has a medium active ecosystem.

It has 3813 star(s) with 601 fork(s). There are 94 watchers for this library.

There were 1 major release(s) in the last 12 months.

There are 40 open issues and 922 have been closed. On average issues are closed in 351 days. There are 1 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of Trumbowyg is 2.28.0

Quality

Trumbowyg has 0 bugs and 0 code smells.

Security

Trumbowyg has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

Trumbowyg code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

Trumbowyg is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

Trumbowyg releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions are not available. Examples and code snippets are available.

Trumbowyg saves you 5192 person hours of effort in developing the same functionality from scratch.

It has 11035 lines of code, 0 functions and 155 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed Trumbowyg and discovered the below as its top functions. This is intended to give you an instant insight into Trumbowyg implemented functionality, and help decide if they suit your requirements.

Strip HTML and attributes .
function to render gifs
Takes an element and adds it to the background color
Build the button
Change font size of text
Unwrap code inside code block
Replace valid tags with valid tags .
Build highlighted options .
Build the dropdown .
Thttle function

Get all kandi verified functions for this library.

Trumbowyg Key Features

No Key Features are available at this moment for Trumbowyg.

Trumbowyg Examples and Code Snippets

How to add underline button into trumbow editor?

JavaScript

Lines of Code : 217

License : Strong Copyleft (CC BY-SA 4.0)

Copy

[
    ['viewHTML'],
    ['formatting'],
    'btnGrp-semantic',
    ['superscript', 'subscript'],
    ['link'],
    ['insertImage'],
    'btnGrp-justify',
    'btnGrp-lists',
    ['horizontalRule'],
    ['removeformat'],
    ['fullscreen']

Community Discussions

Trending Discussions on Trumbowyg

I'm using trumbowyg as text editor for the textareas in my forum, but how do I echo it?

Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8

The most efficient way to simplify Javascript code

Prevent DOM reuse within lit-html/lit-element

buefy@0.9.3 requires a peer of vue@^2.6.11 but none is installed

Active Admin Trumbowyg @import not found error in Rails app

Function stored to a variable not running when called

Vuejs form needs refresh in order to let the router.push work

QUESTION

I'm using trumbowyg as text editor for the textareas in my forum, but how do I echo it?

Asked 2022-Mar-08 at 01:09

I didn't find any post related to my problem, so here I go :

I added trumbowyg (it's a WYSIWYG editor) to edit the content in my , and it works just fine when I post it in my database.

Only problem is : how do I echo it ?

The parsing method of trumbowyg takes this form : you click on, let's say B in the toolbar on top of the textarea, and it will put your text in bold weight. But in the server, once posted, it takes actually this form : some text.

Obviously, when I echo the var stocking the data in this part of my sql request, it output it the same way : some text and not some text.

I don't know if it's actually so simple that I can't seem to find the solution, or if I'm trying something impossible... ?

Thanks by advance guys !

...

ANSWER

Answered 2022-Mar-08 at 01:09

Well... Guess it was so obvious that I didn't find the answer in here. If it can help people who find themselves in the same situation as me : just wrap your var containing html with html_entity_decode($var) That's it.

See below (textarea is showed if the user consulting the profile is the one wich it belongs to, else it just echo the descrption (called in an Action.php file, I didn't put the "requires" before the declaration.

Source https://stackoverflow.com/questions/71353679

QUESTION

Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8

Asked 2021-Dec-10 at 09:46

I am trying to upgrade tailwind to version 3 in my Laravel application.

I followed the installation as instructed in

https://tailwindcss.com/docs/upgrade-guide#upgrade-packages

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This worked fine. But when I run npm run dev I get this error:

ERROR in ./resources/assets/css/tailwindcore.css Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin tailwindcss requires PostCSS 8.

I have read from the docs that PostCSS 8 is now required with tailwind 3. However, PostCSS 8 has been installed. Why would I still receive this error? I also tried to remove node_modules folder and reinstall, but got same error.

This is my package.json:

...

ANSWER

Answered 2021-Dec-10 at 09:46

The issue is that you're running an old version of Laravel Mix. Another issue you will face is the @tailwindcss/form plugin will need to be updated as well.

Update the packages with:

Source https://stackoverflow.com/questions/70301843

QUESTION

The most efficient way to simplify Javascript code

Asked 2021-May-29 at 23:38

I have a function that looks for the names of the classes to then include the libraries according to the editor to find. It checks the function declaration to know if the library has already been imported.

The code works fine but it repeats.

The question : Is there less simplification of the following code

The problem : I cannot pass variable to the anonymous function of $.getScript

...

ANSWER

Answered 2021-May-27 at 17:08

First: Both if statements haven't exactly the same structure:

in the first you load a script named like the editor but with a wf before: '/src/js/editor/wfeditorjs.js' but in the second you do it without: '/src/js/editor/trumbowyg.js'
in the second if statement you are additionally loading a css file: $.loadCSS('/src/libs/css/trumbowyg.min.css');

If both if statement have exactly the same structure and the called function doesn't use the editor name in camelCase (f.e. initWfeditorjs instead of initWfEditorJS) you could just save an array with the editor names and loop over them in a for-loop.

In that loop you could "build" your selector- and src-strings by concatenation with the editor name, for example $('.wfe-' + editors[i]), and call the function with: window['yourFunctionName'](your_function_param), for example window['initWf' + editors[i]](reScann).

Furthermore: You don't need to pass a variable to the anonymous function if that variable is declared globally like your reScann variable.

Example:

Source https://stackoverflow.com/questions/67720924

QUESTION

Prevent DOM reuse within lit-html/lit-element

Asked 2021-Jan-21 at 20:17

I am looking for a way to NOT reuse DOM elements within lit-html/lit-element (yes, I know, I'm turning off one of the prime features). The particular scenario is moving an existing system to lit-element/lit-html that at certain points embeds the trumbowyg WYSIWYG editor. This editor attaches itself to a

tag made within lit-element and modifies its own internal DOM, but of course lit-html does not know that this has happened, so it will often reuse the same tag instead of creating a new one. I am looking for something similar to the vue.js key attribute (e.g., preventing Vue from aggresively reusing dom-elements)

I feel like the live() directive in lit-html should be useful for this, but that guards against reuse based on a given attribute, and I want to prevent reuse even if all attributes are identical. Thanks!

...

ANSWER

Answered 2021-Jan-20 at 08:13

I have had similar issues with rich text editors and contenteditable - due to how templates update the DOM you don't want that to be part of a template.

You do this by adding a new element with the non-Lit DOM and then adding that to the DOM that Lit does manage:

Source https://stackoverflow.com/questions/65572242

QUESTION

buefy@0.9.3 requires a peer of vue@^2.6.11 but none is installed

Asked 2020-Oct-12 at 12:27

I want to install the latest version of buefy in my project, which is 0.9.3. Currently I have installed 0.8.3

If I run npm install -g buefy@latest I receive

npm WARN buefy@0.9.3 requires a peer of vue@^2.6.11 but none is installed. You must install peer dependencies yourself.

buefy@0.9.3 updated 1 package in 0.511s

However, Buefey 0.8.2 remains installed in package.json

I also have difficulties to understand the error, because I have vue 2.6.12 installed.

I tried to run (as explained in https://stackoverflow.com/a/58254678/2311074)

...

ANSWER

Answered 2020-Oct-12 at 12:27

npm install -g means you're trying to install a package globally.

Source https://stackoverflow.com/questions/64317817

QUESTION

Active Admin Trumbowyg @import not found error in Rails app

Asked 2020-Sep-16 at 18:54

I'm trying to add the Trumbowyg WYSIWYG editor to a rails app using Active admin using this gem.

The instructions seem clear, but I'm getting the following error for the scss import:

...

ANSWER

Answered 2020-Sep-16 at 18:54

You have most probably missed importing Active Admin JS files in the app/assets/javascripts/active_admin.js file. As it mentions on the gem's page that you have linked. Just add these lines to the above file-

//= require activeadmin/trumbowyg/trumbowyg //= require activeadmin/trumbowyg_input

Source https://stackoverflow.com/questions/63925251

QUESTION

Function stored to a variable not running when called

Asked 2020-Jul-20 at 18:17

I'm working on a plugin for Trumbowyg where I'm trying to store a function in a variable so it can be called later but also be over-writable without altering the included javascript file.

The problem is, the function is not being called when I try to call it.

Here is my relevant code:

...

ANSWER

Answered 2020-Jul-20 at 18:17

Answer

Try adding parentheses to close_modal inside your click handler.

Explanation

It seems to me like you are not invoking (calling) this function.

In your click handler, there's this line plugins.giphycrumbs.close_modal;

In javascript, this is a reference to a property on the giphycrumbs object. Though it happens to be a function, it will not be invoked as such unless you use parentheses after it (and optionally give it some arguments).

Hope that helps! 👍

Source https://stackoverflow.com/questions/63001463

QUESTION

Vuejs form needs refresh in order to let the router.push work

Asked 2020-Mar-16 at 11:17

so I have a website that allows you to send a submission; it's a Laravel/Vuejs application . My issue is that if I go to my form and fill everything in and submit my form; my loader is stuck and my router.push doesnt push to the location I want it to go. it keeps getting stuck. Although the collection is saved in the database and previewed on the list.

BUT once I manually refresh my page, the form submits, my router.push works and the loader is not stuck. And I can't figure out why this happens.

I get an error on my this.addItemToCollection(response.data)

error: http://prntscr.com/rfpsez

Example: https://imgur.com/a/USpfeEn

Form.vue

...

ANSWER

Answered 2020-Mar-11 at 11:28

Nested paths that start with root / are treated as root paths. So when you are on /members/my-submissions/, for Vue router, it is as if you are on root path / since / matches /members/my-submissions/ as well as /members/my-submissions/create and thus no navigation happens.

To fix this, leave your first nested path empty, like:

Source https://stackoverflow.com/questions/60633215

Community Discussions, Code Snippets contain sources that include Stack Exchange Network