wangeditor如何集成lighhight？

Question

vue项目，wangeditor如何集成highlightjs？ wangeditor文档中说正常引入highlightjs即可，但是引入后不能选择语言。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使用Vue.js和WangEditor库来整合Highlight.js，请遵循以下步骤：

1. 首先，确保你已经安装了highlight.js。如果还没有安装，你可以通过npm或yarn来安装它：

   npm install highlight.js
   

   或者

   yarn add highlight.js
   

2. 在你的index.html文件中添加<script>标签以导入Highlight.js库：

   <script src="https://cdn.jsdelivr.net/npm/highlight.js@9.4.0/dist/highlight.min.js"></script>
   

3. 接下来，在你的main.js文件中导入vue和vue-i18n（如果你正在使用国际化）并将其与vue-router一起使用。

   import Vue from 'vue'
   import App from './App.vue'
   import i18n from './i18n'
   
   new Vue({
     router,
     i18n,
     render: h => h(App)
   }).$mount('#app')
   

4. 现在，你需要在App.vue组件中设置一个变量来存储高亮的CSS类名。例如：

   <template>
     <div class="editor-container">
       <!-- 你的编辑器元素 -->
     </div>
   </template>
   
   <script>
   export default {
     mounted() {
       this.$refs.editor.highlighted = true;
     }
   };
   </script>
   

5. 最后，在components/Editor.vue组件中为你的编辑器设置样式，使其具有高亮功能。你可以使用highlight.js提供的API来实现这一点。

   <template>
     <div v-highlightjs="{language: 'your_language', style: 'background-color: yellow;'}" ref="editor"></div>
   </template>
   
   <script>
   import { Editor } from '@tinymce/tinymce-vue';
   
   export default {
     components: {
       Editor
     },
     data() {
       return {
         editor: null
       };
     },
     methods: {
       async init() {
         const editor = await this.$nextTick(() => new Editor('tinymce', {
           selector: '.editor-container',
           oninit: (editor) => {
             editor.on('change', () => {
               // 处理文本更改事件
             });
           },
           plugins: [
             'advlist autolink lists link image charmap print preview anchor template codesample fullscreen',
             'searchreplace visualblocks code help wordcount'
           ],
           toolbar1: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat',
           content_css: 'https://unpkg.com/tinymce/themes/silver/theme.css'
         }));
       }
     },
     created() {
       this.init();
     }
   };
   </script>
   

6. 将上述代码插入到你的Vue应用中，并运行应用程序。现在你应该能看到你的编辑器被正确地高亮化。

请注意，上述代码示例是基于Vue 3和Vue Router的简单示例。根据你的实际需求，可能需要对这些部分进行调整。