ckeditor / ckeditor4-vue Goto Github PK

Vue 3 will be probably released in Q1 2020. Once it's in a stable version, we should consider upgrading integration, so it's working with the latest version or create separate integration if not possible due to breaking changes.

For now, let's just wait until Vue 3 release to find out the best solution.

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

1. Plugin version 1.2.0
2. Use with command: import CKEditor from 'ckeditor4-vue/dist/legacy.js'
3. Check in IE 11

Expected result

Proper work of editor

Actual result

Syntax error in build.
Error leads me to webpack://ckeditor/node_modules/ckeditor4-integrations-common/src/getEditorNamespace.js:47

Other details

With version 1.1.0 it works fine

Are you reporting a feature request or a bug?

Task

Provide detailed reproduction steps (if any)

Before 1.0.0 release we need to:

• Check 1.0.0 changelog
• Change README to mention stable version instead of beta
• Change documentation to mention stable version instead of beta

I will take care of changes in README and documentation and ask @AnnaTomanek to review them.

Hi!

In the documentation, there are only few events where mentioned.
How can I listen for key down events?
I didn't found any documentation on keydown events with Vue.

A little help with be appreciated. Thanks!

Editor config "skin" is related to CDN, how can I use my local skin folder instead ?

Example:

<template>
    <div>
        <ckeditor v-model="content" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    export default {
	props: {
            originalContent: String,
        },
		
        data() {
            return {
		'content': this.originalContent,
                editorConfig: {
                    skin: 'ems'
                },
            }
        }
    }
</script>

result trying to load those files:

https://cdn.ckeditor.com/4.14.0/standard-all/skins/ems/skin.js
https://cdn.ckeditor.com/4.14.0/standard-all/skins/ems/editor.css

Hello, I'm experiencing issue with vue component in Firefox browser only. Please notice the screenshot:

Vue Component:

<template>
    <div :data-field="id" class="ck4-text-input">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
        <textarea :id="id" :name="name" v-model.lazy="editorData" class="d-none"></textarea>

        <div class="slot-wrapper d-none">
            <slot/>
        </div>
    </div>
</template>

<script>
    // normal and legacy release cause the issue
    import CKEditor from 'ckeditor4-vue/dist/legacy';
    import CkShared from './ckShared';

    export default {
        props: {
            id: {type: String, default: 'ck-text-document-${++inc}'},
            name: {type: String},
            config: {type: Object, default: '{}'}
        },
        components: {
            ckeditor: CKEditor.component
        },
        data() {
            return {
                editorUrl: '/ckeditor/ckeditor.js',
                editorData: '',
                customConfig: '',
                defaultLanguage: 'en',
                editorConfig: Object.assign({}, CkShared.config, {
                    allowedContent: {
                        a: {attributes: '!href'},
                        'address b br del i ins p pre sub sup': {},
                        div: {
                            attributes: 'class',
                            classes: 'exception, list, equation_group, equation, equation_content, equation_number, where'
                        },
                        'h1 h2 h3 h4 h5 h6': {},
                        img: {attributes: 'alt, !src, height, width, src-filename'},

                        // lists
                        'ol ul li': {},

                        // tables
                        table: {attributes: 'frame, rules'},
                        'thead tbody tfoot': {attributes: 'align valign'},
                        tr: {},
                        'th td': {
                            attributes: 'colspan, rowspan, align, valign, class',
                            classes: 'left, center, right, justify'
                        },
                    },
                    autoGrow_onStartup: true,
                    bodyClass: '',
                    contentsCss: '/build/ckeditor.css',
                    height: 400,
                    resize_enabled: true,
                    toolbar: CkShared.toolbars.document,
                })
            };
        },
        mounted() {
            this.editorData = this.$el.getElementsByClassName("slot-wrapper")[0].innerHTML;
            this.config = JSON.parse(this.config);

            if (this.editorConfig.removePlugins === undefined) {
                this.editorConfig.removePlugins = '';
            }

            if (typeof this.config.isStaff === 'undefined' || false === this.config.isStaff) {
                let plugins = this.editorConfig.removePlugins.split(',');

                plugins.push('sourcearea');
                plugins.push('elementspath');

                this.editorConfig.removePlugins = plugins.join(',');
            }
        }
    }
</script>

Seems like plugins widgetcontextmenu, base64image are the issue, but i need those working too.

I don't understand why this component is calling translations in the first place.

Any tips?

Before publishing integration we need nicely written docs similar to Angular and React one.

Are you reporting a feature request or a bug?

Task

Provide detailed reproduction steps (if any)

Recently CI turned red due to some Safari error from what I can see 🤔

Last green build - 2ff96a9
First red build - 49d3872 (restarted to see if it's not random)

To bump all CKEditor 4 deps (CDN links mostly) easily when releasing a new version.

Since the editor is initialized asynchronously due to CDN lazy loading, it may be possible that component watchers will be executed before initialization as component mounting is a non-blocking operation for the editor. We should delay watchers if an instance is not yet available:

ckeditor4-vue version: 1.0.1

Usually the value is showed correctly but sometimes ckeditor has the value but doesn't show it.

This is the code in TextEditor component. I couldn't find the reason why it sometimes looks empty, and there is nothing in console. Have an idea why is this happening?

<template>
  <ckeditor
    :value="value"
    @input="(v) => $emit('input', v)"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    editorConfig: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

Type of report

Bug

I'm trying to set the content of an inline Vue CKEDITOR 4 component through v-model, multiple times. My issue is that this works until the user types text in the editor. Afterwards, anything I pass to the v-model is overwritten with what the user typed.

Provide detailed reproduction steps (if any)

1. Explicitly set editor value 'aaa' through v-model. (non-user change)
2. Type 'bbb' in the editor (so that we have 'aaabbb') (user change)
3. Explicitly set editor value 'ccc' through v-model. (non-user change)

Expected result

• The 'ccc' value is set and shown.

Actual result

1. The 'ccc' value is set in the editor.
2. The 'aaabbb' value is set (overwriting value at 1.) and shown

<template>
    <div>
        <ckeditor
            v-model="editorData"
            type="inline"
        />
    </div>
</template>

export default class EditorWrapper extends Vue {
    // Vue component property that contains data sent to editor in steps 1. and 3.
    @Prop({ type: String, default: '' })
    externalData!: string;

    // Vue data variable that is bound 2-way to the editor
    editorData: string;

    // watch for changes to the 'externalData' property
    @Watch('externalData')
    onPropertyChange(externalData) {
        // explicitly set the editor text when not changed by the user (steps 1. and 3.)
        this.editorData = externalData;
    }

    // watch for changes to the editor 'v-model' data (user and non-user changes)
    @Watch('editorData')
    onEditorDataChange(data) {
        // this outputs the editor text - 'ccc', then 'aaabbb' - which is wrong
        console.log(data);
    }

}

Other details

• Browser: Chrome Version 80.0.3987.162 (Official Build) (64-bit)
• OS: Windows 10
• CKEditor version:
  • vue-ckeditor 0.1.0
  • ckeditor 4.13.0
• Installed CKEditor plugins: Standard Package plugins

IE11 testing via BrowserStack should be enabled similarly like it has been done for Angular integration.

Currently it's blank. 

It should remind the one from the ckeditor4 repo except for the link for reproducing issues (should be adjusted to Vue).

This property could disable loading unnecessary config file from CDN. Currently there is no way to set it with Vue component.

Hello,
I installed and used it as a component
npm install ckeditor4-vue

and the code is the same with example on official site

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

But my toolbar is not the same as it is with

I tried the instruction on Toolbar Configuration

But my toolbar still looks like this:

Some toolbar buttons are not included in my ckeditor
Is there anyways I can solve this problem? Thank you.

Hello, I use ckeditor4 vue with vue2 and bootstrap vue.
The ckeditor4 is inside a modal and the text and numeric fields of the CKEditor4 forms are unfocused, preventing typing.
I know that this is an already known problem and I found some possible solutions but none apply to the case of the VUE. At least I couldn't adapt any of them.
Has anyone ever experienced this? Could you give me some guidance on how to solve it?
Thank you.

We need to make sure if IE11 is supported by the integration. It may require some additional polyfill but should be also tested.

Should be filled similarly to https://www.npmjs.com/package/ckeditor4-angular or https://www.npmjs.com/package/ckeditor4-angular.

npm install --save ckeditor4-vue

import CKEditor from 'ckeditor4-vue';
Vue.use(CKEditor);

无法找到模块“ckeditor4-vue”的声明文件

Type of report

Task

Provide description of the task

i tried asking this question over stack overflow but no luck so i deiced to put it here hoping anyone could help
so i have been on this for to long not quite sure what is the change that should be done when i try to

npm run build

result

ERROR in static/js/vendor.ed03b8c8fa6b2d569140.js from UglifyJs
Unexpected token: name (i) [./~/ckeditor4-vue/dist/ckeditor.js:5,1974][static/js/vendor.ed03b8c8fa6b2d569140.js:51884,1934]

but when locally

it works just fine

my editor.vue
missing some plugins according to the Image

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import CKEditor from "ckeditor4-vue";

export default {
    name: "app",

    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            editorData: "<p>Content of the damn editor.</p>",

            // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
            editorConfig: {
                extraPlugins: "language,font,image2",
                toolbar: "Bold",
                height: 300,
                allowedContent: true,
                uiColor: "#AADC6E",
                codeSnippet_theme: "school_book",
                filebrowserImageBrowseLinkUrl:
                    "https://onedrive.live.com/?id=59FFBD6D7046F78D%21105&cid=59FFBD6D7046F78D",
                font_names:
                    "Arial/Arial, Helvetica, sans-serif;" +
                    "Times New Roman/Times New Roman, Times, serif;" +
                    "Verdana",

                codeSnippet_languages: {
                    javascript: "JavaScript",
                    php: "PHP"
                }
            }
        };
    }
};
</script>

Webpack.prod.conf.js

webpackversion [email protected]

 plugins: [

        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
            "process.env": env
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),

Other details

• Browser:chrome
• OS:Windows
• CKEditor version: 4
• Installed CKEditor plugins: …

I would want to use custom plugin

Are you reporting a feature request or a bug?

Task

Provide detailed reproduction steps (if any)

During CI run, travis generate message:

 Build config validation 
root: deprecated key sudo (The key `sudo` has no effect anymore.)
root: missing os, using the default linux

Expected result

Remove deprecated setting, so there will be no warnings from CI.

Non-kebab-case property names are incorrectly used in the documentation code samples for the following properties:

• editorUrl → editor-url
• readOnly → read-only

Hello,

I need to use an on paste event, however the closest thing is an on "input" event. In this section of the doc it says:

if you need access to the editor object, you can use the editor property of the component’s instance:

component.instance.getData();

I cant understand how that maps to my current template, because:

1. console.log(this.$refs.editor) is defined
2. console.log(this.$refs.editor.instance) is undefined
3. console.log(this.$refs.editor.on()) is not a function

My vue file:

<template>
    <div class="container">
        <ckeditor :editor-url="editorUrl" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

How cani destroy Ckeditor 4 on vue js?

Are you reporting a feature request or a bug?

Provide detailed reproduction steps (if any)

1. …
2. …
3. …

Expected result

What is the expected result of the above steps?

Actual result

What is the actual result of the above steps?

Other details

• Browser: …
• OS: …
• Integration version: …
• CKEditor version: …
• Installed CKEditor plugins: …

Are you reporting a feature request or a bug?

bug

Provide detailed reproduction steps (if any)

Same as ckeditor/ckeditor4-angular#141.

Other details

I didn't check it, but I suppose this issue may also occur in React integration.

See #50 (comment)

keep-alive component is used to cache child components when they are inactive, e.g. during routing change. It can be supported by adding activated/deactivated hooks being a kind of replacement for mounting/destroying hooks. See #50 (comment) for some implementation details.

Are you reporting a feature request or a bug?

Task

Other details

It should be done in #61, since we don't need to import this package as we are using the ckeditor4-integrations-common repo instead.

Type of report

Bug

Provide detailed reproduction steps (if any)

1. insert my own Html to editor by using setData.
2. binding events on html（In my situation is Vue instantiation）.
3. do something else...
4. execute undo command.

Expected result

event binding is effective.

Actual result

Event binding lost

Other details

I think the bug is related to the implement of undo，html is saved to the undo images，but not the events（ Vue instantiation）. Is there any solution to solve this problem ?

• Browser: Google Chrome 80
• OS: win10
• CKEditor version: 4
• Installed CKEditor plugins: none

setData tests fail on Edge due to some Permission Denied error -

I didn't notice any issue with manual testing on Edge but we need to make sure nothing is broken and verify why actually the tests fail.

Are you reporting a feature request or a bug?

Feature request

I just want load CKEDITOR in my workspace instead of external URL sometimes.

Expected result

What is the expected result of the above steps?

We can use local resource instead of CDN URL

There is no way we can see to configure the path for a local custom plugin when using ckeditor from cdn.

Without vue, the normal process would be:

<script src="https://cdn.ckeditor.com/4.12.1/full/ckeditor.js"></script>
<script>
    CKEDITOR.plugins.addExternal('divarea', '/path-to-local-plugin/plugins/divarea/', 'plugin.js');
</script>
<script>
    CKEDITOR.replace("HtmlContent", {
        customConfig: 'ckEditorLocalPathToConfig/config.js',
    });
</script>

Then in config.js:

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'divarea';
}

Seems like ckeditor4-vue needs something like a pluginAddExternal prop added to the component and then invoked in it's code before it calls replace?

Hi Everybody !!!
In the Vue CKEditor doc it says:

    if you need access to the editor object, you can use the editor property of the component’s instance:

    component.instance.getData();

I cant understand how that maps to my current template, because:

    console.log(this.$refs.editor) is defined
    console.log(this.$refs.editor.instance) is undefined
    console.log(this.$refs.editor.on()) is not a function

My vue file

  <ckeditor
      v-model="form_single_question.content.detail"
      :config="editorConfig"
      @input="autocompleteKatexes('tags_content', 'content')"
      class="w-100"
      id="tags_content"
      ref="editor"
  >
  </ckeditor>

Becasue i want to get selectionStart (current cursor).
Please help me !!!

Hey guys, I'm kinda new to ckeditor and I'm using vuejs as a framework of choice. I was easily able to run ckeditor but I'm trying to use the document editor and I'm not able to find any solution as to how to achieve it. Would be great if someone can help me out on this. The picture that i uploaded is the kind of editor I would like to use and I'm not able to figure out how to get this. Have a great day.

Hi There
any chance to use CKEditor 5 component in VueJS 1.x project with CDN
If possible can you please provide an example link
Thanks

Are you reporting a feature request or a bug?

With #61 we are introducing a directive which enables developer to modify it before components are created.

We have those browsers in karma config and it worked fine in the past, but looking at few recent current builds I don't see tests running in Safari or Edge 🤔

We should investigate what's going on and fix it to have good browsers coverage. Also related to #9.

See recent builds here - https://travis-ci.org/github/ckeditor/ckeditor4-vue/builds.

Well, looking at builds history it seems it never worked for Safari/Edge? 🤔 🙈  For example:

• https://travis-ci.org/github/ckeditor/ckeditor4-vue/builds/691640509
• https://travis-ci.org/github/ckeditor/ckeditor4-vue/builds/646282605
• https://travis-ci.org/github/ckeditor/ckeditor4-vue/builds/608656777

Are you reporting a feature request or a bug?

Provide detailed reproduction steps (if any)

When working on docs for #67 I find out that we probably misplaced our namespaceLoaded directive with the event. It seems more semantic to treat it as an event since it's asynchronous and it's called only in a specific environment. It would be good to move this directive into events instead, so instead of writing:

<ckeditor :namespace-loaded="callback" />

we would have

<ckeditor @namespaceloaded="callback" />

(I've changed the name of the event on purpose as it's probably more convenient to write events without - character, and the camel case is discouraged by Vue).

For more details about the feature see #66

hello,I'd like to ask you questions,if i'd like addExternal function,for example,add the mathematical formula,What should I do? beacuse, I find official document and this example default is none mathematical formula,mathematical formula is need a addExternal,thank you!

I have faced with the problem of integration of audio into the ckeditor. Tried to use the https://ckeditor.com/cke4/addon/html5audio but I am getting an error namely html5audio was not found in ..... How can I implement it?

With #63 we are introducing a throttle option that can be changed by a developer to suit project needs.

It should be possible to register all necessary listeners directly inside the mount function without preserving the reference to editor's instance in the Vue component as this.instance:

• https://vuejs.org/v2/guide/components-edge-cases.html#Programmatic-Event-Listeners
• https://vuejs.org/v2/api/#vm-watch

I noticed that when editing large content in ckeditor4 could be very slow, and I already seen that issue has been fixed in ckeditor/ckeditor5-vue#46, so is there a way to do the same fix in ckeditor4 please？

Are you reporting a feature request or a bug?

Provide detailed reproduction steps (if any)

1. …
2. …
3. …

Expected result

What is the expected result of the above steps?

Actual result

What is the actual result of the above steps?

Other details

• Browser: …
• OS: …
• Integration version: …
• CKEditor version: …
• Installed CKEditor plugins: …

Are you reporting a feature request or a bug?

In some use cases, we would like to access CKEDITOR namespace before initializing editor instances to customize it, e.g. when adding external plugins. I suppose it could be a callback created directly on the Vue CKEditor module, but I'm leaving implementation details to the developer.

E.g.

import { namespaceLoaded } from 'ckeditor4-vue';

namespaceLoaded( ( CKEDITOR ) => {
  CKEDITOR.addExternal( 'editorplaceholder', 'https://url-to-editor-placeholder/plugin.js' );
} ); 

We are missing changelog file.

While in view source-mode, the two-way data binding is not working and the data is not updating when you write in the textarea.
Once you switch back to WYSYWYG mode the data is then refreshed.

You can test it out on the official demo link:
https://ckeditor.com/docs/ckeditor4/latest/examples/vue.html#/2-way-binding

clicking on the view-source button and typing something doesn't update the "Rendered content" box.

It would be nice to keep the two-way binding active while in view-source mode too.

Thanks for the great work your're doing!