ckeditor5在vue中使用 我想添加一个 audio 的上传按钮,但是水平有限,求个指点

发布于 2022-09-12 04:24:31 字数 7968 浏览 13 评论 0

ckeditor.vue

<template>
  <div>
    <!-- 工具栏容器 -->
    <div id="toolbar-container"></div>
    <!-- 编辑器容器 -->
    <div style="margin-left: 100px;" id="editor"></div>
  </div>
</template>
<script>
import CKEditorb from "../../static/js/ckeditor5/classic/ckeditor.js";

export default {
  props: {
    value: { type: String, default: "" },
  },
  data() {
    return {
      editor: null, //编辑器实例
    };
  },
  mounted() {
    this.initCKEditor();
  },
  methods: {
    async initCKEditor() {
      let _this = this;
      let editor = await CKEditorb.create(document.querySelector("#editor"), {
        placeholder: _this.$t("addContent"),
        //上传图片参数
        simpleUpload: {
          uploadUrl: axios.defaults.baseURL + "upload_rich_text_img?e=v2",
          headers: { Authorization: localStorage.token },
        },

        heading: {
          options: [
            {
              model: "paragraph",
              title: "Paragraph",
              class: "ck-heading_paragraph",
            },
            {
              model: "heading2",
              view: "h2",
              title: "Heading 1",
              class: "ck-heading_heading2",
            },
            {
              model: "heading3",
              view: "h3",
              title: "Heading 2",
              class: "ck-heading_heading3",
            },
          ],
        },
      });
      const toolbarContainer = document.querySelector("#toolbar-container");
      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
      _this.editor = editor; //将编辑器保存起来,用来随时获取编辑器中的内容等,执行一些操作
      editor.model.document.on("change:data", function () {
        _this.$emit("change", editor.getData());
      });
      editor.setData(_this.value);
    },
  },
};
</script>

打包前的配置ckeditor.js

/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';


import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
// import ImageResizeEditing from '@ckeditor/ckeditor5-image/src/imageresize/imageresizeediting';
// import ImageResizeHandles from '@ckeditor/ckeditor5-image/src/imageresize/imageresizehandles';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
// import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- ADDED
import Font from '@ckeditor/ckeditor5-font/src/font';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
// // 核心插件,提供管理特殊字符及其类别的API。
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/SpecialCharacters';
// //-所有的特殊字符插件。
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials'
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
// //-箭的特殊角色
// import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersArrows';
// //-货币特殊字符。
// import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersCurrency';
// //-拉丁特殊字符。
// import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersLatin';
// //-数学特殊字符。
// import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersMathematical';
// //-文本特殊字符。
// import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersText';

export default class ClassicEditor extends ClassicEditorBase {


}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageToolbar,
    ImageCaption,
    ImageStyle,
    ImageResize,
    // ImageResizeEditing,
    // ImageResizeHandles,
    // LinkImage,
    ImageUpload,
    SimpleUploadAdapter,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    Alignment,
    Font,
    SpecialCharacters,
    SpecialCharactersEssentials,
    Highlight,
    HorizontalLine,
    RemoveFormat,
    Underline
];

// Editor configuration.
ClassicEditor.defaultConfig = {

    toolbar: {
        items: [
            "heading", //段落
            "|", //分隔
            "bold", //加粗
            "italic", //倾斜
            "link", //超链接
            "bulletedList", //项目列表
            "numberedList", //编号列表
            "blockQuote", //块引用
            "undo", //撤销
            "redo", //重做
            "imageUpload", //插入图像
            "insertTable", //表格
            "MediaEmbed", //视频
            "indent", //减少缩进
            "Outdent", //增加缩进
            "CKFinder", //插入文件
            "alignment", //对齐
            // "alignment:left",
            // "alignment:right",
            // "alignment:center",
            // "alignment:justify",
            "fontSize", //字体大小
            "fontColor", //字体颜色
            "fontBackgroundColor", //字体背景颜色
            "fontFamily", //字体
            "specialCharacters", //特殊字符
            "highlight", //标记
            "horizontalLine", //分割线
            "removeFormat", //删除格式
            "todoList",
            "underline", //下划线
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

官方链接
https://ckeditor.com/docs/cke...
看不懂该怎么写,写在哪。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文