Comments (7)
Not sure if this is correct but when I import it like this it works
import Editor from 'cl-editor/dist'
from cl-editor.
I figure this out I guess the example calling the "Events" need to be updated to this Is missing the "$"
// Events
editor.$on('change', (html) => console.log(html)) // on every keyup event
editor.$on('blur', (event) => console.log(event)) // on editor blur event
from cl-editor.
If you are going to do it within a Svelte component (as per your current code), you'll need to do it onMount() as the target
param expects a rendered HTML element. Otherwise you will have to move <div id="editor"></div>
out of your Svelte app and have it rendered in the "regular" way (just html emitted by your backend) so by the time Svelte kicks in the element is there.
from cl-editor.
did not work for me I am using it on a sapper app with svelte 3.0.0 and getting this error
Expected valid tag name
1: <:Window on:click="_documentClick(event)" />
^
2: <div class="cl" ref:editorWrapper>
3: <div class="cl-actionbar">
from cl-editor.
I am trying it on my svelte setup with out Sapper and getting this error
I could see the text editor ok but get error below and I just copy your example setup
// Initialize editor
const editor = new Editor({
// <HTMLElement> required
target: document.getElementById('editor'),
// optional
props: {
// <Array[string | Object]> string if overwriting, object if customizing/creating
// available actions:
// 'viewHtml', 'undo', 'redo', 'b', 'i', 'u', 'strike', 'sup', 'sub', 'h1', 'h2', 'p', 'blockquote',
// 'ol', 'ul', 'hr', 'left', 'right', 'center', 'justify', 'a', 'image', 'forecolor', 'backcolor', 'removeFormat'
actions: [
'b', 'i', 'u', 'strike', 'ul', 'ol',
{
name: 'copy', // required
icon: '<b>C</b>', // string or html string (ex. <svg>...</svg>)
title: 'Copy',
result: () => {
// copy current selection or whole editor content
const selection = window.getSelection();
if (!selection.toString().length) {
const range = document.createRange();
range.selectNodeContents(editor.refs.editor);
selection.removeAllRanges();
selection.addRange(range);
}
editor.exec('copy');
}
},
'h1', 'h2', 'p'
],
// default 300px
height: '300px',
// initial html
html: '',
// remove format action clears formatting, but also removes some html tags.
// you can specify which tags you want to be removed.
removeFormatTags: ['h1', 'h2', 'blackquote'] // default
}
})
// Events
editor.on('change', (html) => console.log(html)) // on every keyup event
editor.on('blur', (event) => console.log(event)) // on editor blur event
TypeError: editor.on is not a function
from cl-editor.
is there any way to append html at the end of user's last cursor, as of now every time I do setHtml, it actually not appending, it's overriding the existing content
As for example: (consoled output through editor.$on('change')
API)
we are writting a new **<span data-time="sadasd" data-progress="atttt" class="btn-aa d-inline">method** about our work**</span>**
here the star marked one is my inserted html through sethtml and you can see about our work this I have written in the editor which is appending to the programmatic tag part. which raises the issue.
from cl-editor.
Currently not supported.
What you can do is, whenever you need to append some text/html, first getHtml
, find current cursor position, set or append new text/html in that position and call setHtml
method.
You can use saveRange()
and restoreRange()
to make sure user focus is not lost.
from cl-editor.
Related Issues (20)
- Just wanted to say thanks! HOT 2
- How do we make the editor auto expand? HOT 2
- Provide example for usage within svelte HOT 3
- Events don't seem to work HOT 2
- Improve the image actions with some features HOT 1
- binding editor HTML HOT 4
- Certain keys are not working on Svelte HOT 1
- Problem toggling bold/italics tag when there is a new line HOT 5
- Feature request: remove format blockon second click if activated HOT 2
- setHtml while viewHtml action is active doesn't replace contents? HOT 2
- Selecting text with cursor selects everything above it HOT 1
- Incorrect undo on multiple instances
- Extra Configurability HOT 3
- Error when using in SvelteKit Type script project HOT 3
- h1 and h2 tags don't get removed HOT 2
- Issue with headings, lists
- cl-button Font-Size is unset
- how to get markdown text? HOT 1
- Change editor background colours, padding etc ? HOT 1
- Bad text selection behaviour inside <dialog> element
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cl-editor.