Создайте элегантный редактор статей WeChat

WeChat GitHub JavaScript Markdown
Создайте элегантный редактор статей WeChat

Редактор форматированного текста, отнимающий много времени

Я считаю, что друзья, которые использовали редактор форматированного текста на общедоступной платформе WeChat, испытали его.Не будет слишком много, чтобы описать его как «5 минут на написание и два часа на набор текста». Для некоторых друзей, которые занимаются только работой с контентом, это может быть хорошо. Это не что иное, как написание контента, а затем набор текста. Приведенных выше функций форматирования в основном достаточно. Но это может быть не так дружелюбно к нашим программистам, которые осаждают техническое содержание. Несмотря на то, что «шаблон статьи» поддерживается на общедоступной платформе WeChat, по-прежнему необходимо тщательно заполнять замещающий контент, а иногда исходный стиль был непреднамеренно изменен без предварительного уведомления.

Я уже посещал поисковики Baidu и 404 и резюмировал предоставленные вами методы, а их всего три:

  1. Загрузите надстройку для браузера Chrome.Markdown Here, сначала настройте нужный стиль css, а затем используйте его в текстовом редакторе WeChat.markdownСинтаксис напишите содержание статьи, затем ключевое преобразование, но вы обнаружите, что это менее желательно;
  2. 微信排版器
  3. Используйте собственное настольное приложение редактора Markdown для рабочего стола, напишите в нем иммерсивное письмо, затем напишите сценарий для замены определенных элементов, в зависимости от желаемого стиля, и, наконец, вставьте его в онлайн-редактор форматированного текста CKEditor, точно настройте стиль, затем выберите все, скопируйте и вставьте в текстовый редактор WeChat. Процесс гладкий, но недостаточно "ленивый". Я отказываюсь~

Сначала нам нужно поставить наш фрагмент кода в статью; во-вторых, мы также просим фрагмент кода нуждаться в синтаксисе выделения синтаксиса; третий в случае, когда мы не копируем исходный код, рукописные кодовые потребностиsnippet来提高码字速度；第四，我们更专注于思想的传播或是业务代码的逻辑又或是构建工具的搭建步骤，样式版式对我们来说，真的是不那么重要好吗？ !但是身为程序猿，连那么简单的样式都搞不定，岂不是太丢人了。 Emmmm...那就祭出我们程序猿创新创造的动力——“懒惰”！是的，我认为技术飞冲腾跃的一个很重要原因就是「Laziness」。 「懒人经济」，可见一斑。

Мы этого не хотим.

Инновационный редактор статей WeChat

Друзья могут напрямую использовать «Инструмент форматирования статей WeChat» дяди Бена:md.ironmaxi.com

Снимок выглядит следующим образом:

微信文章格式化工具
微信文章格式化工具

Структура каталога проекта:

.
├── dist  //生产文件夹
└── src  //源代码文件夹
│   ├── css  //样式代码文件夹
│   │   ├── pageThemes  //页面样式文件夹
│   │   └── themes  //代码样式文件夹
│   ├── imgs  //图片文件夹
│   └── js  //脚本文件夹
│   │   ├── google-code-prettify  //各种语言代码美化插件文件夹
│   │   ├── showdown-plugins  //markdown解析器的插件文件夹
│   │   └── theme  //存放控制页面样式和代码样式选择的业务逻辑组件文件夹
│   ├── CNAME
│   ├── demo.md  
│   ├── favicon.ico
│   ├── index.html
├──package.json
├──LICENSE
├──README.md
├──webpack.config.js  //调试用
└──webpack.production.config.js  //生产打包用
10 directories

В проекте используется инструмент модульной упаковки webpack, и команды для отладки и продакшена соответствующие, и можно использовать его напрямую.

package.json:

{
  "scripts": {
    "server": "NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --port 5014 --inline --hot --progress --config ./webpack.config.js",
    "build": "NODE_ENV=production && webpack --progress --profile --color --display-modules --display-chunks --config ./webpack.production.config.js"
  },
}

Отлаживать и производить прямо на терминале:

# 调试 http://localhost:5004/dist 进行访问
$ npm run server
# 生产
$ npm run build

Подробный код можно клонировать в репозиторий Github для ознакомления.Далее мы проанализируем процесс построения и идеи инструмента.

Идея инструмента

Инструмент имеет всего две страницы, одна страница редактирования, которая позволяет нам напрямую выбирать весь контент, написанный в редакторе уценки, и вставлять его сюда; другая страница предварительного просмотра, когда функция предварительного просмотра запускается на странице редактирования, переключается на страница предварительного просмотра.

Список функций:

  1. Страница редактирования может собирать весь текст уценки, написанный пользователем, и автоматически преобразовывать его в текст html при предварительном просмотре и отображать на странице браузера.
  2. На странице предварительного просмотра пользователи могут переключать формат макета страницы и стиль выделения кода в соответствии со своими предпочтениями.
  3. На странице предварительного просмотра можно выбрать и скопировать содержимое и вставить его в текстовый редактор WeChat.Нет пропусков или несоответствий между содержимым и стилем.
  4. Предварительный просмотр страницы, чтобы иметь возможность вернуться на страницу редактирования

На данный момент важные и сложные точки уже могут быть выбиты на доске:

  1. Текст синтаксиса уценки в текст HTML
  2. Подсветка синтаксиса фрагментов кода в тексте HTML

  1. Markdown To HTML Converter: showdownjs.com
  2. Google Code Prettify: google-code-prettify
  3. Clipboard written in Javascript: clipboardjs.com

Все, что нам нужно сделать, это объединить колеса, чтобы сделать «верхнее приложение».

Конфигурация сборки проекта

webpack.config.jsОн используется для отладки конфигурации,webpack.config.production.jsПоследний проект по производству использованной упаковки. Профиль немного длинный, не занимайте места, мы смотрим прямо на исходный код, очень ясно. Первый больше, чем простоwebpack-dev-serverСоответствующая конфигурация:

devServer: {
    hot: true,
    inline: true,
    historyApiFallback: false,
    disableHostCheck: true,
},

Файл шаблона домашней страницы index.html

Построить структуру страничного документа очень просто. Следующий код скрипта предназначен для статистики Baidu. Друзья, которым он не нужен, могут просто удалить его. Те, кому он нужен, регистрируют учетную запись Baidu, а затем заходят в приложение Baidu Statistics, чтобы получить код скрипта для статистики, и вставляют его напрямую.

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?5450f754e48ed6303fe9c7c617346a78";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

Файл входа в проект src/js/index.js

Файл входа сначала загружает файл стиля домашней страницы.index.less, загрузка в js в основном для возможности использоватьless-loaderВыполняйте компиляцию, компилируйте непосредственно в код CSS и<style>способ вставки в файл шаблона домашней страницыindex.htmlсередина.

Файл входа также загружает следующие наиболее важные зависимости во всем проекте. Функции этих файлов будут кратко объяснены позже:

  • showdown.js
  • clipboard.min.js
  • run_prettify.js
  • code-theme.js
  • page-theme.js

Выполнив некоторую подготовительную работу, создайте экземплярmarkdownИнициализируются анализатор грамматики и конвертер статей WeChat.

require('../css/index.less');

var $ = require("./jquery-3.1.1.js");
var showdown = require("./showdown.js");
var Clipboard = require("./clipboard.min.js");
var CodeTheme = require("./theme/code-theme");
var PageTheme = require("./theme/page-theme");

require("./showdown-plugins/showdown-prettify-for-wechat.js");
require("./showdown-plugins/showdown-github-task-list.js");
require("./showdown-plugins/showdown-footnote.js");

require("./google-code-prettify/run_prettify.js");

// 准备工作 这样才确保webpack打包的style在前 自定义样式在后 才能起效
$('head').eq(0).append($('<link rel="stylesheet" href="./themes/github-v2.css" id="codeThemeId" />'));
$('head').eq(0).append($('<link rel="stylesheet" id="pageThemeId" />'));
$('.li-qrcode').on('mouseover', function(){
  $('.qrcode-container').show();
}).on('mouseleave', function(){
  $('.qrcode-container').hide();
});
$('img').each(function(){
  var _this = this;
  var newImg = new Image();
  newImg.onload = function(){
    $(_this).show();
  };
  newImg.src = this.src;
});

// 解析浏览中url中的Path 去除无用的参数
var kv = location.href.split('?')[1];
kv = kv && kv.split('&') || [];
var params = {};
$.each(kv, function(index, item) {
  var m = (item || '').split('=');
  if (m && m[0] && m[1]) {
    params[m[0]]= m[1];
  }
});

// 方便跨域加载资源
if (/\.ironmaxi\.com$/.test(location.hostname)) {
  document.domain = 'ironmaxi.com';
}

// 实例化markdown语法解析对象
var converter =  new showdown.Converter({
  // 省略，看源码
});

// 实例化微信文章markdown转换器
var WechatMakdowner = {
  // 省略，看源码
};

// 微信文章转换器初始化
WechatMakdowner.init();

showdown.js

Официальный сайт:showdownjs.comАдрес на гитхабе:Github | портал showdownjsОфициальное введение его лозунгов:

Modern copy to clipboard. No Flash. Just 3kb gzipped.

Это библиотека для преобразования текста Markdown в текст HTML, реализованная на js, основанная на оригинальной работе Джона Грубера. Что ж, Джон Грубер — основатель синтаксиса Markdown. Библиотека может запускать рендеринг как в браузере, так и на сервере.

Шаг 1: Установите пакет npm

$ npm install --save showdown

Шаг 2: зависит от нагрузки и использование

var showdown  = require('showdown'),
    converter = new showdown.Converter(),
    text      = '#hello, markdown!',
    html      = converter.makeHtml(text);

пс:Этот проект напрямую копирует основные файлы для использования и не устанавливает пакет npm.

clipboard.min.js

Официальный сайт:clipboardjs.comАдрес на гитхабе:Github | портал буфера обменаОфициальный лозунг его введения:

A Markdown to HTML converter written in Javascript!

Это чрезвычайно легкая библиотека, которая использует JS для реализации функции PATEBOORD, и она также чрезвычайно удобна для использования.

Шаг 1: Установите пакет npm

$ npm install --save clipboard

Шаг 2: Загрузите зависимости и используйте

var Clipboard = require("clipboard");
new Clipboard('.btn');

пс:Этот проект напрямую копирует основные файлы для использования и не устанавливает пакет npm.

run_prettify.js

Официальный сайт статьи:Google Code ArchiveАдрес на гитхабе:Github | портал google-code-prettifyОфициальный лозунг его введения:

An embeddable script that makes source-code snippets in HTML prettier.

Он может поддерживать подсветку синтаксиса для многих языков, даже если некоторые из них не входят в список поддерживаемых, они также могут поддерживаться плагинами расширения. Преимущества многочисленны:

  1. работать в HTML
  2. Поддержка встроенных ссылок и номеров строк в коде.
  3. Простой и практичный API
  4. достаточно легкий
  5. Настраиваемые стили с помощью CSS
  6. Поддерживает C-подобные, похожие на Bash и XML-языки без явных объявлений типов языка
  7. Предоставляет расширяемый интерфейс для других языков
  8. Кроссбраузерная поддержка

Шаг 1: Введите файл записи js

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Шаг 2: прямой и практичный

<pre class="prettyprint">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>

Кроме того, его можно явно объявить для разных языковых типов:

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>


// 推荐
PR.prettyPrint()

code-theme.js

在渲染文本结果的页面提供各种代码高亮样式的切换功能 существует./src/themes/Справочник, хранение различных файлов кода Выделение стиля, файлы стилей загружаются из Github Repo'sGithub | Библиотека стилей подсветки кода

Основываясь на этом, я добавил файл стиля с именем «material-dark», согласноAtom Material SyntaxПлагин редактора для настройки, а также личный любимый стиль подсветки синтаксиса.

page-theme.js

Предоставляет функцию переключения формата страницы на странице, которая отображает текстовый результат. существует./src/pageThemes/В каталоге хранятся три типа страниц файлов, и их можно настраивать под себя, это очень просто.

О том, как выбрать редактор Markdown

Markdown — это унифицированный синтаксис, и выбор разных редакторов на разных платформах — исключительно вопрос личных предпочтений. Ниже напишите мои рекомендации, подходящие для разных групп людей.

Если вы работаете с контентом, выберите редактор, поддерживающий «серьезный» синтаксис уценки:

  • Mac
    • "М Евро"
    • "Макдаун"
    • "Мвеб"
  • Windows
    • "Марк Дамбо"

Если вы программист, вы можете сделать следующее или просто использовать редактор кода, который вы используете, или установить плагин для подсветки синтаксиса Markdown:

  • "Атом"
  • "VScode"
  • "ВозвышенныйТекст3"

напиши в конце

Пусть мы все сможем спокойно писать, ведь в этом обществе всегда должно быть место, где мы можем побыть спокойно и счастливо.

微信公众号

Категории