I couldn't find a better way to use the plugin codesample in Vue.cli framework

[hubSteve]

I have been looking for the problem as same as mine to use the codesample plugin in my vue.cli project on lots of website anyway, but there is no better solutions even I take much of time on official guide of TinyMce. To see my init Object values below if you can figure it out, but it just doesn't work on my project. Really thanks. placeholder: 'Type here...', // 引入汉化组件 // language_url: '/static/tinymce/zh_CN', // // 设定语言为中文 // language: 'zh_CN', // // 加入主题 skin_url: '/static/tinymce/skins/ui/oxide', // 注册功能组件 selector: "#tinymce", // change this value according to your HTML plugins: 'codesample', codesample_languages: [ { text: 'HTML/XML', value: 'markup' }, { text: 'JavaScript', value: 'javascript' }, { text: 'CSS', value: 'css' }, { text: 'PHP', value: 'php' }, { text: 'Ruby', value: 'ruby' }, { text: 'Python', value: 'python' }, { text: 'Java', value: 'java' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' } ], toolbar: 'codesample'

[jscasca]

Hi @hubSteve

How are you setting the editor? Are you using it as a Vue component?

I don't think you need to specify a language_url since zh_CN should comes out of the box. Same with skin_url unless you require that in your project.

If you are using the editor as a vue component you don't need the selector option. You should be able to set up the editor as the following component:

<editor
       api-key="no-api-key"
       :init="{
         height: 500,
         placeholder: 'Type here...', // 引入汉化组件 // 
         language: 'zh_CN', // // 加入主题 
         plugins: 'codesample',
         toolbar: 'codesample',
         codesample_languages: [ 
          { text: 'HTML/XML', value: 'markup' }, 
          { text: 'JavaScript', value: 'javascript' }, 
          { text: 'CSS', value: 'css' }, 
          { text: 'PHP', value: 'php' }, 
          { text: 'Ruby', value: 'ruby' }, 
          { text: 'Python', value: 'python' }, 
          { text: 'Java', value: 'java' }, 
          { text: 'C', value: 'c' }, 
          { text: 'C#', value: 'csharp' }, 
          { text: 'C++', value: 'cpp' } ],
       }"
     />

Let me know if this helps

[hubSteve]

OK. I have imported those required dependencies. import tinymce from './../../static/tinymce' import './../../static/tinymce/themes/silver/theme' import Editor from '@tinymce/tinymce-vue' import image from './../../static/tinymce/plugins/image' What to do next is to apply the "" tag with configurations like you mentioned before. Is this all I need to do?

[jscasca]

You only need to import the Editor since that is a wrapper specifically for Vue.

You can find a quick start guide here: https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide