富文本上线

src/components/Tinymce/index.ts

@@ -1 +1,3 @@
 import { createAsyncComponent } from '@/utils/createAsyncComponent';
+
+export const Tinymce = createAsyncComponent(() => import('./src/Editor.vue'));

src/components/Tinymce/src/Editor.vue

@@ -28,7 +28,7 @@ import { buildShortUUID } from "@/utils/uuid";
 import { bindHandlers } from "./helper";
 import lineHeight from "./lineHeight";
 import { onMountedOrActivated } from "@/hooks/onMountedOrActivated";
-const tinymceScriptSrc = "https://cdn-novel.91duke.com/static/tinymce.js";
+const tinymceScriptSrc = "https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1/tinymce.min.js";
 
 export default defineComponent({
   name: "Tinymce",
@@ -38,7 +38,7 @@ export default defineComponent({
   setup(props, { emit, attrs }) {
     const editorRef = ref<any>(null);
     const tinymceId = ref<string>(buildShortUUID("tiny-vue"));
-    const elRef = ref<Nullable<HTMLElement>>(null);
+    const elRef = ref<any>(null);
 
     const tinymceContent = computed(() => {
       return props.modelValue;
@@ -56,12 +56,14 @@ export default defineComponent({
       const { height, options } = props;
       return {
         selector: `#${unref(tinymceId)}`,
+        base_url: 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1',
+          suffix: '.min',
         height: height,
         toolbar: toolbar,
         menubar: "file edit insert view format table",
         plugins: plugins,
         // 语言包
-        language_url: "resource/tinymce/langs/zh_CN.js",
+        language_url: "https://cdn-novel.91duke.com/static/zh_CN.js",
         // 中文
         language: "zh_CN",
         default_link_target: "_blank",

src/store/modules/app/actions.ts

@@ -41,6 +41,7 @@ const actions: ActionTree<State, RootState> & Actions = {
       const storeOfficials = formatSelectOptions<number>(data, "name", "id");
       commit(MutationType.setOfficial, storeOfficials);
     } catch (e) {
+
       console.log("error", e);
     }
   },
@@ -50,6 +51,7 @@ const actions: ActionTree<State, RootState> & Actions = {
       const storePlatforms = formatSelectOptions<string>(data, "desc", "name");
       commit(MutationType.setPlatforms, storePlatforms);
     } catch (e) {
+  
       console.log("error", e);
     }
   },

src/views/put/landing/add.vue

@@ -44,7 +44,7 @@ const LandingAddPage = defineComponent({
   },
   setup() {
     const state = reactive({
-      stepCurrent: 0,
+      stepCurrent: 1,
       stepComponent: ["step-one", "step-two"],
       isOver: false,
       forms: ref<Record<string, any>>({}),

src/views/put/landing/stepComp/step-two.vue

@@ -66,6 +66,11 @@
           ></div>
         </div>
       </div>
+      <div>
+      <Tinymce v-model="mycontent" :height="600">
+
+      </Tinymce>
+      </div>
       <div class="button-form">
         <a-button style="margin-right:20px" @click="goPrev">上一步</a-button>
         <a-button type="primary" @click="submitForm">保存</a-button>
@@ -135,10 +140,14 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
 import { getLandingPic, getLandingTempalte } from "@/api";
+import {Tinymce} from "@/components/Tinymce/index";
 import { message } from "ant-design-vue";
 import useApp from "@/hooks/useApp";
 const StepTwo = defineComponent({
   name: "StepTwo",
+  components:{
+  Tinymce
+  },
   props: {
     content: Object,
     default() {
@@ -154,6 +163,7 @@ const StepTwo = defineComponent({
           content: "",
         },
       ]),
+      mycontent:'',
       modelShow: false,
       selectImg: false,
       activeKey: "10",