ctf0 / Laravel-Media-Manager

A "Vuejs & Laravel" Media Manager With Tons of Features
MIT License
829 stars 179 forks source link

[Question] TinyMCE integration #52

Closed rbcunhadesign closed 5 years ago

rbcunhadesign commented 5 years ago

What version of Laravel are you using? (nothing lower than v5.4).

5.6

is it an issue related to installation or usage ?

usage

what is the error you are getting ?

How do you integrate with TinyMCE?

I have placed a TinyMCE textbox and the code provided. Once the file upload button is clicked through TinyMCE, nothing happens.

Is there something extra that is needed in order to integrate?

ctf0 commented 5 years ago

have u checked https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-With-Any-WYSIWYG-Editor ?

dont forget that you also need to add @include('MediaManager::extras._editor')

rbcunhadesign commented 5 years ago

once I add the @include and click on the image upload button I get this:

app.js:1885 [Vue warn]: Property or method "toggleModalFor" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ app.js:1885
warnNonPresent @ app.js:3191
has @ app.js:3224
click @ VM1300:3
invoker @ app.js:3319
fn._withTask.fn._withTask @ app.js:3118
trigger @ app.js:23137
(anonymous) @ app.js:23176
each @ app.js:15203
each @ app.js:15038
trigger @ app.js:23175
jQuery.fn.(anonymous function) @ app.js:25061
file_browser_callback @ app.js:26507
t @ theme.min.js:1
Vg.c.fire @ tinymce.min.js:2
fire @ theme.min.js:1
(anonymous) @ theme.min.js:1
Vg.c.fire @ tinymce.min.js:2
fire @ theme.min.js:1
o @ theme.min.js:1
C @ tinymce.min.js:2
d @ tinymce.min.js:2
VM1300:3 Uncaught TypeError: toggleModalFor is not a function
    at click (eval at createFunction (app.js:11972), <anonymous>:3:205)
    at invoker (app.js:3319)
    at HTMLButtonElement.fn._withTask.fn._withTask (app.js:3118)
    at Object.trigger (app.js:23137)
    at HTMLButtonElement.<anonymous> (app.js:23176)
    at Function.each (app.js:15203)
    at jQuery.fn.init.each (app.js:15038)
    at jQuery.fn.init.trigger (app.js:23175)
    at jQuery.fn.init.jQuery.fn.(/anonymous function) [as click] (http://go.kctcs.test/js/app.js:25061:9)
    at file_browser_callback (app.js:26507)

Any clue on what I'm doing wrong?

ctf0 commented 5 years ago

yes, u need to follow the steps in https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal on how to create a wrapper component like

<script>
import MediaModal from './path/to/vendor/MediaManager/js/mixins/modal'

export default {
    name: 'example-comp',
    mixins: [MediaModal],
</script>

then use it like

<example-comp inline-template>
    <div>
        {{-- manager --}}
        <div v-if="inputName">@include('MediaManager::extras._modal')</div>

        {{-- editor --}}
        @include('MediaManager::extras._editor')

        {{-- form --}}
        // your form
    </div
</example-comp>