# tinymce-demo文档

**Repository Path**: liudannoone/tinymce_demo_document

## Basic Information

- **Project Name**: tinymce-demo文档
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2019-10-25
- **Last Updated**: 2025-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 电子病历编辑器
  基于选定的富文本编辑器，使用vue框架进行功能方法的扩展开发
## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

# 项目目录结构

```
+-- src 开发中一般只关注这个文件夹
    |   +-- assets 公用静态资源
    |   +-- components 公用组件 组件文件名: 大驼峰
    |   +-- config 配置文件
        |   +-- index.js 编辑器初始化的默认配置
    |   +-- plugin 扩展部分，按模块分 一个模块一个文件夹
        |   +-- casePlugin 病例组件扩展部分
        |   +-- specialTale 护理表格部分
    |   +-- lang 公用语言包文件
        |   +-- en.js 中英文翻译文件
    |   +-- scss 样式文件
                |   +-- var.scss 全局配置的颜色等
                |   +-- reset.scss 重置样式
                |   +-- uiReset.scss 使用UI框架重置样式
                |   +-- base.scss 公用样式
                |   +-- app.scss 全局样式
                |   +-- animate.scss 动画的样式
                |   +-- content.css 编辑器内部的样式（只能是css文件）
    |   +-- utils 全局公用工具类
                |   +-- base.js 公用的基本方法，如判断是否为空是否是对象等等
                |   +-- dom.js 常用的dom操作的方法
                |   +-- index.js 向外暴露所有的utils的方法
+-- static 独立的静态资源，外部引用的静态js等
+-- .babelrc babel配置文件
+-- .editorconfig 统一编辑器配置文件
+-- .eslintrc.js  eslint规则 不能随便更改
+-- index.html  入口页面
+-- bluild  webpack构建文件
+-- config  构建配置文件
+-- dist  自动构建好的文件 不能手动改
```

<template>
  <div id="app">
    <!--兼容只到IE11-->
    <editor
      api-key="no-api-key"
      <!--5，5-stable（默认）：TinyMCE的当前企业版本。
      5-testing：TinyMCE下一个企业版本的当前候选版本。
      5-dev：TinyMCE的夜间构建版本。-->
      cloud-channel="5"
      <!--只读模式-->
      :disabled=true
      <!--内联模式-->
      :inline=false
      <!--设置v-model events的触发事件。默认change keyup undo redo-->
      model-events="change keydown blur focus paste"
      <!--数据的双向绑定-->
      v-model="content"
      <!--随事件触发，并通过两个参数调用：
        event -事件对象。
        editor -对编辑器的引用。
        以下事件可用：
        onActivate
        onAddUndo
        onBeforeAddUndo
        onBeforeExecCommand
        onBeforeGetContent
        onBeforeRenderUI
        onBeforeSetContent
        onBeforePaste
        onBlur
        onChange
        onClearUndos
        onClick
        onContextMenu
        onCopy
        onCut
        onDblclick
        onDeactivate
        onDirty
        onDrag
        onDragDrop
        onDragEnd
        onDragGesture
        onDragOver
        onDrop
        onExecCommand
        onFocus
        onFocusIn
        onFocusOut
        onGetContent
        onHide
        onInit
        onKeyDown
        onKeyPress
        onKeyUp
        onLoadContent
        onMouseDown
        onMouseEnter
        onMouseLeave
        onMouseMove
        onMouseOut
        onMouseOver
        onMouseUp
        onNodeChange
        onObjectResizeStart
        onObjectResized
        onObjectSelected
        onPaste
        onPostProcess
        onPostRender
        onPreProcess
        onProgressState
        onRedo
        onRemove
        onReset
        onSaveContent
        onSelectionChange
        onSetAttrib
        onSetContent
        onShow
        onSubmit
        onUndo
        onVisualAid-->
       initialValue="<p>This is the initial content of the editor</p>"
       :init="{
          width: 600,
          max_width:500，
          height: 300,
          max_height:500，
         plugins: [
            'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
            'save table directionality emoticons template paste'
         ],

    <!--设置为false不显示菜单false-->
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',
         <!--设置可编辑区域的样式-->
        content_css: 'css/content.css',
        <!--         图片上传部分        -->
          images_upload_url: 'postAcceptor.php', //上传的地址
          file_picker_callback: function(callback, value, meta) { } //上传的回调
          file_picker_types: 'file image media',
          images_dataimg_filter: function(img) {}，//加水印
          images_reuse_filename: false，//是否使用原来的文件名，默认重新生成一个唯一的名字
          images_upload_base_path: '/some/basepath', //图片前缀
          images_upload_credentials: true，//从地址传递还是传base64
          images_upload_handler: function (blobInfo, success, failure) {},
          automatic_uploads: false,
          <!--右键菜单-->
          contextmenu: "link image imagetools table spellchecker",
          contextmenu_never_use_native: true,
          <!--是否显示底部状态栏-->
          statusbar: false，
          <!--禁用自动生成隐藏输入字段的内联编辑元素的能力。默认情况下，所有内联编辑器都有一个隐藏的input元素-->
          hidden_input: false
    <!--使用该draggable_modal选项可以为模式对话框启用拖动。-->
    draggable_modal: true
    <!--字体-->
    font_formats: 'Arial=arial,helvetica,sans-serif;',
    <!--字体大小-->
    fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px'
    <!--图标-->
    icons_url: 'https://www.example.com/icons/material/icons.js', // load icon pack
    icons: 'material'      // use icon pack
   <!-- 默认菜单-->
    menu: {
      file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
      edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
      view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
      insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
      format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
      tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
      table: { title: 'Table', items: 'inserttable tableprops deletetable row column cell' },
      help: { title: 'Help', items: 'help' }
    }，
    <!--配置菜单的顺序-->
    menubar: 'file edit insert view format table tools help'，
    <!--禁用菜单-->
    menubar: false,
    <!--快速插入工具栏-->
    quickbars_insert_toolbar: 'quickimage quicktable',
    <!--快速选择工具栏-->
    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'，
    <!--启用垂直和水平调整大小true，false，'both'-->
    resize: false，
    <!--主题皮肤-->
    skin: "oxide"，
    theme: 'silver'
   <!-- 样式配置-->
    style_formats: [
    { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
    ]},
    { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
    ]},
    { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
    ]},
    { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
    ]}
    ]，
  <!--  toolbar应为该选项提供带有name和items作为对象属性的对象数组。的name应是将被设置为一个字符串值title的属性div包含在工具栏组。的items应该是一个字符串数组，用于指示应出现在特定工具栏组中的控件-->
    toolbar: [
        {
        name: 'history', items: [ 'undo', 'redo' ]
        },
      ],
    <!--菜单过多时样式 'sliding' -->
    toolbar_drawer: 'floating',
    }"
    ></editor>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'app',
  components: {
    'editor': Editor
  }
}
/*自动完成器*/
// editor.ui.registry.addAutocompleter(name, configuration)
 /* 自定义菜单*/
/*
tinymce.init({
  selector: '#editor',
  menu: {
    custom: { title: 'Custom Menu', items: 'undo redo myCustomMenuItem' }
  },
  menubar: 'file edit custom',
  setup: (editor) => {
    editor.ui.registry.addMenuItem('myCustomMenuItem', {
      text: 'My Custom Menu Item',
      onAction: () => alert('Menu item clicked')
    });
  }
});
*/
/*边栏API允许开发人员以与添加按钮或菜单项类似的方式在编辑器实例上添加边栏。
开发人员可以tinymce.init使用setup回调或在插件内部直接添加侧边栏。*/
/*tinymce.init({
toolbar: "mysidebar",
  setup: function (editor) {
  editor.ui.registry.addSidebar('mysidebar', {
    tooltip: 'My sidebar',
    icon: 'comment',
    onSetup: function (api) {
      console.log('Render panel', api.element());
    },
    onShow: function (api) {
      console.log('Show panel', api.element());
      api.element().innerHTML = 'Hello world!';
    },
    onHide: function (api) {
      console.log('Hide panel', api.element());
    }
  });
}
});*/

    // 新增的菜单
    editor.ui.registry.addMenuItem('myCustomMenuItem', {
      text: '新增的菜单',
      onAction: () => alert('Menu item clicked')
    })
    // 选中img出现的菜单
    editor.ui.registry.addContextToolbar('imagealignment', {
      predicate: function (node) {
        return node.nodeName.toLowerCase() === 'img'
      },
      items: 'alignleft aligncenter alignright',
      position: 'node',
      scope: 'node'
    })
    // 按钮工具栏
    editor.ui.registry.addButton('testAddBtn', {
      text: '添加的新按钮',
      tooltip: '提示添加的新按钮',
      onAction: function (_) {
        console.log(_)
        editor.insertContent('添加的新按钮')
      }
    })
</script>