nhn / tui.editor Goto Github PK

Would really like to be able to position the toolbar to the bottom while retaining the menu popup functionality, like: table, right click on table etc.

Additionally would like to be able to remove the toolbar containing the markdown/wysiwyg toggle button.

I've been able to do these things with css but it seems to break some of the hover effects and causes some side effects.

Awesome project. I'm interested in making some PR but I'm curious the best branch to open pull requests to?

I'd like suggest for future contributions to this project, to create a CONTRIBUTING.md file with some guidelines on contributing, the Pull Request process, and code of conduct that the maintainers of this project would like.

Thanks!

Version

1.0.2

Test Environment

Win8 IE11

Current Behavior

markdown editor has the same issue reported in codemirror/codemirror5#5087
Steps:

1. write some korean words(may be multi type languages)
2. backspace, delete some characters
3. write korean characters again
4. try select a range using mouse
5. selected range deleted
6. later on, the characters in range will be gone continually

Expected Behavior

Text shouldn't be removed.

Hello TOAST UI Editor users.

If you found your language is not supported yet.

You can help us and become a contributor. This is a good first issue.

A PR #33 made by @elamperti is a good example. Please check it out.

I've been looking for a solid WYSIWYG markdown editor for some time, and Toast looks very promising! I've just been testing with the demo and noticed an issue with HTML in markdown. As you know putting HTML code in markdown is perfectly valid, and often is the only way to achieve something beyond the capabilities of markdown (adding a class or id for example). in the Markdown mode, things look ok:

# markdown

<div class="html">HTML</div>

**more markdown**

and renders in the preview fine (even with class="html" intact):

However, switching to WYSIWYG mode and back to Markdown causes a loss of the HTML:

It would be great (and much safer for users) if this could be maintained between modes.

Version

1.0.1

Test Environment

OSX Chrome 63.0.3239.132

Current Behavior

The README isn't very clear as to what CSS files are required to be loaded for the component to function correctly. Additional to the two more obvious editor CSS files within tui-editor, the codemirror/lib/codemirror.css file was required. This could be more explicit in the installation instructions.

Expected Behavior

Following the README installation instructions results in a fully functional component.

The WYSIWYG editor is really great. This helps a lot of people who are used to creating texts visually.

For exactly this reason, it would be great if there was a plugin for Visual Studio code for this editor. Since this is also completely written in type and JavaScript, this should not be a big act. But I think this would help a lot of people to create Markdown documents in the future.

Is there a way to have HTML mode?

Thx.

Version

1.01

Test Environment

Chrome, Mac
React

Current Behavior

 editor.insertText('<img src='~~'/>')

Expected Behavior

Hi. Thanks for a wonderful editor! I'm trying to add an image to server and place it selected position. (not base 64 encoded image)
Since i'm using addImageBlobHook , execute above code after successfully uploading image.
I think it's not the right way.. Is there any possible way?

Hi,

I'm testing tui and it's seems pretty good. thx for releasing it :)
I have problem with loading underscorejs and tui.editor. Without underscorejs, tui.editor works fine, but with underscorejs loaded, the editor displays but does not react (unable to write, click on any button, ...).
I tried to replace underscorejs with lodash without success.

tui.editor 0.14.0 (and its dependencies loaded by bower)
jquery 2.2.4
underscorejs 1.8.3
Tested on gnu/linux debian with firefox 52 and chrome 60

Any hint ?

Hi !

Test Environment

Windows 7

Current Behavior

I'm trying to npm install --save tui-editor.

I'm getting this error :

npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/nhnent/toMark.git
npm ERR!
npm ERR! FATAL ERROR: Network error: Connection refused
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

It seems to be a proxy issue but git and npm are already configured for my proxy.

I tried to run git ls-remote independently :
git ls-remote -h -t ssh://[email protected]/nhnent/toMark.git : same error
git ls-remote -h -t https://github.com/nhnent/toMark.git : the command never ends

Could you npm publish toMark and change package.json to use it that way ? I think that would solve my issue.

I think a lot of sentences can be better as English is not my first language.
Please feel free to make a PR and become a contributor!
Translation is also welcomed.

readme
getting started
getting started with bower
using extensions

Hello,

Is it possible that we can get the language strings in an stand alone file in the project. So we can translate easily the editor?

관리자에서 에디터를 통하여 게시글을 작성하여 DB에 등록하고
프론트에서 DB에 등록된 게시글을 조회하여 전시하는 구조의 프로그램 개발중입니다.
프로트 모듈 작성 시 질문사항 생겨서 문의 드립니다.

1. 게시글을 전시하려면 어떻게 해야하나요?
2. 마크다운 텍스트를 일반 텍스트(plain text) 로 변환할 수 없나요?
3. 마크다운 텍스트를 html 텍스트(plain text) 로 변환할 수 없나요?

확인 부탁드립니다. 감사합니다.

Version: v 1.0.2

Test Environment

Chrome: 63.0.3239.132, Windows 10

Current Behavior

Hi. I used tui.editor to try it on this link: https://nhnent.github.io/tui.editor/.

I added code tags like that:

 javascript
console.log(123); 

After I click WYSIWYG and then again I switched markdown tab tui.editor added extra ` tags and deleted programming language that I declared. For example:

console.log(123);  

Expected Behavior

It should stay without any data loss and when I navigate between tabs. I added this:

javascript
console.log(123); 

I expected this:

` ` ` javascript
console.log(123); 
` ` `

Hi.
Do you have in plan to publish your package to npm? bower is a little outdated for now and It would be great if I can get it from npm as all other packages.

Version

1.0.2

Test Environment

All

Current Behavior

Editor initialized with long contents appears with some content cut off.

Giving focus on editor will show the lest of content.

Expected Behavior

It should show all content at first render

Version

Version 1.1 from "Production" Branch

Test Environment

Client: Chrome 63.0.3239.13, Windows 10 64 Bits
Server: Ubuntu 16.04 LTS, NGINX, PHP-FPM, PHP 7.2, Laravel 5.5

Current Behavior

I can´t load the editor, using the file "tui-editor-Editor-all.min.js": gives me this error:
Uncaught TypeError: Cannot read property 'WwCodeBlockManager' of undefined
With this file: "tui-editor-Editor.min.js" it gives me this error:
Uncaught TypeError: (0 , r.default) is not a function

Code example

<script src="{{ asset('/plugins/tui-editor/dist/tui-editor-Editor-all.min.js') }}" type="text/javascript"></script>    
    <link href="{{ asset('/plugins/tui-editor/dist/tui-editor.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/plugins/tui-editor/dist/tui-editor-contents.min.css') }}" rel="stylesheet" type="text/css" />

<div id="editSection"></div>

<script>
        $('#editSection').tuiEditor({
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            height: '300px'
          });
        });
</script>

Expected Behavior

Show the Editor in the div selected.

Version

tui-editor: v1.0.1 webpack: v2.6.1

Test Environment

chrome windows*64

Current Behavior

// Write example code
const Editor = require('tui-editor');
require('tui-editor/dist/tui-editor.min.css');
require('tui-editor/dist/tui-editor-contents.min.css');
require('codemirror/lib/codemirror.css');
require('tui-editor/dist/tui-editor-extScrollSync.min.js');
require('tui-editor/dist/tui-editor-extColorSyntax.min.js');
require('tui-color-picker/dist/tui-color-picker.min.css');
require('tui-editor/dist/tui-editor-extTable.min.js');
require('tui-editor/dist/tui-editor-extUML.min.js');
require('plantuml-encoder/dist/plantuml-encoder.js');
require('raphael/raphael.js');
require('tui-chart/dist/tui-chart.min.js');
require('tui-editor/dist/tui-editor-extChart.min.js');
require('tui-chart/dist/tui-chart.min.css');
// or 
import Editor from 'tui-editor';
import('tui-editor/dist/tui-editor.min.css');
import('tui-editor/dist/tui-editor-contents.min.css');
import('codemirror/lib/codemirror.css');
import('tui-editor/dist/tui-editor-extScrollSync.min.js');
import('tui-editor/dist/tui-editor-extColorSyntax.min.js');
import('tui-color-picker/dist/tui-color-picker.min.css');
import('tui-editor/dist/tui-editor-extTable.min.js');
import('tui-editor/dist/tui-editor-extUML.min.js');
import('plantuml-encoder/dist/plantuml-encoder.js');
import('raphael/raphael.js');
import('tui-chart/dist/tui-chart.min.js');
import('tui-editor/dist/tui-editor-extChart.min.js');
import('tui-chart/dist/tui-chart.min.css');

//init
		const editor = new Editor({
				el: document.querySelector('#editSection'),
				initialEditType: 'markdown',
				initialValue: this.content || '',
				previewStyle: 'vertical',
				height: '300px',
				language: 'zh_CN',
				exts: ['scrollSync', 'colorSyntax', 'table', 'uml', 'chart'],
				useCommandShortcut: true
			});

Expected Behavior

this is first enter this page:

when I use es6 import , I refresh（F5） page then these Extensions: Scrolling ，Color picker，Table(merge) useless

But using CommonJS is valid. I didn't find out what caused it?

Version

Test Environment

Current Behavior

How do I enter media link?

동영상 링크를 입력할려면 어떻게 해야하나요?

Expected Behavior

Version

1.0.1

Test Environment

All

Current Behavior

Expected Behavior

jquery update to version ^3.1.0

Version

v1.0.1

Test Environment

Chrome 63, Firefox developer edition 58

Current Behavior

텍스트 박스 상에서 텍스트를 작성한 행 위에 커서를 올리면 ibeam 커서가 나타나지만, 텍스트를 작성하지 않은 빈 공간에 커서를 올리면 기본 arrow 커서가 나타납니다.

Expected Behavior

대부분의 에디터가 편집 섹션에는 기본적으로 ibeam 커서를 나타나게 하고 있는 만큼, 사용자 경험 측면에서 빈 공간에도 ibeam 커서를 나타나게 하는 게 더 낫지 않을까 생각합니다.

By looking the HTML of the editor, I see that you've already foresee a "spellcheck" attribute

<div contenteditable="true" class="tui-editor-contents" ....  spellcheck="false" ....>

Is it possible to specify the language for the spellcheck ? (french, dutch, english, ...)

Many thanks

안녕하세요. 네무소프트 김지혜입니다.

Toast Cloud Blog 개발 관련하여 Dooray editor을 사용하고 있는데요.
다음과 같은 이슈가 발생하여 문의 드리오니 확인 부탁드립니다.

1. 값 셋팅시 null 처리
   null 값 셋팅시 오류가 발생하고 있습니다.
   단, 임의적으로 blank를 넣으면 정상작동합니다.
2. image 경로 callback시 특수문자 처리
   image 서버와 연동 후 이미지 경로를 에디터에 시팅시 특수문자가 들어가면
   console창에 404(Not Found) 오류가 발생합니다.
   물론 이미지도 보이지 않구요..

감사합니다.

I'd love to see this as a stand-alone markdown editor too, like retext or typora, that can edit local markdown files.

Like the previous issue I posted, switching between Markdown and WYSIWYG modes also causes issues for codeblocks. Take the example code:

Toggling to WYSIWYG and back to Markdown causes the code to be wrapped in backticks:

Repeating this process results in more backticks:

Version

1.0.2

Test Environment

Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

It is extremely hard to blend the editor with a real environment (I mean web page design), as it has inconsistent use of inline PNGs and SVGs, hard-coded 'px' units and all the other unfancy stuff. Honestly, the code smells. Like, stinks. It's a pity that such great FOSS project has ugly insides 😢

There are no CSS variables or preprocessor codes to compile, and no way to style the editor except by manual editing of CSS files. I have a dark app with large typography and existing button & input styles, and I had to wipe out literally a half of all the CSS code of ToastUI editor. The other half is tweaked till now and is converted to stylus.

Expected Behavior

There are several ways to solve this problem:

• use preprocessor with variables so users can config editor to their size, color, style requirements;
• create multiple themes, at least dark one (this will be much easier with preprocessors, though);
• allow to config colors and scale via js (hard to do and seems to be irrational 😐)

Besides that, I believe that no one should use px in 2018, but rem`em` instead of that. You could also add source icons in SVG to the repo.

Please forgive me if I sound rude, I have a really tough time with ToastUI editor :/

Hi,
Is there a way to configure extensions ?
For example I would like to change the DEFAULT_RENDERER_URL to use mine.
https://github.com/nhnent/tui.editor/blob/377d148fd328ed3d54e6c9163a15b07264797632/src/js/extensions/uml.js#L10

Very appreciate your work with such amazing editor.

I've noticed TUI editor supports IE10+, which means it can use blob and window.URL instead of base64 when uploading images. It will reduce those verbose and unreadable base64 data when users switch to Markdown mode. Also, the performance of parsing content would be better.

How do you think about it?

Because English is not my first language, I need someone who can do it smoother.
Make a PR and be a committer.

Version

1.0.2

Test Environment

All

Current Behavior

switch to markdown

|  |  |  |
| --- | --- | --- |
<colgroup><col width="87" span="3"></colgroup>|  |  |  |
| a | b | c |
| 1 | 2 | 3 |

Expected Behavior

remove colgroup.

Version

v1.0.1

Test Environment

OS: Windows 10
Browsers: Google Chrome

Current Behavior

The developers who want to use tui editor have to install lots of dependencies. Using package manager, they can install the dependencies easily, of course.
However, I think it is a little uncomfortable to import the dependencies, like this.

import 'markdown-it';
import 'toMark';
import 'codemirror';
import 'squire-rte';
import 'codemirror/lib/codemirror.css';
import 'tui-editor/dist/tui-editor.min.css';
import 'tui-editor/dist/tui-editor-contents.min.css';
import Editor from 'tui-editor';

let editor = new Editor({
  el: document.querySelector('#editor'),
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: '300px'
});

In addition, it is difficult to find the documents that explain about the dependencies.

Expected Behavior

I'd like to import all of dependencies at a time, but I don't know if that's possible. I'm sorry.
Also, I suggest updating getting-started.md. It confuses beginners, because the codes on the document are too simple. I think it should explain about importing the dependencies.

Hi !

Not an issue but a question : I've not yet installed tui.editor and I'm really interested too try it but ... how can we save the content on the server ?

I'm actually using Simple MDE, we can attach on the toolbar a "save" button, retrieve the content of the

Version

tui-editor v1.0.1

Test Environment

chrome win10*64

Current Behavior

// html
<div id="editSection">
    </div>
    <script src="./index.js"></script>

// js
var Editor = require('tui-editor');
require('tui-editor/dist/tui-editor-extScrollSync.js');
//require('tui-editor/dist/tui-editor.css');
//require('tui-editor/dist/tui-editor-contents.css');
//require('codemirror/lib/codemirror.css')
//require('highlight.js/styles/github.css');
var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px',
    exts: ['scrollSync'],
    useCommandShortcut: true,
});

Expected Behavior

docs example Basic
When I don't use this.

require('tui-editor/dist/tui-editor.css');
require('tui-editor/dist/tui-editor-contents.css');
require('codemirror/lib/codemirror.css')

I cant use online edit markdown editor and ui style is disordered

Hi, I’d like to request Webdav support, which is supported by all operating systems (MacOS, Windows, FreeBSD, Linux) and usable through apps on mobile devices.

This would allow the editor to integrate with other pieces of software mentioned on issue #50, which is also referenced on Joplin issue #176.

Version

1.0.2

Test Environment

Mozilla Firefox Dev Edition (latest), nw.js (latest webkit)

Current Behavior

Open https://nhnent.github.io/tui.editor/

Write some code, like

```css
 .tui-editor-defaultUI .te-tab button {
    box-sizing: border-box;
    line-height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 1;
}
```

While in Markdown mode, the preview code is colored. While in WUSIWYG, it is not.

Expected Behavior

Code should be colored in both views.

It would be great if Retina/High-resolution icons were built in natively.

Version

1.0.2

Test Environment

Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

1. Go to https://nhnent.github.io/tui.editor/ , find an editor with a code input.
2. Write **bold**
3. Double-click the bold. Note that only bold gets selected, not **bold**.
4. Click a Bold button on a toolbar.
5. Now you have ****bold****.

These __bolds__ are selected with underscores on double-clicking, and their formatting is removed correctly. But if exactly bolds are selected, it creates more symbols as well.

The same affects *italics*.

Expected Behavior

You should get bold on step 5. Code editor should check for surrounding asterisks.

Version

tui-editor: v1.0.1 axios: v0.17.1 vue: v2.5.0 vuex: v3.0.1

Test Environment

chrome win7*64

Current Behavior

// Write example code
const 	tuiViewer = new Viewer({
				el: document.querySelector('#viewerSection'),
				height: '500px',
				initialValue: this.content || '',
				language: 'zh_CN',
				exts: ['table', 'uml', 'chart'],
				hooks: {
					previewBeforeHook(content) {
						console.log(arguments);
						// tuiViewer;
						debugger;
					}
				}
			});

Expected Behavior

I need to render the view and set initialValue after the axios request.
use hook previewBeforeHook debug when async req success then render the editor view and begin initialValue
When exist multiple xhq trigger the initialValue , can be cause some problem, then should use watch props（initialValue ）
then ToastUIEditorViewer.setValue(newValue)， Ensure that the obtained values are correct.;
These tips can help people who use data binding.

this my code by vue 2.x：

<template>
  <div>
    <div id="viewerSection"></div>
  </div>
</template>

<script>
var Viewer = require('tui-editor/dist/tui-editor-Viewer');
require('tui-editor/dist/tui-editor.min.css');
require('tui-editor/dist/tui-editor-contents.min.css');
require('codemirror/lib/codemirror.css');
require('tui-editor/dist/tui-editor-extScrollSync.min.js');
require('tui-editor/dist/tui-editor-extColorSyntax.min.js');
require('tui-color-picker/dist/tui-color-picker.min.css');
require('tui-editor/dist/tui-editor-extTable.min.js');
require('tui-editor/dist/tui-editor-extUML.min.js');
require('plantuml-encoder/dist/plantuml-encoder.js');
require('raphael/raphael.js');
require('tui-chart/dist/tui-chart.min.js');
require('tui-editor/dist/tui-editor-extChart.min.js');
require('tui-chart/dist/tui-chart.min.css');
var tuiViewer;
export default {
	name: 'TuiViewer',
	props: {
		content: String
	},
	methods: {
		setContent() {
			tuiViewer.setMarkdown(this.content);
		}
	},
	watch: {
		content: function(newValue) {
			debugger;
			tuiViewer.setValue(newValue);
		}
	},
	mounted() {
		this.$nextTick(function() {
			tuiViewer = new Viewer({
				el: document.querySelector('#viewerSection'),
				height: '500px',
				initialValue: this.content || '',
				language: 'zh_CN',
				exts: ['table', 'uml', 'chart'],
				hooks: {
					previewBeforeHook(content) {
						console.log(arguments);
						// debugger;
					}
				}
			});
			// debugger;
		});
	}
};
</script>

<style scoped>

</style>

Version

1.0.2

Test Environment

Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

Go to https://nhnent.github.io/tui.editor/
Write

****text****
**text**

First 'text' is not bold in a code view but is rendered as bold. The second 'text' is ok. So the markdown syntax highlighting in code view is buggy.

The same affects four underscores (____text____).

Expected Behavior

Text formatting should be correct for both views (****text**** should be shown as a bold text).

First let me start with: awesome work on TUI editor!

I'm trying to add a markdown-it plugins (for example: https://github.com/nunof07/markdown-it-alerts), but don't have access to the markdown-it instance. I've loaded TUI editor through Webpack.

Any idea how I can accomplish this?

many ppl confused on default branch was production branch,
which is just for compiling distribution files before it is published.

This was because many people still want to download distribution files by green download button on main page on repo.

we will change default branch to master.

and develop branch has been removed because we now can't rebase develop branch as forked repo increases.

Version

1.0.2

Test Environment

Mozilla Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

1. Open https://nhnent.github.io/tui.editor/
2. Find a WYSIWYG example
3. Insert 3 or more horizontal rows in, erm, in a row
4. Start erasing them with Backspace key. Notice as new paragraphs appear between the lines when you try to erase the second one.

It happens on any horizontal line number greater than two. Extra paragraphs appear exactly after trying to remove the second line at the bottom.

Expected Behavior

No additional paragraphs or line breaks should appear.

It is very powerful to be able to type markdown directly in the WYSIWYG mode. Examples of such editors:

• http://typora.io/
• https://paper.dropbox.com/

dev dependency marked has xss vulnerabilities reported in

https://nvd.nist.gov/vuln/detail/CVE-2017-17461
https://nvd.nist.gov/vuln/detail/CVE-2017-1000427

Editor and it's demo will not be affected by these vulnerabilites as these on process making jsdoc documents.

But better be covered.

tui.editor를 이용하여 QnA 게시판을 만들었습니다.

왼쪽에 질의사항을 보이고 오른쪽에 답변사항을 편집하는데,

답변사항에서 이미지 붙여넣기한 후에 저장하고,

다시 열면 이미지가 byte 문자열로 보입니다.

확인 부탁드립니다.