vue中使用ckeditor富文本编辑器

土肥圆xulia

已于 2023-02-22 16:38:56 修改

阅读量469

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-22 16:38:12 首次发布

本文链接：https://blog.csdn.net/qq_39057641/article/details/129165425

版权

本文介绍如何在Vue项目中集成CKEditor富文本编辑器，包括在public.index.html文件中的引入和Vue组件中的具体使用方法。

摘要由CSDN通过智能技术生成

vue中使用ckeditor富文本编辑器

1.public文件夹的.index.html文件

 <script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/classic/translations/zh-cn.js"></script>

2.vue文件使用

  <el-input id="editor" name="content" type="textarea" :rows="2" placeholder="请输入内容" v-model="content">
  </el-input>

<script>
export default {
   
data() {
   
    return {
   
     content:''
    }
},
 methods: {
   
   initCKEditor() {
   
      CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
   
        toolbar: {
   
          items: [
            'exportPDF', 'exportWord', '|',
            'findAndReplace', 'selectAll', '|',
            'heading', '|',
            'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
            'bulletedList', 'numberedList', 'todoList', '|',
            'outdent', 'indent', '|',
            'undo', 'redo'