侧边栏壁纸
博主头像
刹那烟雨博主等级

行动起来,活在当下

  • 累计撰写 36 篇文章
  • 累计创建 9 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

知识库-主题与插件

落雨不悔
2024-04-06 / 0 评论 / 0 点赞 / 46 阅读 / 3088 字

在2.0中,新增加了主题与插件,极大的拓展了编辑器的可能

主题

主题可以自定义css,实现插件自定义样式。

参考

具体的class可以参考:【知识库

css变量可参考:【设计变量

小贴士

  • .cherry-previewer:markdown编辑器的预览css选择器

markdown编辑器-菜单

返回值会直接替换选中的值,如果没有选中,则直接插入到光标位置

参数

selection:当点击菜单的时候,选中的文本

instance:编辑器对象

类型定义

declare class Cherry {
    /**
     * 获取编辑区内的markdown源码内容
     * @returns markdown源码内容
     */
    getValue(): string;

    /**
     * 获取编辑区内的markdown源码内容
     * @returns {string} markdown源码内容
     */
    getMarkdown(): string;

    /**
     * 获取预览区内的html内容
     * @param {boolean} [wrapTheme=true] 是否在外层包裹主题class
     * @returns {string} html内容
     */
    getHtml(wrapTheme?: boolean): string;

    /**
     * 覆盖编辑区的内容
     * @param {string} content markdown内容
     * @param {boolean} keepCursor 是否保持光标位置
     */
    setValue(content: string, keepCursor?: boolean): void;

    /**
     * 在光标处或者指定行+偏移量插入内容
     * @param {string} content 被插入的文本
     * @param {boolean} [isSelect=false] 是否选中刚插入的内容
     * @param {[number, number]|false} [anchor=false] [x,y] 代表x+1行,y+1字符偏移量,默认false 会从光标处插入
     * @param {boolean} [focus=true] 保持编辑器处于focus状态
     */
    insert(content: string, isSelect?: boolean, anchor?: [number, number] | false, focus?: boolean): void;

    /**
     * 在光标处或者指定行+偏移量插入内容
     * @param {string} content 被插入的文本
     * @param {boolean} [isSelect=false] 是否选中刚插入的内容
     * @param {[number, number]|false} [anchor=false] [x,y] 代表x+1行,y+1字符偏移量,默认false 会从光标处插入
     * @param {boolean} [focus=true] 保持编辑器处于focus状态
     * @returns
     */
    insertValue(content: string, isSelect?: boolean, anchor?: [number, number] | false, focus?: boolean): void;

    /**
     * 覆盖编辑区的内容
     * @param {string} content markdown内容
     * @param {boolean} [keepCursor=false] 是否保持光标位置
     */
    setMarkdown(content: string, keepCursor?: boolean): void;

}

declare const selection: string;
declare const instance: Cherry;

实例

举个例子,比如说一个普通按钮,可处理点击事件,点击时做相应的操作(比如往编辑区插入内容,或者修改预览区内容等),代码如下:

// 加粗斜体
return `***${selection}***`;

小贴士

如果是一个简单的字符串处理,是一个同步方法,可以直接将替换的内容return回来,如果是一个异步方法,可以使用instance.insert方法,在光标中插入

markdown编辑器-语法拓展

此插件可以通过正则表达式实现语法上的拓展

未完待续。。。

0

评论区