theroozbeh / vue-tinymce-editor

This a component provides use of tinymce for vue developers

vue-tinymce-editor

This a component provides easy use of tinymce for vue developers

Demo

You can see a demo and an example in this page: Demo & examples

Instalation

$ npm install vue-tinymce-editor

How to use

import Vue from 'vue'
import tinymce from 'vue-tinymce-editor'
Vue.component('tinymce', tinymce)

You may use the component in your markup

<tinymce id="d1" v-model="data"></tinymce>

export default{
    data(){
        return {
            data : ''
        };
    }
}

Properties

Property	Type	Default	Description
id	required, String		id of component's textarea
toolbar1	String	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Toolbar 1 of tinymce
toolbar2	String	''	Toolbar 2 of tinymce
plugins	Array	['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality','template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample']	plugins of tinymce you need to load
other_options	Array	{}	other tinymce options. you can also override our initial options
readonly	Boolean	false	Enables or disables the Editor

Events

Event	Parameter	Description
editorChange	Event	This event will be called when tinymce calls onchane
editorInit	Editor	This event will be called after editor is initialized

Localization

If you wish to use tinymce in other languages, please follow these steps:

1. Download the language pack you wish to use from here.
2. Unpack the language file into your desired path, which is accessible from outside and there is a URL pointing to it.
3. Finally, set language_url in other_options to the URL pointing to the language file.

For example:

export default{
    data(){
        return {
            data : '',
            options: {
                language_url: 'http://example.com/js/langs/fa_IR.js' //This url points to location of persian language file.
            }
        };
    }
}

<tinymce id="d1" v-model="data" :other_options="options"></tinymce>

Direct access to tinymce editor

You can access the tinymce itself by setting a ref to this component:

<tinymce id="d1" v-model="data" ref="tm"></tinymce>

Then you can access the editor by calling:

this.$refs.tm.editor

Donate

If you like this project and it was useful for you don't let it die. Help me continue it. Thank you. or you can buy me a coffee

vue-tinymce-editor's Issues

Content changes on onClick event is not reflecting to Tinymce Editor

I'm trying to build a tool for editing and merging documentations. I've template with texts and images and users can chose those templates on select boxes with clicking to "button".

I'm be able to update "content" variable on every click event on backend, but the issue is only first click is effecting to the Tinymce's text area and following clicks doesn't reflecting to the tinymce text area.

Editor

 <editor
             v-model="content"
             :init="{
            ...
 }"
     >
     </editor>

Button

      <button v-on:click.prevent="editDraft()" :disabled="loading" name="submitbtn" type="submit" id="suBbutton" class="btn btn-primary btn-block mt-3" style="background-color: #a6c307">Choose Draft</button>

function

data() {
       return {
       
         content: '',
        ...

     }
     },
     methods: {
       async editDraft () {
         try {
           this.content += this.draftz.value;
           tinymce.activeEditor.setContent(this.content);


         } catch (e) {
           console.log('err', e)
         }
       },

图片上传后路径参数丢失？

上传服务器成功返回的图片地址

<img

src="/uploads/contents/food/1542178708.png" alt="" width="385" height="741" />

但是接受玩后地址变成了

<img

src="uploads/contents/food/1542178708.png" alt="" width="385" height="741"

/>

前面少了一个/。
这个是哪里出了问题？pc端有没有这个/都可以显示但是移动端没有/图片就不显示？
哪位大佬知道这是什么情况？

Remove MenuBar

Some way of doing that?
In the original way its like menu:false

Package cairo was not found in the pkg-config search path.

Package cairo was not found in the pkg-config search path.
Perhaps you should add the directory containing cairo.pc' to the PKG_CONFIG_PATH environment variable No package 'cairo' found gyp: Call to './util/has_lib.sh freetype' returned exit status 0 while in binding.gyp. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error: gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:336:16)
gyp ERR! stack at emitTwo (events.js:135:13)
gyp ERR! stack at ChildProcess.emit (events.js:224:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:12)
gyp ERR! System Darwin 17.7.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/zhangyang/Documents/WorkProject/jsy-mes-web/mes/node_modules/canvas
gyp ERR! node -v v9.0.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

字数统计

连续的数字和字母都只显示1字

stage-2 missing

After installation, when I tried to start my project I got ERROR:
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "(...)\\node_modules\\vue-tinymce-editor"

I had to install babel-preset-stage-2, now is OK

How to disable and enable ?

Hello thanks for great plugin!

Is there any way to disable and enable ?

thanks for replied.

If you use the editor in SPA.

Suddenly whom will need.

The value does not change after initialization.

ReferenceError: Unknown plugin "transform-runtime"

Error appears on webpack build. I guess it's about some babel update

Cannot add image url

When i select insert image url option, it return me "Uncaught TypeError: Cannot read property 'settings' of null"

component doesn't work

I installed component following instructions in readme, but I don't have styles for it. It's looks like this http://joxi.ru/BA0LaykTJXE7gA

This includes two error

1. Cannot convert blob:http://localhost:8080/1025c3a4-b849-4a20-b0ae-5598e2383a64 to Blob. Resource might not exist or is inaccessible. How can I resolve this?
2. Refused to apply style from 'htttp://localhost:8080/dist-admin/plugins/codesample/css/prism.css'

this errors broke normal component working

Are there plan for upgrading to tinymce 5 version?

I have check and it is using tinymce 4.9,
in 4.9, default font size is very small as well there are other features too in 5 so what are the plans for upgrade?

Working with codesample plugin tinymce incorrect

When in insert a code sample, it working well. But i can not update it.
example:
I insert code bellow by codesample plugin tinymce
<?php echo 'Hello world' ?>
Then, I change it to
<?php echo 'Hello world 123' ?>
It not change. Please help me.
Sorry bad english

How to limit words ?

Thanks for nice plugin!

怎么添加上传图片功能？

how to use the callback event

how to use the callback event ,like onchange, oninit. and vue first time value is not bind

content of editor is empty when mounted

code:

after click the button:

but this works

so I must set the content after mounted ?

Package cairo was not found in the pkg-config search path

Package cairo was not found in the pkg-config search path

How to upload local?

How picture upload and uploaded to the server after inserted into the text?Including the copy and paste images also should pass the server, Refers to the local upload

toolbar 错误

Code Sample Broken Style

prism style for code sample is not working when I enter a new code sample.

不能扩展工具栏啊！

How to change language

How to change lanugae??

I want display korean..

Set content_style

how do i use the content_style option?

I tried as the example and not work

:init="{selector: 'textarea', content_style: 'div {margin: 10px; border: 5px solid red; padding: 3px}'}"

Internationalization

It would be awesome if you could support internationalization out of the box. Currently we have to deal with 'language_url' and have i18n packs installed somewhere else in the project.

Serious problems

Interface has<input type="textarea">,It will be regarded as<tinymce v-model="content" :other_options="other"></tinymce>

blur EVENT

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('blur', function (e) {
      console.log('Editor was blurred!');
    });
  }
});

other_options expects object, but defaults to empty array

https://github.com/dyonir/vue-tinymce-editor/blob/master/src/components/TinymceVue.vue#L83

[Error] Something wrong with include font on your package

I just get a message as the picture...

http://youtube.dev/fonts/vendor/tinymce/skins/lightgray/tinymce.woff?a7a41ea9358b658ec53e9d042334c1a8 net::ERR_ABORTED
Not found

I think when call, we call from: node_modules/tinymce/.... link to font...
But i find the url link wrong, i don't know to fix.

I'm using Laravel 5.4 and Vuejs2...
What i need to include to fix it?

Thanks

props name?

https://github.com/dyonir/vue-tinymce-editor/blob/1f98addd3c43685ef403481c12606ec47099c136/src/components/TinymceVue.vue#L3

it would be nice to have a prop to define the name.

<textarea :id="id" :name="name">{{ content }}</textarea>

Clear content before Insert -> Template

How can I clear content of vue-tinymce-editor before Insert -> Template?

Missing dependencies

When integrating vue-tinymce-editor, I had to install additional packages in order to get it to work:

• npm install --save-dev css-loader
• npm install --save-dev babel-plugin-transform-runtime

Regarding copy/paste

Scenario: when copy from libreoffice/excel file to editor, content not retain formatting/style
Is there any solution?

'null' is not an object - safari browser issue

[Vue warn]: Error in beforeDestroy hook: "TypeError: 'null' is not an object (evaluating 'rng.startContainer')"

I am facing this above error in safari browser. This error occurs when I leave that page through vue router.

After this error text editor looks like following screen shot without styling.

Please help me to solve this.

Vue js editor content not loading when in modal

I am using this component, with normal and in modal, but it is not working with modal, the value of field/ modal not set or bind

Failed to load plugin url: ../../zh_CN.js

Failed to load plugin url: ../../zh_CN.js

How to Add Buttons?

sorry.... I can not speak English very well...

how to add custom buttons? like image upload...

tinymce option has like..

tinymce.init({
selector: "#mytextarea",
theme: "modern",
language: "ko",
menubar:false,
plugins: "autolink autosave code link media image table textcolor autoresize",
toolbar: "undo redo | styleselect | forecolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link media custom_image code ",
setup: function(editor) {
editor.addButton('custom_image', {
title: 'custom_image',
icon: 'image',
onclick: function() {
window.open("POPUP_URL","tinymcePop","width=400,height=350");
}
});
}

    });

I wanna add custom_image button and open file upload pop up

Is there a way??

thanks

plugin.js:930 GET https://dyonir.github.io/vue-tinymce-editor/dist/static/js/plugins/codesample/css/prism.css net::ERR_ABORTED

it seems some problem with this file, both found in the demo page and my project, i really want to know why

Unexpected token import - Missing stack frames

I'm facing this issue though I installed all dependencies and extra modules which is required.

about load zh_CN.js

Add the following codes in your files：

import '../../../static/langs/zh_CN.js'

in stead of

options: {
language_url: '/static/langs/zh_CN.js',
images_upload_url: /api/upload-image/
},

Editor - change font family

Hey there,

I'm facing one issue with font-family.

How can I change default font-family of the editor?

Thanks

Doesn't work revome formating for headings

Doesn't work revome formatting for headings, if you look at the demo you can see that doesn't work

how to integrate vue-tinymce-editor with Laravel File Manager

i've been trying to integrate vue-tinymce-editor with Laravel File Manager but i got no result
any help please
this is supposed to be the integration in js but how to do it in vue

Updating the component's model (externally) does not update the editor

Editor should call tinymce's setContent when its value is updated externally.

tinymce.get('editor-id-value').setContent('updated-value-string');

Font Not Found

Wrong Path Detected

http://localhost/fonts/vendor/tinymce/skins/lightgray/tinymce.ttf?f8d2925604a55d7b8604a9875b8e70d3 net::ERR_ABORTED

http://localhost/fonts/vendor/tinymce/skins/lightgray/tinymce.woff?9267f79bc730290c6e2c90f9353d3ccf net::ERR_ABORTED

Error while adding component

did npm install vue-tinymce-editor
then trying to hookup

import tinymce from 'vue-tinymce-editor'
Vue.component('tinymce', tinymce)

give error in ./node_modules/vue-tinymce-editor/src/components/TinymceVue.vue
but compiling works if i change import tinymce from 'vue-tinymce-editor' to import tinymce from 'tinymce'

compiled success but no editor in console gives app.js:54012 [Vue warn]: Failed to mount component: template or render function not defined. using "vue-tinymce-editor": "^1.4.4",

Import tinymce changes site style

As soon as I add, import tinymce from 'vue-tinymce-editor'; it changes the background color to white on every page of my site. Why is it changing the styling?.

Uncaught SyntaxError: Unexpected token '<' while setting language

I have copied fa_IR.js lang to plugins/langs folder and set the options like :

options: {
 language_url: '../plugins/langs/fa_IR.js' //This url points to location of persian language file.
},

but I got below error:
Uncaught SyntaxError: Unexpected token '<'

Image URL parameter missing

upload picture

How to add “/”？

reade.md