search

surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.
https://surveyjs.io/open-source
Other
915 stars 373 forks source link

[Vue] Chinese characters are not supported #4991

Closed nidear1024 closed 10 months ago

nidear1024 commented 11 months ago

Are you requesting a feature, reporting a bug or ask a question?

reporting a bug

What is the current behavior?

What is the expected behavior?

How would you reproduce the current behavior (if this is a bug)?

WX20231215-171357

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://workflow.mazihub.com/survey/creator

Test code

<script lang="ts" setup>
import { SurveyCreatorModel, editorLocalization } from 'survey-creator-core';
import { onMounted, ref, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import "survey-creator-core/i18n/simplified-chinese";

// 设置编辑器本地化为简体中文
editorLocalization.currentLocale = "zh-cn";

const route = useRoute();
const json = ref({}); // 使用ref创建响应式数据

const creatorOptions = {
    // haveCommercialLicense: true, // TODO Enable with licence
    showLogicTab: true,
    showTranslationTab: true,
    showEmbeddedSurveyTab: false,
    autoSaveDelay: 3000,
    //   isAutoSave: false, // Survey is currently only saved when pressing the button.
    themeForPreview: 'defaultV2',
    //   showThemeTab: true,
};

const creator = new SurveyCreatorModel(creatorOptions);
console.log(creator);
// 创建Survey Creator实例的函数
function createSurveyCreator() {
    creator.onUploadFile.add(uploadFn);

    creator.saveSurveyFunc = async function () {
        // console.log(222, JSON.parse(this.text));
    };
}

onMounted(async () => {
    try {
        creator.JSON = json.value;
        createSurveyCreator(); // 创建Survey Creator实例
    } catch (error) {
        console.error('Error fetching survey data:', error);
    }
});
</script>
<template>
    <div style="position: fixed; top: 52px; left: 0; width: 100vw; bottom: 0">
        <SurveyCreatorComponent :model="creator"></SurveyCreatorComponent>
    </div>
</template>

{
  "name": "surveyjs-vue3-quickstart",
  "description": "SurveyJS Vue3 Quickstart Boilerplate",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --force",
    "build": "run-p type-check build-only",
    "preview": "vite preview --host 0.0.0.0 --port 8080",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "crypto-js": "^4.2.0",
    "jspdf": "^2.3.0",
    "jspdf-autotable": "^3.0.10",
    "qs": "^6.11.2",
    "survey-analytics": "latest",
    "survey-core": "latest",
    "survey-creator-core": "latest",
    "survey-creator-vue": "latest",
    "survey-pdf": "latest",
    "survey-vue3-ui": "latest",
    "surveyjs-widgets": "latest",
    "vite-plugin-compression": "^0.5.1",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "xlsx": "^0.16.9"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.18.5",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "axios": "^1.6.2",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all2": "^6.1.1",
    "typescript": "~5.0.4",
    "vite": "^4.4.11",
    "vue-tsc": "^1.8.19"
  }
}

Specify your

JaneSjs commented 11 months ago

Hello @nidear1024, Thank you for sending a demo. Would you please additionally share a video/screencast illustrating the issue?

Thanks

nidear1024 commented 11 months ago

https://github.com/surveyjs/survey-creator/assets/26103294/8028ff14-1b68-498e-957e-6880b3fdcbd9

@JaneSjs

JaneSjs commented 11 months ago

Hi @nidear1024, I discussed this issue with our developers. It appears that the issue should be fixed with the next maintanance update of a survey-creator-vue package. The next maintanance update is expected by Wednesday-Thursday. In the meantime, we would appreciate it if you could test the demo which uses the latest version of the survey-creator-vue package. Please navigate to this demo page, and try to enter Chinese within the design surface on this demo page. image

No need to run CodeSandbox/Plunker: please try to enter required symbols right within the embedded survey creator. Please let me know if you can correctly enter Chinese using this demo page.

Thanks